Service Workerで「htmlファイルはネットワークから取得、オフラインのときはキャッシュから取得する」と言う動作を意図どおり行うためにはどうすれば良いでしょうか?
いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。
【質問の主旨】
Service Workerで「htmlファイルはネットワークから取得、オフラインのときはキャッシュから取得する」と言う意図でコードを記述しているにも関わらず、ネットワーク上でindex.htmlの内容が更新されたときに、変更内容がページに反映されないのはなぜでしょうか?
【質問の補足】
1.
index.htmlにあるpタグ内の一部(echizenya Japanese
)をPaul Irish
に変更したにも関わらず、ブラウザには従前通りechizenya Japanese
が表示されます。
(参考資料)
- 添付画像 1
- 変更後のindex.html
- 引用元のindex.html
2.
index.htmlに記述している内容とブラウザに表示されている内容が異なるのは、ブラウザがキャッシュされた古いindex.htmlを参照しているためであると思います。Chrome Developer Toolの[Network]でinde.htmlのSizeを確認すると、from Service Worker
となっています。
(参考資料)
- 添付画像 2
3.
Service Workerを使ってCache StorageにアセットしているJavaScriptのコードは以下のGitHubで公開しているURLです。
https://github.com/webopt/ch9-service-workers/blob/master/htdocs/sw-install.js
https://github.com/webopt/ch9-service-workers/blob/master/htdocs/sw.js
sw-install.jsとsw.jsには何も記述されていませんが、下記のhackmdのsw.jsにおいて「Service Workerを使って基本的にはネットワークから取得してオフラインならばキャッシュから取得する」という意図のコードを記述しています。
(参考資料)
- sw-install.js
- sw.js
sw.jsの記述により本来は下記の通りに動作すると個人的に考えています。
- ブラウザ →
Paul Irish
- [Network] → index.htmlのファイルサイズ
4.
今回の質問内容やコードについては、「Webサイトパフォーマンス実践入門」という本のP235からP236を参考にしています。
https://www.shoeisha.co.jp/book/detail/9784798155098
5.
ローカル開発環境はMac OSにインストールしているNode.jsを使っています。
以上、ご確認のほどよろしくお願い申し上げます。