การเริ่มต้นใช้งาน 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 คือเปลือกลูกกวาดแข็ง เลเยอร์นี้อาจมีสีต่างกันและประสบการณ์การใช้งานอาจแตกต่างกันไปตามความสามารถของเบราว์เซอร์ที่ใช้

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

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

Progressive Web App คือ

• โพรเกรสซีฟ - ทำงานได้กับผู้ใช้ทุกคน โดยไม่คำนึงถึงตัวเลือกเบราว์เซอร์ เนื่องจากผู้ใช้ได้รับการสร้างขึ้นด้วยการเพิ่มประสิทธิภาพแบบต่อเนื่องเป็นกลุ่มผู้ใช้หลัก
• ปรับเปลี่ยนตามอุปกรณ์ - พอดีกับอุปกรณ์ทุกรูปแบบ ไม่ว่าจะเป็นเดสก์ท็อป อุปกรณ์เคลื่อนที่ แท็บเล็ต หรือเครื่องมือใดก็ตามในอนาคต
• ไม่เชื่อมต่อการเชื่อมต่อ - เพิ่มประสิทธิภาพด้วย Service Worker ให้ทำงานแบบออฟไลน์หรือเครือข่ายคุณภาพต่ำ
• คล้ายแอป - ใช้โมเดล App Shell เพื่อนำทางและการโต้ตอบแบบแอป
• ใหม่ - ก้าวหน้าอยู่เสมอด้วยกระบวนการอัปเดต 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 รองรับการกำหนด Splash Screen และสีธีมของแถบที่อยู่ นอกจากนี้ยังใช้เพื่อกำหนดชุดของไอคอนตามขนาดและความหนาแน่นที่ใช้สำหรับหน้าจอเริ่มต้นและไอคอนหน้าจอหลักที่กล่าวไว้ข้างต้นด้วย

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

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

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

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

แบนเนอร์ "Add to Home Screen"

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

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

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

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

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

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

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

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

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

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

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

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

Chrome, Opera และ Firefox ล้วนให้การสนับสนุนแก่โปรแกรมทำงานของบริการที่ 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 นาทีถึงการพุชหากคุณมีแนวโน้มที่จะสร้างวิดีโอมากขึ้น

การสร้างเลเยอร์ในฟีเจอร์ขั้นสูง

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

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

ซิงค์พื้นหลังแบบครั้งเดียวเปิดใช้ใน Chrome แล้ว และ Jake Archibald มีวิดีโอแอป Wikipedia แบบออฟไลน์และบทความที่สาธิตการใช้งานจริง นอกจากนี้ Francois Beaufort ยังมีตัวอย่างบลูทูธแบบเว็บอีกจำนวนหนึ่งหากสนใจจะลองใช้ API ดังกล่าว

เหมาะกับกรอบ

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

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

สถาปัตยกรรม

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

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

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

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

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

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

Application Shell

ดูใน GitHub

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

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

ชุดเริ่มต้นสำหรับโพลิเมอร์

ดูใน GitHub

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

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

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

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

ชุดเครื่องมือเว็บเริ่มต้น

ดูใน GitHub

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

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

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

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

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

JavaScript ของวานิลลา

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

Polymer

• Zuperkulblog โดย Rob Dodson (สไลด์)

โต้ตอบ

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

Virtual-DOM

• Pokedex โดย Nolan Lawson - เว็บแอปแบบโปรเกรสซีฟที่ยอดเยี่ยมที่ใช้วิธีการ "ทำทุกอย่างในโปรแกรมทำงานบนเว็บ" เพื่อช่วยในการแสดงภาพแบบ Progressive (การเขียน)

Angular.js

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

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

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

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

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

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