Service Worker 中伏記

近日筆者開始研究PWA(Progressive Web Application), 當中遇到一個問題, 花了幾個小時解決, 在此提供解決方法, 省下其他人的時間。

PWA 是Google 大力推動的一種網頁技術, 用html5 寫成, 其特點是可以做到一般網頁做不到的功能: 如離線使用, 本地儲存數據等。務求利用網頁做到原生app 的體驗。

PWA 的其中一個部份, Service Worker 是一個Javascript 檔案, 負責儲存指定檔案至快取, 以及於離線時攔截HTTP request 並返回所需response。

筆者遇到的情況是, 在localhost 成功快取, PWA 可以離線使用, 不過放上伺服器後就不斷出現404 Not Found 的畫面。

幾小時後終於發現問題成因, 其實跟Service Worker 無關: 由於伺服器設定問題, index.html 的HTTP header 中max-age=0 (沒有快取)。

解決方法: 於appache 的.htaccess 中加入以下幾句:

<IfModule mod_headers.c>
<FilesMatch "\.(html|jpg|jpeg|png|css|js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

A JavaScript/Node/Flutter developer who love technical stuffs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store