Apps、PWA)に興味津々なフロントエンドエンジニア、いなばです。いうモジュールで、リソースのキャッシュ制御がとても簡単にできたのでご紹介したいと思います。Workerの登録リソースの動的キャッシュおわりにまずは簡単に使ってみるまずはシンプルな構成で試してみました。ソースコードはこちらになります。)で実際の動作を見ることができます。提供されているページでのみ動作する)があるので、今回のデモはlocalhostで動作するよう、ローカルサーバーが立ち上がるようにしてあります。いう画像が表示できたらデモの起動は完了です。ビルド時と実行時(今回はappディレクトリがルートになる)で相対パスが不一致になるケースで指定します。部分を、ローカルファイルのパスの先頭から削除するようにしています。true};生成されたservice-worker.jsの中身を見てみると、キャッシュしたいファイルとハッシュがセットになっています。sw-precacheは、ビルド時にファイルの変更を検知すると自動キャッシュするファイルの追加や削除、ファイルのハッシュ値の書き換えなどを行ってくれるようです。最後に、生成したservice-worker.jsの登録をするためのJSを読み込ませます。)が用意されているので、これを使うのが一番簡単です。src="assets/js/service-worker-registration.js"></script>リソースの動的キャッシュ先ほどのデモではhtmlファイル自体もキャッシュしているので、ローカルサーバーを停止したあともアクセスすることが可能になっています(ぜひ実際にリポジトリをクローンして試してみてください)。先ほどの設定(staticFileGlobs)ではローカルにある静的リソースのキャッシュの指定しかできないため、外部にある画像やフォントなどのキャッシュができません。あるので、ここに画像とフォントのドメインを追加します。true};これで外部のリソースもキャッシュできるようになったので、デモは完全にオフラインページ対応になりました。2回目のアクセスから、外部にある画像もフォントもキャッシュされていることが確認できます。数10msで返ってくるので劇的な速度アップが見込めますね。静的リソースだけでなく、ajaxのレスポンスもキャッシュすることが可能です(sw-precacheが生成するJSではGETメソッドのときしかキャッシュ処理を行わないようになっています)。'fastest'}]キャッシュする期限や最大件数、キャッシュの使用方法を指定するオプションも用意されているので、かなり細やかな制御を行うことができるようです。Workerが使えるようになるにはもう少し時間がかかりそうですが、実際に手を動かしてオフラインで動作するページを作ってみると、なかなか感慨深いものがありました。何度もアクセスされることを想定したWebサイトにおいてリソース(HTMLやJavascriptファイルなど)のロード時間が圧倒的に短縮できる効果はとても大きいので、隙を見てLIGブログや受託の案件などに積極的に取り入れていこうと思います。LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。このメンバーの記事をもっと読むフロントエンドエンジニアのいなばです。LIGではAngularやVueなどのフレームワークを使った中~大規模のWebアプリケーション開発、フロントエンドエンジニアの育成などを担当しています。好きなものはカフェインとカプサイシン。趣味はランニングと一眼レフです。PopularPR連載一覧イベント情報Web制作デザインTechnologyAIオウンドメディアSEO対策アプリ開発システム。