เริ่มต้นใช้งาน Progressive Web App

Addy Osmani

ช่วงนี้มีการพูดถึง Progressive Web App กันอย่างกว้างขวาง แม้ว่าจะเป็นโมเดลที่ค่อนข้างใหม่ แต่หลักการของโมเดลนี้ก็สามารถปรับปรุงแอปที่สร้างด้วย Vanilla JS, React, Polymer, Angular หรือเฟรมเวิร์กอื่นๆ ได้เช่นกัน ในโพสต์นี้ เราจะสรุปตัวเลือกและแอปอ้างอิงบางส่วนเพื่อเริ่มต้นใช้งาน Progressive Web App ของคุณเองในวันนี้

Progressive Web App คืออะไร

สิ่งสำคัญที่ควรทราบคือ Progressive Web App ทำงานได้ทุกที่ แต่จะทำงานได้ดีที่สุดในเบราว์เซอร์ที่ทันสมัย การเพิ่มประสิทธิภาพแบบต่อเนื่องเป็นหัวใจสำคัญของโมเดล

Aaron Gustafson เปรียบเทียบการเพิ่มประสิทธิภาพแบบต่อเนื่องกับถั่ว M&M ถั่วลิสงคือเนื้อหา การเคลือบช็อกโกแลตคือเลเยอร์การนำเสนอ และ JavaScript คือเปลือกลูกกวาดแข็งๆ เลเยอร์นี้อาจมีสีแตกต่างกันไป และประสบการณ์การใช้งานอาจแตกต่างกันไปตามความสามารถของเบราว์เซอร์ที่ใช้

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

เมื่อผู้ใช้สร้างความสัมพันธ์กับแอปเหล่านี้ผ่านการใช้งานซ้ำๆ แอปจะทำให้เปลือกนอกน่าสนใจยิ่งขึ้น โดยโหลดอย่างรวดเร็วแม้จะเชื่อมต่อเครือข่ายที่ช้า (ด้วยโปรแกรมทำงานของบริการ) ส่งข้อความ Push ที่เกี่ยวข้อง และมีไอคอนชั้นหนึ่งบนหน้าจอหลักของผู้ใช้ที่สามารถโหลดแอปเป็นประสบการณ์การใช้งานแอปแบบเต็มหน้าจอได้ นอกจากนี้ยังใช้ประโยชน์จากแบนเนอร์เพื่อการติดตั้งเว็บแอปอัจฉริยะได้ด้วย

แบนเนอร์การติดตั้งเว็บแอปเพื่อการมีส่วนร่วม เปิดจากหน้าจอหลักของผู้ใช้ หน้าจอเริ่มต้น (Splash Screen) ใน Chrome สำหรับ Android ทำงานแบบออฟไลน์ด้วย Service Worker

Progressive Web App คือ

  • โพรเกรสซีฟ - ทำงานได้สำหรับผู้ใช้ทุกคน ไม่ว่าจะใช้เบราว์เซอร์ใดก็ตาม เนื่องจากสร้างขึ้นโดยใช้การเพิ่มประสิทธิภาพแบบต่อเนื่องเป็นหลัก
  • ปรับเปลี่ยนตามอุปกรณ์ - เหมาะกับอุปกรณ์ทุกรูปแบบ ไม่ว่าจะเป็นเดสก์ท็อป มือถือ แท็บเล็ต หรืออุปกรณ์อื่นๆ ที่จะเกิดขึ้นในอนาคต
  • ไม่ขึ้นอยู่กับการเชื่อมต่อ - ปรับปรุงด้วย Service Worker เพื่อให้ทำงานแบบออฟไลน์หรือในเครือข่ายคุณภาพต่ำได้
  • เหมือนแอป - ใช้โมเดล App Shell เพื่อให้การนำทางและการโต้ตอบในรูปแบบแอป
  • ใหม่ - อัปเดตอยู่เสมอด้วยกระบวนการอัปเดต Service Worker
  • ปลอดภัย - แสดงผ่าน TLS เพื่อป้องกันการสอดแนมและตรวจสอบว่าเนื้อหาไม่ได้ถูกดัดแปลง
  • ค้นพบได้ - ระบุได้ว่าเป็น "แอปพลิเคชัน" เนื่องจากไฟล์ Manifest ของ W3C และขอบเขตการลงทะเบียน Service Worker ช่วยให้เครื่องมือค้นหาพบแอปพลิเคชันได้
  • กลับมามีส่วนร่วมได้ - ช่วยให้ผู้ใช้กลับมามีส่วนร่วมได้ง่ายๆ ผ่านฟีเจอร์ต่างๆ เช่น ข้อความ Push
  • ติดตั้งได้ - อนุญาตให้ผู้ใช้ "เก็บ" แอปที่เห็นว่ามีประโยชน์ที่สุดไว้ในหน้าจอหลักโดยไม่ต้องยุ่งยากกับ App Store
  • Linkable - แชร์ได้ง่ายผ่าน URL และไม่จำเป็นต้องติดตั้งที่ซับซ้อน

นอกจากนี้ Progressive Web App ยังไม่ได้มีเฉพาะใน Chrome สำหรับ Android เท่านั้น ด้านล่างนี้เราจะเห็น Progressive Web App ของ Pokedex ที่ทำงานใน Firefox สำหรับ Android (เบต้า) โดยมีฟีเจอร์การเพิ่มลงในหน้าจอหลักและการแคช Service Worker ในช่วงแรกๆ ที่ทำงานได้ดี

Progressive Web App ที่ทำงานใน Firefox สำหรับ Android

ข้อดีอย่างหนึ่งของลักษณะ "แบบก้าวหน้า" ของโมเดลนี้คือสามารถปลดล็อกฟีเจอร์ต่างๆ ได้อย่างค่อยเป็นค่อยไปเมื่อผู้ให้บริการเบราว์เซอร์ให้การสนับสนุนที่ดีขึ้น แน่นอนว่า Progressive Web App เช่น Pokedex ก็ทำงานได้ดีใน Opera บน Android เช่นกัน โดยมีข้อแตกต่างที่น่าสังเกตเล็กน้อยในการใช้งาน ดังนี้

Progressive Web App ที่ทำงานใน Opera สำหรับ Android

หากต้องการเจาะลึกเกี่ยวกับ Progressive Web App โปรดอ่านบล็อกโพสต์ต้นฉบับของ Alex Russell ที่แนะนำแอปเหล่านี้ Paul Kinlan ยังได้เริ่มใช้แท็ก Stack Overflow ที่มีประโยชน์มากสำหรับ Progressive Web App ซึ่งควรค่าแก่การลองดู

AI

ไฟล์ Manifest ของเว็บแอป

ไฟล์ Manifest ช่วยให้เว็บแอปของคุณแสดงในหน้าจอหลักของผู้ใช้ได้เหมือนกับแอปที่มาพร้อมเครื่องมากขึ้น ซึ่งช่วยให้เปิดแอปในโหมดเต็มหน้าจอได้ (โดยไม่มีแถบ URL) ให้คุณควบคุมการวางแนวหน้าจอได้ และใน Chrome เวอร์ชันล่าสุดบน Android จะรองรับการกำหนดหน้าจอเริ่มต้น (Splash Screen) และสีธีมสำหรับแถบที่อยู่ นอกจากนี้ยังใช้เพื่อกำหนดชุดไอคอนตามขนาดและความหนาแน่นที่ใช้สำหรับหน้าจอเริ่มต้น (Splash Screen) และไอคอนหน้าจอหลักที่กล่าวถึงข้างต้นด้วย

เพิ่มลงในหน้าจอหลัก เปิดจากหน้าจอหลัก และประสบการณ์การใช้งานที่คล้ายกับแอปแบบเต็มหน้าจอ

คุณดูตัวอย่างไฟล์ Manifest ได้ใน Web Starter Kit และในตัวอย่างของ Google Chrome Bruce Lawson ได้เขียนเครื่องมือสร้างไฟล์ Manifest และ Mounir Lamouri ก็ได้เขียนเครื่องมือตรวจสอบไฟล์ Manifest ของเว็บที่ใช้งานง่ายและน่าลองใช้

ในโปรเจ็กต์ส่วนตัว ฉันใช้ realfavicongenerator เพื่อสร้างไอคอนที่มีขนาดถูกต้องสำหรับทั้งไฟล์ Manifest ของเว็บแอปและสำหรับใช้ใน iOS, เดสก์ท็อป และอื่นๆ โมดูลโหนด favicons ยังสามารถสร้างเอาต์พุตที่คล้ายกันซึ่งเป็นส่วนหนึ่งของกระบวนการบิลด์ได้ด้วย

เบราว์เซอร์ที่ใช้ Chromium (Chrome, Opera ฯลฯ) รองรับไฟล์ Manifest ของเว็บแอปในปัจจุบัน โดย Firefox กำลังพัฒนาการรองรับอย่างต่อเนื่อง และ Edge ระบุว่าอยู่ระหว่างการพิจารณา WebKit/Safari ยังไม่ได้โพสต์สัญญาณสาธารณะเกี่ยวกับความตั้งใจที่จะใช้ฟีเจอร์นี้

ดูรายละเอียดเพิ่มเติมได้ที่เว็บแอปที่ติดตั้งได้ซึ่งมีไฟล์ Manifest ของเว็บแอปใน Chrome สำหรับ Android ในหลักพื้นฐานในการทำเว็บไซต์

แบนเนอร์ "เพิ่มลงในหน้าจอหลัก"

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

แอปพลิเคชันสาธิตบันทึกเสียงที่แสดงข้อความแจ้งแบนเนอร์เพื่อการติดตั้งเว็บแอปใน Chrome สำหรับ Android

แอปของคุณต้องมีคุณสมบัติต่อไปนี้เพื่อให้ข้อความแจ้งให้ติดตั้งแอปแสดงขึ้น

  • มีไฟล์ Manifest ของเว็บแอปที่ถูกต้อง
  • แสดงผ่าน HTTPS (ดูใบรับรองฟรีได้ที่ letsencrypt)
  • มี Service Worker ที่ถูกต้องซึ่งลงทะเบียนไว้
  • มีการเข้าชม 2 ครั้ง โดยเว้นระยะห่างระหว่างการเข้าชมอย่างน้อย 5 นาที

เรามีตัวอย่างแบนเนอร์เพื่อการติดตั้งแอปมากมาย ซึ่งครอบคลุมตั้งแต่แบนเนอร์พื้นฐานไปจนถึงกรณีการใช้งานที่ซับซ้อนมากขึ้น เช่น การแสดงแอปพลิเคชันที่เกี่ยวข้อง

Service Worker สำหรับการแคชแบบออฟไลน์

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

โดยจะเริ่มทำงานเมื่อได้รับเหตุการณ์และทำงานเท่าที่จำเป็นต่อการประมวลผลเท่านั้น Service Worker ช่วยให้คุณใช้ Cache API เพื่อแคชทรัพยากรและใช้เพื่อมอบประสบการณ์การใช้งานแบบออฟไลน์แก่ผู้ใช้ได้

Service Worker มีประสิทธิภาพในการแคชแบบออฟไลน์ แต่ก็ยังช่วยเพิ่มประสิทธิภาพได้อย่างมากในรูปแบบของการโหลดทันทีสำหรับการเข้าชมเว็บไซต์หรือเว็บแอปซ้ำ คุณสามารถแคช Application Shell เพื่อให้ทำงานแบบออฟไลน์และป้อนข้อมูลเนื้อหาโดยใช้ JavaScript ได้

การแคช Application Shell ของ Service Worker ซึ่งช่วยให้โหลดได้โดยไม่ต้องใช้เครือข่าย

ตัวอย่าง Service Worker ที่ครอบคลุมมีอยู่ในตัวอย่าง Google Chrome ตำราอาหารแบบออฟไลน์ของ Jake Archibald เป็นสิ่งที่ต้องอ่าน และเราขอแนะนำให้ลองทำตามคำแนะนำแบบทีละขั้นตอนในเว็บแอปแบบออฟไลน์แอปแรกของคุณของ Paul Kinlan หากเพิ่งเริ่มใช้ Service Worker

นอกจากนี้ ทีมของเรายังดูแลรักษาเครื่องมือช่วยและเครื่องมือสร้าง Service Worker จำนวนหนึ่งที่เราพบว่ามีประโยชน์ในการลดค่าใช้จ่ายในการตั้งค่า Service Worker โดยจะแสดงอยู่ในไลบรารี Service Worker โดยมี 2 ประเภทหลักๆ ดังนี้

  • sw-precache: เครื่องมือเวลาบิลด์ที่สร้างสคริปต์ Service Worker ซึ่งมีประโยชน์สำหรับการแคช App Shell ของเว็บแอปไว้ล่วงหน้า
  • sw-toolbox: ไลบรารีที่ให้บริการแคชรันไทม์สำหรับทรัพยากรที่ใช้ไม่บ่อยนัก

Jeff Posnick ได้เขียนคู่มือเบื้องต้นเกี่ยวกับ sw-precache ที่ชื่อว่า Offline-first, fast, with the sw-precache module และ codelab เกี่ยวกับเครื่องมือเดียวกันนี้ซึ่งคุณอาจพบว่ามีประโยชน์

Chrome, Opera และ Firefox ต่างก็รองรับ Service Worker โดย Edge มีสัญญาณเชิงบวกจากสาธารณะเกี่ยวกับความสนใจในฟีเจอร์นี้ Safari ได้กล่าวถึงความสนใจในเรื่องนี้สั้นๆ ผ่านแผน 5 ปีที่วิศวกรคนหนึ่งเสนอ

ข้อความ Push เพื่อการกลับมามีส่วนร่วม

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

Push API ใช้งานใน Chrome, อยู่ระหว่างการพัฒนาใน Firefox และอยู่ระหว่างการพิจารณาใน Edge ยังไม่มีสัญญาณสาธารณะจาก Safari เกี่ยวกับความตั้งใจที่จะใช้ฟีเจอร์นี้

ข้อความ Push บนเว็บแบบเปิดเป็นข้อมูลเบื้องต้นที่ครอบคลุมเกี่ยวกับการตั้งค่าข้อความ Push โดย Matt Gaunt และยังมีCodelab ข้อความ Push ในหลักพื้นฐานในการทำเว็บไซต์ด้วย

ข้อความ Push จากเว็บในเว็บไซต์ Facebook เวอร์ชันอุปกรณ์เคลื่อนที่

Michael van Ouwerkerk จากทีม Chrome มีวิดีโอแนะนำความยาว 6 นาทีเกี่ยวกับ Push ด้วย หากคุณชอบดูวิดีโอมากกว่า

การเพิ่มฟีเจอร์ขั้นสูง

โปรดทราบว่าประสบการณ์ของผู้ใช้อาจมีระดับความราบรื่นแตกต่างกันไปตามเบราว์เซอร์ที่ใช้ดูเว็บแอปของคุณ คุณเป็นผู้ควบคุมเปลือกนอกที่แข็งแกร่ง

ฟีเจอร์เพิ่มเติมที่กำลังจะเปิดตัวในแพลตฟอร์มเว็บ เช่น การซิงค์ในเบื้องหลัง (สำหรับการซิงค์ข้อมูลกับเซิร์ฟเวอร์แม้ว่าเว็บแอปจะปิดอยู่) และ Web Bluetooth (สำหรับการสื่อสารกับอุปกรณ์บลูทูธจากเว็บแอป) ก็สามารถนำมาใช้ร่วมกับ Progressive Web App ในลักษณะนี้ได้เช่นกัน

การซิงค์แบบเบื้องหลังครั้งเดียวได้รับการเปิดใช้ใน Chrome และ Jake Archibald มีวิดีโอเกี่ยวกับแอป Wikipedia แบบออฟไลน์และบทความที่สาธิตการทำงานของแอปดังกล่าว François Beaufort ยังมีตัวอย่าง Web Bluetooth จำนวนมากให้ลองใช้ API ดังกล่าวด้วย

เหมาะกับเฟรมเวิร์ก

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

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

สถาปัตยกรรม

การใช้โมเดล Progressive Web App มีหลายระดับ แต่แนวทางที่ใช้กันโดยทั่วไปคือการออกแบบสถาปัตยกรรมโดยใช้ Application Shell แม้ว่านี่จะไม่ใช่ข้อกำหนดที่เข้มงวด แต่ก็มีประโยชน์หลายประการ

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

ภาพ Application Shell ที่แสดงให้เห็นการแยกย่อย UI ของแอป เช่น แถบลิ้นชักและพื้นที่เนื้อหาหลัก

Jeremy Keith เพิ่งแสดงความคิดเห็นว่าในโมเดลประเภทนี้ การแสดงผลฝั่งเซิร์ฟเวอร์ไม่ควรถือเป็นทางเลือกสำรอง แต่ควรพิจารณาการแสดงผลฝั่งไคลเอ็นต์เป็นการปรับปรุง ความคิดเห็นนี้เป็นความคิดเห็นที่สมเหตุสมผล

ในโมเดล Application Shell ควรใช้การแสดงผลฝั่งเซิร์ฟเวอร์ให้มากที่สุดเท่าที่จะเป็นไปได้ และควรใช้การแสดงผลแบบ Progressive ฝั่งไคลเอ็นต์เป็นการเพิ่มประสิทธิภาพในลักษณะเดียวกับที่เรา "เพิ่มประสิทธิภาพ" ประสบการณ์เมื่อรองรับ Service Worker ซึ่งมีหลายวิธีในการดำเนินการนี้

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

เทมเพลตสำเร็จรูปสำหรับการเริ่มต้นใช้งาน

Application Shell

ดูใน GitHub

ที่เก็บ app-shell มีการใช้งานสถาปัตยกรรม Application Shell ที่เกือบสมบูรณ์ โดยมีแบ็กเอนด์ที่เขียนด้วย Express.js และฟรอนท์เอนด์ที่เขียนด้วย ES2015

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

ชุดเริ่มต้นใช้งาน Polymer

ดูใน GitHub

จุดเริ่มต้นอย่างเป็นทางการสำหรับเว็บแอป Polymer รองรับฟีเจอร์ Progressive Web App ต่อไปนี้

  • ไฟล์ Manifest ของเว็บแอปพลิเคชัน
  • หน้าจอแนะนำของ Chrome สำหรับ Android
  • การแคชแบบออฟไลน์ของ Service Worker ด้วยองค์ประกอบ Platinum SW
  • ข้อความ Push (ต้องตั้งค่าด้วยตนเอง) พร้อมองค์ประกอบ Platinum Push
ชุดเริ่มต้นใช้งาน Polymer แสดงฟีเจอร์ Progressive Web App ที่มีมาให้ในตัว

PSK เวอร์ชันปัจจุบันยังไม่รองรับรูปแบบประสิทธิภาพขั้นสูงบางอย่าง (เช่น โมเดล Application Shell, การโหลดแบบไม่พร้อมกัน) ที่คุณพบใน Progressive Polymer เว็บแอป บางรายการ

เราตั้งเป้าที่จะลองนำรูปแบบเหล่านี้ไปใช้ใน PSK ในปี 2016 แต่คุณสามารถดูการทดสอบช่วงแรกๆ เกี่ยวกับเรื่องนี้ได้ในแอป Polymer Zuperkulblog โดย Rob Dodson และการบรรยายที่ยอดเยี่ยมเรื่อง Polymer Perf Patterns โดย Eric Bidelman

Web Starter Kit

ดูใน GitHub

จุดเริ่มต้นที่เราแนะนำสำหรับโปรเจ็กต์ Vanilla ใหม่ประกอบด้วยฟีเจอร์ Progressive Web App ต่อไปนี้

  • ไฟล์ Manifest ของเว็บแอปพลิเคชัน
  • หน้าจอแนะนำของ Chrome สำหรับ Android
  • การแคชล่วงหน้าของ Service Worker ด้วย sw-precache

หากคุณต้องการทำงานกับ Vanilla JS/ES2015 และใช้ Polymer ไม่ได้ Web Starter Kit อาจเป็นประโยชน์ในฐานะจุดอ้างอิงที่คุณสามารถนำมาใช้ซ้ำหรือคัดลอกข้อมูลโค้ดได้

Progressive Web App ที่มีและไม่มีเฟรมเวิร์ก

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

Progressive Web App ที่ใช้ React, Polymer, Virtual DOM และ AngularJS

Vanilla JavaScript

Polymer

โต้ตอบ

  • iFixit โดย Jeff Posnick - ใช้ sw-precache สำหรับการแคช Application Shell (สไลด์)

Virtual-DOM

  • Pokedex โดย Nolan Lawson - Progressive Web App ที่ยอดเยี่ยมซึ่งใช้แนวทาง "ทำทุกอย่างใน Web Worker" เพื่อช่วยในการแสดงผลแบบ Progressive (write-up)

Angular.js

  • Timey.in โดย Kenneth Auchenberg - ใช้ sw-precache สำหรับการแคชทรัพยากรล่วงหน้าด้วย

โน้ตการปิด

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

ขณะนี้ Paul Kinlan กำลังวางแผนคำแนะนำเกี่ยวกับหลักพื้นฐานในการทำเว็บไซต์สำหรับ Progressive Web App และหากคุณมีข้อมูลเกี่ยวกับส่วนที่ต้องการให้ครอบคลุม โปรดแสดงความคิดเห็นในชุดข้อความ

อ่านเพิ่มเติม