การปรับปรุงการตรวจหาการรองรับออฟไลน์ของ Progressive Web App

เพนนี แมคลาชแลน
Penny McLachlan

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

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

เป้าหมายของเกณฑ์ของ PWA ทั้งหมดคือการช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานคุณภาพสูงในการแข่งขันกับแอปเมื่อท่องเว็บ Chrome จะตรวจสอบเกณฑ์ PWA ก่อนเปิดใช้ความสามารถในการติดตั้งสำหรับ PWA

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

ตรรกะการตรวจจับแบบออฟไลน์ก่อนหน้า

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

แผนภาพของโปรแกรมทำงานของบริการ

ซึ่งหมายความว่า Chrome ไม่มีสิทธิ์ตรวจสอบว่าเครื่องจัดการเหตุการณ์ fetch แสดงทรัพยากรที่ถูกต้องด้วย HTTP 200 ระหว่างการตรวจสอบแบบออฟไลน์หรือไม่ Chrome ตรวจสอบเพียงว่า Service Worker มีตัวแฮนเดิล fetch หรือไม่เท่านั้น

อัปเดตตรรกะการตรวจจับแบบออฟไลน์แล้ว

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

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

ผลกระทบต่อนักพัฒนาแอป

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

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

คำเตือนที่แสดงในแท็บปัญหาของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะถูกนำออกใน Chrome 90