2023-08-19

[Javascript] 網路離線依然可以顯示資料 Service Worker 簡單實作

今天測試一個東西,解開我很久的疑惑,為何有些網站在我沒有網路的情況下,依然可以顯示一些資訊

有的是顯示你現在正在離線,或是有的依然變成一個資訊孤島依然還是可以查資料,正常狀況下不是應該都會顯示



後來查了一下原來是使用了 Service Worker 他可以將一些資源.css .js .html .. 註冊到 service worker 中

這樣之後在 offline 的時候就不會跳小恐龍,而是繼續執行網頁中的資料,猶如資料孤島版依然可以執行

這邊是最簡單的案例

.html + js :


其中提到的 service-worker.js


其實,這邊我是應用在幫朋友做的一個產品查詢的系統,因為他資料不常更新,所以我乾脆把整個 JSON 資料都放到 Service Worker 中

即使他在無網路環境下依然可以查詢,如果你遇到一些問題你可以按 下瀏覽器的 F12 進入開發者模式,選擇應用程式=> Service Workers 

這邊可以方便幫助你 debug 




這樣搞有沒有越來越像 APP


reference:

https://developer.chrome.com/docs/workbox/improving-development-experience?hl=zh-tw

https://noob.tw/pwa-service-worker/