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

Addy Osmani

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

Progressive Web App คืออะไร

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

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

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

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

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

Progressive Web App คือ

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

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

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

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

หลักการต่างๆ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Jeff Posnick เขียนเกริ่นนำสั้นๆ เกี่ยวกับ sw-precache ชื่อ Offline-first, Fast ด้วยโมดูล sw-precache และ Codelab ในเครื่องมือเดียวกับที่อาจเป็นประโยชน์กับคุณ

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

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

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

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

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

ข้อความ Push ในเว็บแบบเปิดเป็นบทนำที่ครอบคลุมเกี่ยวกับการตั้งค่าพุชโดย Matt Gaunt และ Push Notifications Codelab พร้อมให้บริการใน Web Fundamentals ด้วย

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

การใช้ฟีเจอร์ขั้นสูงร่วมกัน

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

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

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

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

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

เราหวังว่าในปี 2016 นี้ เราจะเห็นเทมเพลตและโปรเจ็กต์เริ่มต้นจำนวนมากขึ้นที่รองรับ Progressive Web Apps เป็นฟีเจอร์หลัก ในระหว่างนี้ การเพิ่มฟีเจอร์เหล่านี้ลงในแอปของคุณเองนั้นไม่ยากมากนักและคุ้มค่ากับการลงทุน

สถาปัตยกรรม

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

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

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

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

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

เริ่มต้นใช้งานต้นแบบ

Application Shell

ดูใน GitHub

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

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

ชุดเริ่มต้นใช้งานโพลิเมอร์

ดูใน GitHub

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

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

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

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

ชุดเริ่มต้นใช้งานเว็บ

ดูใน GitHub

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

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

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

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

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

Vanilla JavaScript

• Voice Memos โดย Paul Lewis สร้างขึ้นโดยใช้สถาปัตยกรรมที่คล้ายกับ app-shell (การเขียน)
• ออฟไลน์ Wikipedia โดย Jake Archibald (วิดีโอ)
• Air Horner โดย Paul Kinlan
• Guitar Tuner โดย Paul Lewis (บทสรุป)

Polymer

• Zuperkulblog โดย Rob Dodson (slides)

โต้ตอบ

• iFixit โดย Jeff Posnick - ใช้ sw-precache สำหรับการแคชเชลล์แอปพลิเคชัน (สไลด์)

Virtual-DOM

• Pokedex โดย Nolan Lawson - Progressive Web App ที่ยอดเยี่ยมซึ่งใช้แนวทาง "ทำทุกอย่างใน Web Worker" เพื่อช่วยในการเรนเดอร์แบบเป็นขั้นเป็นตอน (การเขียน)

Angular.js

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

หมายเหตุปิดท้าย

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

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

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

• Progressive Web App: การข้ามแท็บไปโดยไม่สูญเสียจิตวิญญาณของเรา
• เหตุใด Progressive Web App จึงเป็นอนาคตของการพัฒนาเว็บ
• Progressive Web App: พร้อมใช้งานสำหรับผู้ใช้ทั่วไป
• การสร้างแอปแบบ Progressive ด้วย ServiceWorker
• Progressive Web App คืออนาคต
• Progressive Web App: ประสบการณ์การใช้งานบนอุปกรณ์เคลื่อนที่แบบใหม่
• ขอแนะนำ Pokedex.org: เว็บแอปแบบโพรเกรสซีฟสำหรับแฟน Pokémon
• สรุป Chrome Developer Summit: Progressive Web App