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>
