漸進式WEB應用（PWA）相較于傳統網頁應用，在使用體驗上更加貼近原生APP，這得益于其強大的緩存API。不過對于開發者來說，緩存也會帶來諸多不便。所以，今天我們就來梳理一下，PWA應用開發會遇到哪些問題，以及這些問題的解決方案。

頁面資源不更新

如果我們在開發過程中啟用了service worker，并且引入了PWA的緩存機制，那么我們很有可能會遇到資源不更新的問題。

瀏覽器會根據我們提供的緩存列表保存資源，當更改其中的某個資源（如JS文件），并在service worker中修改了版本，瀏覽器檢測到更新會在后臺靜默安裝好資源。但是安裝完并不代表會馬上使用該資源，此時開發者看到的頁面還是老版本的，很多人會誤以為是哪里出了bug，其實這是PWA的機制。

官方說法是：當不再有任何已加載的頁面在使用舊版的service worker的時候，新版本才會激活。這意味著，開發者至少刷新兩次頁面才會看到新的頁面效果。

現在做前端開發都會使用一些開發工具，這些工具會提供頁面熱更新，有些能很好地解決資源刷新問題，但并不是百分百有效的，所以當我們修改了文件頁面卻沒變化時，不妨想想是不是PWA的緩存升級機制導致的，這時候可以多刷新幾次頁面，或者使用“ctrl+f5”強制清空緩存后再看看頁面是否更新了。

緩存策略不恰當導致頁面邏輯錯亂

service worker并沒有提供優雅的緩存策略，很多開發者會傾向于使用谷歌提供的workbox庫，workbox封裝了service worker并提供了非常簡潔的API接口，使用幾行命令就能配置好service worker。

其中的workbox-strategies庫提供了四種緩存策略：CacheFirst、NetworkFirst、NetworkOnly、StaleWhileRevalidate。從名字上就能看出這些策略的含義：

• CacheFirst：優先使用緩存，沒有緩存則使用網絡請求資源
• NetworkFirst：優先使用網絡請求資源，網絡連接失敗后使用本地緩存
• NetworkOnly：使用網絡請求資源，禁止緩存
• StaleWhileRevalidate：優先使用緩存請求舊版資源，同時在后臺靜默執行網絡請求并緩存新資源，下次刷新頁面的時候執行新舊資源更替

這四個策略的使用場景各不相同，用錯地方會導致頁面邏輯混亂，尤其是StaleWhileRevalidate這個方案，看上去兼顧了前面三種策略的優點，實際使用時，因為只有下次刷新才能將最新資源展示到客戶端，所以大多數情況使用該策略會顯得很別扭。

很多人以為service worker的緩存只能存儲靜態資源，其實它還能緩存調用后臺得到的api,像有些不重要的API可以使用NetworkFirst策略，在沒網的情況下也能獲得數據，而像登錄注冊等這種比較重要的接口就不適用于緩存。

緩存策略一定要根據自己網頁的實際情況去因地制宜地使用，不存在一招鮮吃遍天的方案，也沒有最佳實踐，好好研究自己的產品才能得到最優解。

調試時沒有環境支持

開發PWA應用所需的環境比普通WEB應用更加嚴格，沒有開發環境，就只能憑空調試，這樣不光效率低下，出錯概率也很高。磨刀不誤砍柴工，開發前配置好本地環境非常重要。

PWA調試所需環境：

• 要使用manifest.json，網址必須是https協議
• 要使用service worker，網址必須為localhost或者是https協議

從以上要求來看，本地必須得配置https協議才能進行PWA開發調試（線上同理）。那么本地怎么配置https呢？這里給大家推薦一個本地SSL證書頒發工具mkcert。

使用mkcert，兩三行命令就能獲得可靠的本地https證書，搭配nginx，可以快速構建本地的https開發環境。

全局思維

PWA作為傳統webapp的補充，他本身就是漸進式增強的，一切都能在原有網頁應用的基礎上做非侵入開發。所以從全局角度來說，一定是先開發好webapp的所有功能，再考慮做PWA補充，切忌把頁面邏輯混入service worker中。

寫在最后

當然，我們可以讓webapp開發和PWA應用更好地調和起來，pwapk.com的開發人員基于vue3框架構建了一套完整的PWA開發框架，項目正在試運行，后續會開源，歡迎關注。

總結

以上是生活随笔為你收集整理的PWA应用开发会遇到哪些问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。