* 問題
新手我最近開發上遇到一個問題是:
在服務端更新部署新的html/javascript/css檔案後,
期望是用戶端也看到更新的內容,
但瀏覽器會去存取cache的檔案導致內容沒有更新-
---
* 目前解決方案
1. 在靜態檔案的路徑加上query語句, ex: src="/static/js/example.js?v=1"
在更新example.js檔案後再將query改為src="/static/js/example.js?v=2"
2. service worker註冊下載的檔案用更改cache名稱來update快取的檔案
-
* 討論
目前我是只有使用以上這兩種搭配一起使用,
但不確定這樣的作法是否合適與完善,
不知道大家有沒有比較好的建議或是都是怎麼防止在更新靜態檔案後用戶端存取cache?
留言
國立政治大學
兩個解決方案適用情況不太一樣
靜態檔案加 Query 確實有這種做法，但比較好的會是如 B2 的方式，如果有用 Webpack 等工具可以很容易的設定
理由是加了 Query 可能會被判定成動態內容，導致 cache 功能完全失效（印象中部分後端軟體會將帶 Query 的請求覆寫 Cache-Control）
Service Worker 這塊，Cache 的目的是在使用者無法輕易取得遠端檔案時可以使用舊版的暫時使用，所以開發上通常的概念是：先發 Request 出去，如果 Timeout 就拿 Cache 頂著用（部分穩定的會反過來，先拿 Cache 再發 Request 看有沒有新版）
所以如果要改就是用第一種，先拉拉看，沒拉到再用 Cache
B3