[Javascript] 網路離線依然可以顯示資料 Service Worker 簡單實作
2023-08-19
今天測試一個東西，解開我很久的疑惑，為何有些網站在我沒有網路的情況下，依然可以顯示一些資訊
有的是顯示你現在正在離線，或是有的依然變成一個資訊孤島依然還是可以查資料，正常狀況下不是應該都會顯示
後來查了一下原來是使用了 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/