หน้าออฟไลน์พื้นฐานสำหรับเว็บแอปใน Chrome Android

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

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

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

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

หน้าออฟไลน์เริ่มต้นของตัวอย่างเว็บแอป ซึ่งโลโก้เป็นรูปวงกลมสีชมพูและเครื่องหมายบวก 2 ตัว และมีข้อความว่า "คุณออฟไลน์อยู่"

ไปที่ข้อบกพร่องนี้เพื่อดูตัวอย่างก่อนหน้าที่ใช้งานได้จริง

ตัวเลือกในการสร้างหน้าออฟไลน์ที่กำหนดเองจะยังคงใช้งานได้ วิดีโอต่อไปนี้แสดงวิธีแสดงหน้าเว็บที่กำหนดเองโดยใช้ Workbox ด้วยโค้ดเพียงบรรทัดเดียว

ฟีเจอร์นี้พร้อมใช้งานใน Android (Chrome 109) และสภาพแวดล้อมเดสก์ท็อป (Chrome 110) หากมีความคิดเห็นใดๆ โปรดส่งผ่านแบบฟอร์มนี้

รูปภาพโดย Sten Ritterfeld ใน Unsplash