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

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

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

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

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

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

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

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

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

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