TL;DR
在index.html
中加上以下內容:
HTML
<meta http-equiv="Cache-Control" content="no-cache">
最近在自己的React SPA專案中遇到在iOS上PWA無法更新的問題。新版本的網頁部署到伺服器後,手機內的PWA依舊我行我素使用舊版本網頁。
即使location.reload()
可以短暫載入新版本的網頁,但退出並在iOS後台關閉網頁,重新打開PWA,載入的依然是舊版本。
利用iOS流量截取工具觀察使用PWA時的HTTP請求,可以發現開啟PWA應用時手機並沒有向伺服器發出請求獲取index.html
,因此並不知道伺服器上的檔案已更新,繼續使用舊版本緩存下來的檔案。猜測HTTP緩存策略設定有誤或不足,導致index.html
被緩存下來。
得知問題的可能原因後,要嘗試解決問題也很簡單,只需要為index.html
設定合適的緩存策略,讓手機每次都先向伺服器詢問這個檔案有沒有更新,確保新版本部署後不會被無視。具體為將HTTP的Cache-Control Header
設定為no-cache
即可,可以從伺服器或者HTML檔案加入這個Header。最簡單就是像文章開頭那樣,直接放在index.html
內即可生效。
新版本部署後再次使用流量截取工具觀察,可以見到每次打開PWA應用,手機都有請求index.html
,伺服器返回304 Not Modified
代表檔案沒有更新,可以繼續沿用緩存;有更新就會返回200 OK
並附上檔案內容。
確認新的緩存策略有效,收工。