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

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

隨著網頁應用程式在離線工作方面比以往更新,但隨著 Service Worker API 推出,這項技術才有可能實現。此外,網站變為可安裝時,PWA 新增了一項規定,您必須註冊 Service Worker 並實作其 fetch() 方法,才能順利安裝網頁應用程式。 這項新點的用意是鼓勵開發人員至少告知使用者應用程式目前無法使用。

開發人員不必採取任何行動就能取得預設的離線網頁。從 Android 版 Chrome 109 版開始,瀏覽器會自動產生網頁,讓使用者知道自己離線。

如果應用程式沒有實作自訂離線體驗,當使用者處於離線狀態時,預設的離線頁面會顯示應用程式的圖示,以及簡單的「你目前離線」訊息。如下方範例所示。

這是網頁應用程式預設的離線頁面,其中的標誌是粉紅色的圓圈和兩個加號,並加上「你目前處於離線狀態」訊息。

如要查看上一個範例的實際運作情況,請造訪這個故障

不過,我們仍會提供建立您專屬的自訂離線網頁的選項。以下影片示範如何使用 Workbox 搭配一行程式碼放送自訂網頁。

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

相片來源:Sten Ritterfeld 張貼在 Unsplash 網站上