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

แอดดี้ ออสมานี
แอดดี ออสมานี

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

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

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

Progressive Web App

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

Progressive Web App ไม่ได้มีใน Chrome สำหรับ Android เท่านั้นเช่นกัน ด้านล่างนี้เป็น Progressive Web App ของ Pokedex ที่ใช้งานได้ใน Firefox สำหรับ Android (เบต้า) ซึ่งใช้ฟีเจอร์ "Add to Home" ก่อนเปิดตัว และฟีเจอร์การแคชของ 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 ที่น่าลองใช้อีกด้วย

หลักการ

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

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

เพิ่มลงในหน้าจอหลัก เปิดจากหน้าจอหลัก และใช้งานเหมือนแอปแบบเต็มหน้าจอ

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

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

ปัจจุบันเบราว์เซอร์แบบ 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 ช่วยให้คุณใช้ Cache API เพื่อแคชทรัพยากรได้ และสามารถใช้เพื่อให้ผู้ใช้ได้รับประสบการณ์แบบออฟไลน์

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

การแคช Service Worker ของ Application Shell ทำให้โหลดโดยไม่มีเครือข่าย

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

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

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

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

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

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

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

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

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

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

Michael van Ouwerkerk จากทีม Chrome ยังมีการแนะนำ 6 นาทีเพื่อส่งข้อความหากคุณสนใจในวิดีโอมากกว่า

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

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

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

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

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

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

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

สถาปัตยกรรม

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

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

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

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

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

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

การเริ่มต้นใช้หม้อไอน้ำ

Application Shell

ดูใน GitHub

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

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

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

ดูใน GitHub

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

ชุดอุปกรณ์เริ่มต้นสำหรับโพลิเมอร์ที่แสดงฟีเจอร์ Progressive Web App ในตัว

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 Kit อาจมีประโยชน์ในการใช้เป็นจุดอ้างอิง คุณจะใช้ซ้ำหรือขโมยข้อมูลโค้ดได้

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

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

Progressive Web App ที่ติดตั้งใช้งานโดยใช้ React, Polymer, Virtual DOM และ AngularJS

วานิลลา JavaScript

Polymer

โต้ตอบ

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

Virtual-DOM

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

Angular.js

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

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

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

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

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