โฮมเพจ » ออกแบบเว็บไซต์ » คำแนะนำเกี่ยวกับแอปเว็บขั้นสูง

    คำแนะนำเกี่ยวกับแอปเว็บขั้นสูง

    นักพัฒนาซอฟต์แวร์ส่วนใหญ่ได้ยินเรื่องปากต่อปากบ้าง แอพเว็บก้าวหน้า. สิ่งเหล่านี้ได้รับการสนับสนุนอย่างกว้างขวางจาก บริษัท เทคโนโลยีเช่น Google และกำลังกลายเป็น บรรทัดฐานสำหรับการใช้งานเว็บหลายอุปกรณ์.

    แต่อะไรกันแน่ ความแตกต่างระหว่างแบบทั่วไป และ ความก้าวหน้า เว็บแอป?

    สำหรับนักพัฒนา, มันเป็นโลกที่แตกต่าง. Progressive Web Apps ใช้ API เว็บที่ทันสมัยในการ สร้างประสบการณ์การใช้งานแอปดั้งเดิม ในเบราว์เซอร์ ซึ่งหมายความว่าผู้พัฒนาสามารถสร้างแอพไดนามิกโหลดเร็วโดยไม่ต้องใช้เฟรมเวิร์กแบบไฮบริด.

    ในคู่มือนี้ฉันจะครอบคลุม พื้นฐานของ Progressive Web Apps, ฟีเจอร์หลักบางประการและวิธีเริ่มต้นการสร้างของคุณเอง.

    เว็บแอพก้าวหน้าคืออะไร?

    แอพพลิเคชั่นบนเว็บแบบก้าวหน้า (หรือ PWAs) ใช้ประโยชน์จาก API ของเว็บเบราว์เซอร์ เพื่อสร้างประสบการณ์การใช้งานแอปที่ถูกต้องในเบราว์เซอร์บนอุปกรณ์ใดก็ได้.

    ท้ายที่สุด Progressive Web Apps ได้รวมตัว เทคโนโลยีจำนวนหนึ่ง นักพัฒนาที่สามารถใช้เพื่อสร้างแอปพลิเคชันแบบเนทีฟที่ทรงพลัง หลายคนมาจาก เว็บ API เช่น API ผู้ปฏิบัติงานบริการ หรือ พุช API.

    มี ความต้องการค่อนข้างน้อย เพื่อเรียกสิ่ง PWA แต่สิ่งเหล่านี้คือ สิ่งที่สำคัญที่สุด:

    • อย่างเต็มที่ ตอบสนองมือถือ.
    • ปฏิบัติตาม การเพิ่มความก้าวหน้า.
    • สามารถ ติดตั้งในเครื่อง บนสมาร์ทโฟนและแท็บเล็ต.
    • ทำงานแบบออฟไลน์ ไม่มีอินเทอร์เน็ตโดยใช้พนักงานบริการ.
    • แยกเนื้อหาจากฟังก์ชั่น ใช้เปลือกแอพ.
    • สร้าง HTTPS เพื่อความปลอดภัยที่มากขึ้น.
    • ค้นพบ ในการค้นหาของ Google.
    • มี หน้าเหมือนแอปแบบไดนามิก แต่ยังคง มี URL ของตัวเอง.

    ถ้าคุณคือ คิดถึงการสร้างเว็บแอปเล็ก ๆ คุณอาจลองสร้าง Progressive Web App แทน สิ่งนี้มาพร้อมกับช่วงของการเรียนรู้เล็กน้อย แต่คุณมีมาก ควบคุมประสบการณ์ของผู้ใช้ได้มากขึ้น ผลที่ตามมา.

    มาดำดิ่งลงสู่พื้นฐานของ Progressive Web Apps และเรียนรู้สิ่งที่ทำให้พวกเขาติ๊ก.

    พนักงานบริการ

    ทุกแอพพลิเคชั่นเว็บโปรเกรสซีฟ ต้องการพนักงานบริการ. เหล่านี้คือ เหมือนเจ้าหน้าที่จราจร ผู้ประสานงานว่าการรับส่งข้อมูลเกิดขึ้นที่ใดข้อมูลมาจากไหนและเป็นอย่างไร ทั้งหมดได้รับการจัดระเบียบและแคช.

    ในแง่ง่ายพนักงานบริการ ดำเนินการเป็นไฟล์ JavaScript และทำงานในพื้นหลังของแอปเว็บของคุณ เมื่อใดก็ตามที่ผู้ใช้ ดำเนินการกิจกรรม, มันเรียกว่า สคริปต์ผู้ปฏิบัติงานบริการ เพื่อดึงข้อมูลบันทึกข้อมูลหรือทั้งสองอย่าง!

    ใช้ API ผู้ปฏิบัติงานบริการ คือ สำคัญ เพื่อเรียกใช้ PWA ที่สนับสนุนแบบออฟไลน์ นี่คือวิธีที่คุณ ส่งข้อมูลระหว่างมุมมอง และวิธีการที่คุณสามารถ ขอข้อมูลจากฐานข้อมูลท้องถิ่น. แต่นี่เป็นสิ่งขั้นสูงส่วนใหญ่ที่คุณเรียนรู้ด้วยการทำงานในโครงการ PWA.

    ลองดูที่ บริการคนงานตำรา สำหรับ ตัวอย่างพื้นฐาน และ การสาธิตสด. นี่เป็นวิธีที่ยอดเยี่ยมในการเรียนรู้โดยการศึกษาสิ่งที่ผู้อื่นทำและ ทำการโคลนในแอพของคุณเอง.

    หากคุณหวังที่จะสร้าง Progressive Web App เริ่มต้นด้วย Service Worker API. เพียงคนจรจัดกับมันและตั้งค่าการสาธิตง่ายๆในประเทศ สิ่งนี้จะกำหนดรากฐานสำหรับภายหลัง การสร้างคุณสมบัติและหน้าแอปพลิเคชันที่กำหนดเอง ที่ทำงานทั้งหมดผ่านพนักงานบริการ.

    สำหรับ คู่มือเริ่มต้น และ ตัวอย่างโค้ดแบบละเอียด, ฉันแนะนำทรัพยากรเหล่านี้โดยเฉพาะ:

    • เริ่มต้นกับพนักงานบริการ
    • เริ่มต้นใช้งานกับ Service Workers
    • ตัวอย่างผู้ให้บริการ: ตัวอย่างหน้าออฟไลน์ที่กำหนดเอง

    แอปเปลือก

    แอพที่ใช้กันมากที่สุด ติดตามสถาปัตยกรรมเชลล์ของแอป ข้อมูลและรหัสแอปอยู่ที่ไหน แยกจาก UI อย่างสมบูรณ์. แอปพลิเคชันเชลล์สามารถ แคชในเครื่อง ดังนั้นแต่ละหน้าโหลดเร็วอย่างไม่น่าเชื่อ.

    สิ่งนี้คงเหมือนเดิม “แอพเนทีฟ” ความรู้สึกที่ อินเตอร์เฟสยังคงปรากฏให้เห็นอยู่เสมอ แต่ เนื้อหา / ฟังก์ชั่นโหลดแตกต่างกัน แต่ละครั้ง. ลองดูหน้านี้ในเว็บไซต์ Google Developers เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับ แอปโมเดลเชลล์.

    แอพส่วนใหญ่มี เปลือกแอพที่ง่ายมาก และคุณควรออกแบบสถาปัตยกรรมของคุณด้วย ความเรียบง่ายในใจ.

    โดยทั่วไปแล้วแอปเชลล์มีสิ่งเหล่านี้ องค์ประกอบหลัก:

    • ลิงค์แถบนำทางด้านบน.
    • ปุ่มรีเฟรช (ไม่จำเป็น).
    • คอนเทนเนอร์พื้นหลังของหน้า.

    คุณสามารถค้นหากรณีศึกษาที่ดีเกี่ยวกับที่นี่ สถาปัตยกรรมเชลล์ I / O Progressive Web App ของ Google. พวกเขายังมีเคล็ดลับในการสร้างสถาปัตยกรรมเชลล์ของคุณเองแคชและ ดึงมันโดยอัตโนมัติสำหรับทุกหน้า.

    คิดว่าสถาปัตยกรรมของเชลล์เป็น องค์ประกอบ UI แบบคงที่ทั้งหมด คุณจะใช้ในทุก ๆ หน้า สิ่งเหล่านี้ควรจะเป็น แยกออกจากส่วนที่เหลือของรหัสของคุณ และแคชเพื่อนำมาใช้ใหม่ได้ง่าย ยังตรวจสอบ คำนำของ Google กับเรื่องที่มีรหัสมากมาย ตัวอย่างเพื่อช่วยคุณเริ่มต้น.

    การสนับสนุนออนไลน์และออฟไลน์

    แอพที่ใช้กันมากที่สุด ทำงานได้ดีโดยไม่ใช้อินเทอร์เน็ต. แอปพลิเคชั่นบนเว็บแบบก้าวหน้ามีความตั้งใจที่จะติดตามพฤติกรรมแบบเดียวกัน.

    ผ่านพนักงานบริการคุณสามารถ สร้างแคชท้องถิ่น ด้วยรหัส JSON สำหรับแต่ละหน้า วิธีนี้ผู้ใช้สามารถ เรียกดูแอปพลิเคชันเว็บของคุณในเครื่อง. คุณอาจจะ รวมไฟล์รายการ เพื่อกำหนดไอคอนหน้าจอเริ่มต้นและการตั้งค่าการเปิดตัวอื่น ๆ.

    หากคุณใช้ Service Worker API ลองดูที่ Cache API ซึ่งเป็น ส่วนหนึ่งของกรอบงานเดียวกัน. เป็นวิธีที่ดีที่สุด เก็บข้อมูลในเครื่อง และ เข้าถึงได้จากพนักงานบริการ ต่อมา.

    นอกจากนี้คุณยังสามารถ ทดสอบแอปเว็บใด ๆ การใช้ ประภาคาร, เครื่องมือฟรีสำหรับตรวจสอบการปฏิบัติตามคุณสมบัติและสนับสนุนเทคโนโลยี PWA.

    PWAs เสมอ ต้องการการสนับสนุนออฟไลน์ ผ่าน Service Worker API เพื่อให้สามารถ ทำงานในสถานะการเชื่อมต่อต่ำ. ประภาคารเป็นวิธีที่ดีที่สุดในการทดสอบการรองรับออฟไลน์พร้อมกับคุณสมบัติอื่น ๆ.

    ตัวอย่างสด

    ศึกษา PWAs สดและดูว่าพวกเขาทำงานอย่างไรเป็นวิธีที่ดีในการเรียนรู้ อย่างไรก็ตามตลาด Progressive Web App นั้นเป็น ยังคงเกิดขึ้น, มีสิ่งที่ดีที่สุดมากมาย กระจายอยู่ในมุมต่าง ๆ ของอินเทอร์เน็ต.

    แต่ต้องขอบคุณ แกลลอรี่ PWA หิน, ฉันได้รวบรวมตัวอย่างที่น่าทึ่งเพื่อแสดงให้เห็นว่า PWAs สามารถทำอะไรได้บ้าง.

    1. การแปลงสกุลเงิน

    เรื่องนี้ค่อนข้างง่าย แปลงสกุลเงิน ใช้อัตราแลกเปลี่ยนและคำนวณกระแส ความแตกต่างระหว่างสกุลเงินมากมายทั่วโลก.

    คุณจะสังเกตเห็นว่าแอปนี้เป็นเว็บ ตอบสนองอย่างเต็มที่, รองรับการสัมผัส, และ อัปเดตอัตโนมัติ โดยไม่ต้องรีเฟรชหน้าใด ๆ.

    นี่เป็นคุณสมบัติบางอย่างที่คุณคาดหวัง Progressive Web App ทั่วไป. นี้ แอปยังสามารถบันทึกในเครื่องได้ ไปยังโทรศัพท์ของคุณเพื่อทำงานออฟไลน์แม้ว่าจะเชื่อมต่อกับไฟล์ JSON เพื่อตรวจสอบอัตราแลกเปลี่ยนปัจจุบัน.

    2. สำเนียงภาษาอังกฤษ

    ฉันชื่นชอบแอพพลิเคชั่นเว็บนี้เพราะมันมีทั้งเอกลักษณ์และการออกแบบที่ยอดเยี่ยม แผนที่สำเนียงภาษาอังกฤษ ดามัสก์วิดีโอออนไลน์ ที่ผู้คนพกพาสำเนียงจากภูมิภาคเฉพาะของสหรัฐอเมริกาและสหราชอาณาจักร.

    โดยคลิกที่ใดก็ได้บนแผนที่คุณสามารถฟังว่าผู้คนออกเสียงคำบางคำในส่วนต่างๆของโลกได้อย่างไร แอพนี้เร็วและน่าตื่นเต้น เปิดแหล่งที่มาบน GitHub สำหรับทุกคนที่จะตรวจสอบ.

    internals ทำงานใน ตอบสนอง / Redux กับ Firebase และ การเชื่อมต่อ API กับ Google Maps. ตัวอย่างที่ยอดเยี่ยมของสิ่งที่ค่อนข้างง่ายสำหรับผู้เริ่มต้นในการศึกษาและเรียนรู้.

    3. Pokedex.org

    PWA ที่ค่อนข้างง่ายอีกอย่างหนึ่งคือ แอพ Pokedex สร้างโดย Nolan Lawson เขายังเผยแพร่รหัสนี้อย่างอิสระ บน GitHub, ดังนั้นเราจึงเป็นอีกโครงการหนึ่งที่ มูลค่าการสอดแนมไปรอบ ๆ และศึกษา.

    เนื่องจากข้อมูลนี้สามารถคงอยู่ได้ จัดการผ่านเครื่องยนต์ท้องถิ่น เรียกว่า PouchDB. ข้อมูลทั้งหมดมาจาก PokeAPI จากนั้นบันทึกเป็น JavaScript ธรรมดา ซึ่งหมายความว่าคุณสามารถ บันทึกไว้ในโทรศัพท์ของคุณ เหมือนแอปเนทีฟที่แท้จริงและมันจะทำงานโดยมีหรือไม่มีอินเทอร์เน็ต ค่อนข้างเท่ห์?

    สิ่งทั้งหมดคือ ขับเคลื่อนโดย JavaScript, ดังนั้นจึงเป็นเครื่องพิสูจน์ได้ว่าคุณสามารถใช้โค้ดส่วนหน้าได้มากแค่ไหน มันใช้ แคชจำนวนมาก ด้วย Service Worker API ดังนั้น มันเร็วและใช้งานง่ายสุด ๆ.

    4. Flipkart

    สุดท้ายและน่าประหลาดใจที่สุดเรามาดูกัน เว็บไซต์ Flipkart. แบบเต็มนี้ ในความเป็นจริงแล้วร้านค้าอีคอมเมิร์ซคือ Progressive Web App.

    มัน ตอบสนองอย่างเต็มที่ และ โหลดหน้าแบบไดนามิก. URL ของหน้าจะถูกผนวกเข้ากับเบราว์เซอร์ดังนั้นคุณสามารถคัดลอก / วางและแบ่งปันได้เหมือนเว็บไซต์ทั่วไป.

    อันนี้ง่าย PWA ที่ซับซ้อนที่สุดที่ฉันเคยเห็น. ฉันประหลาดใจที่ผู้พัฒนาสามารถสร้างประสบการณ์ที่ไร้รอยต่อบนเว็บสำหรับผู้ใช้ทุกคนได้อย่างอิสระ สนับสนุนที่เก็บข้อมูลออฟไลน์ในเครื่อง, เกินไป.

    และในขณะที่ฉันไม่พบ repo สำหรับซอร์สโค้ด Flipkart ทั้งหมด แต่ก็มี หน้า Flipkart บน GitHub กับ ตัวอย่างโค้ดขนาดเล็ก จากทีมนักพัฒนาซอฟต์แวร์ของพวกเขา.

    เรียนรู้เพิ่มเติม

    แอพก้าวหน้าทางเว็บคือ ยอดนิยมอย่างไม่น่าเชื่อและจะได้รับไอน้ำอย่างแน่นอน เมื่อนักพัฒนาซอฟต์แวร์เปลี่ยนจากแอพเนทีฟ / ไฮบริดมากขึ้น.

    มีการประชุมสุดยอดประจำปีเรียกว่า การประชุมสุดยอด Web App ขั้นสูง และพวกเขาเผยแพร่วิดีโอบน YouTube ที่คุณสามารถรับชมได้ฟรี นี่เป็นวิธีที่ดีในการ รับความรู้ระดับมืออาชีพโดยไม่ต้องจ่ายค่าตั๋ว.

    แต่ถ้าคุณกำลังมองหารายละเอียดเพิ่มเติม คู่มือการเข้ารหัส PWA ตรวจสอบบทเรียนเหล่านี้อย่างแน่นอน:

    • คู่มือสำหรับผู้เริ่มต้นสู่แอปเว็บขั้นสูง
    • สร้างแอปเว็บโปรเกรสซีฟแรกของคุณด้วย React
    • สร้างแอพพลิเคชั่นเว็บแบบก้าวหน้าด้วยโพลีเมอร์