Chrome Android 版網頁應用程式的基本離線頁面

已安裝的平台應用程式即使離線也能啟動。在這種情況下,他們通常會提供一個網頁,讓使用者知道無法存取網際網路。有些開發人員甚至建立了一組可離線使用的功能。

有了網頁應用程式,離線工作的功能也更近期。Service Worker API 推出後,這項做法才得以實現。此外,當網站可安裝時,PWA 會新增一項規定,規定要註冊 Service Worker 並實作 fetch() 方法,應用程式才能安裝。 這個想法的目的是鼓勵開發人員至少向使用者發送通知,讓他們知道應用程式目前無法使用,

開發人員現在不必執行任何操作,就能取得預設的離線網頁。在 Android 版 Chrome 109 中,瀏覽器會自動產生一個頁面,讓使用者知道自己處於離線狀態。

如果應用程式未導入自訂的離線功能,當使用者處於離線狀態時,預設的離線頁面會使用應用程式的圖示,以及簡單的「你目前離線」訊息。如下例所示。

範例網頁應用程式的預設離線網頁,標誌以粉紅色圓圈和兩個加號,並顯示「你目前離線」訊息。

開啟這個故障頁面,即可查看上一個範例的實際運作情形。

不過,您還是可以選擇建立自訂離線頁面。以下影片示範如何在包含一行程式碼的情況下,使用 Workbox 放送自訂網頁。

這項功能適用於 Android (Chrome 109) 和電腦環境 (Chrome 110)。如有任何意見,歡迎透過這份表單向我們提供

相片來源:Sten RitterfeldUnsplash 網站