@service-worker / 博客 RSS 訂閱

Aug 28 2020

huaguzheng - 在 create-react-app 創建的項目中自定義 Service Worker 緩存策略

在使用 create-react-app 創建的項目中，已經自帶有一個 serviceWorker.js 文件，為項目打包後的資源文件提供了離線緩存，我們只需要開啓或關閉這項特性。一般情況下，默認的緩存配置和策略已經夠用，但是在我們項目中遇到了如下需求 項目打包後的資源需要做離線緩存 對於某些遠程資源(非項目內)也需要能夠緩存 及時更新，用户不需要關閉當前 tab 頁也能訪問到最新版本

service-worker , workbox , create-react-app

收藏 評論

Nov 06 2025

JerryC - ServiceWorker 緩存與 HTTP 緩存

雖然 ServiceWorker 和 PWA 正在成為現代 Web 應用程序的標準，但瀏覽器資源緩存變得比以往任何時候都複雜。 本文涵蓋了瀏覽器緩存的重點內容，具體包括： ServiceWorker 緩存與 HTTP 緩存的優先級？ 主流瀏覽器實現的 MemoryCache 和 DiskCache 在哪一層？ MemoryCache、DiskCache、ServiceWorker 緩

pwa , http緩存 , service-worker

收藏 評論

Nov 06 2025

來了老弟 - vue項目引入pwa使網頁應用可安裝

最近在使用vue項目時看到一個這樣的效果，如圖： 現在其實有很多網站都支持把網頁安裝到電腦或手機（IOS Safari支持較好），如下圖安裝後的效果： 這些都是網頁應用。 接下來介紹一下如何讓你的vue2項目變得可以安裝。 添加cli-plugin-pwa 給現有的vue項目添加，使用下面命令： vue add pwa 執行完之後會自動在package.json添加"@vue/c

vue.js , pwa , service-worker

收藏 評論

Nov 06 2025

來了老弟 - vue項目部署後提示用户有新版本

你可能在瀏覽器見到過上面這種UI，這是在vue項目重新build在服務端部署後，瀏覽器刷新頁面彈出的提示，這時如果用户點擊更新就會重載頁面，清除之前的緩存獲取最新內容。 這是怎樣發生的呢？你可能會想到下面的方式： 服務端編譯重新部署維護一個版本號，客户端通過輪詢檢測和本地存儲的是否相同，發現更新的版本就彈框提示（缺點 耗電。尤其是在移動端） 通過在html中做版本標記... websoc

vue.js , pwa , service-worker

收藏 評論