Angular Service Worker を使用すると、接続が不安定なネットワークでもアプリの速度と信頼性を高めることができます。
接続制限への対処
ユーザーのネットワーク アクセスが制限されているか、まったくアクセスされていない場合、ウェブアプリの機能が大幅に低下し、しばしばエラーが発生する可能性があります。Service Worker を使用してプレキャッシュを行うと、ネットワーク リクエストをインターセプトし、ネットワークから取得するのではなく、ローカル キャッシュから直接レスポンスを配信できます。この方法では、アプリのアセットがキャッシュに保存されると、アプリの処理速度が大幅に向上し、ユーザーがオフラインでも動作できるようになります。
この投稿では、Angular アプリで事前キャッシュを設定する方法について説明します。読者が事前キャッシュと Service Worker 全般に精通していることを前提としています。復習が必要な場合は、Service Worker と Cache Storage API の投稿をご覧ください。
Angular Service Worker の概要
Angular チームは、フレームワークおよび Angular コマンドライン インターフェース(CLI)と緊密に統合された事前キャッシュ機能を備えた Service Worker モジュールを提供しています。
Service Worker を追加するには、CLI で次のコマンドを実行します。
ng add @angular/pwa
@angular/service-worker
と @angular/pwa
がアプリにインストールされ、package.json
に表示されるはずです。また、ng-add
回路図により、ngsw-config.json
というファイルがプロジェクトに追加されます。このファイルを使用して、Service Worker を構成できます。(このファイルには、少し後でカスタマイズするデフォルト設定が含まれています)。
本番環境用のプロジェクトをビルドします。
ng build --prod
dist/service-worker-web-dev
ディレクトリ内に ngsw.json
というファイルがあります。このファイルは、アプリ内のアセットをキャッシュに保存する方法を Angular Service Worker に指示します。このファイルは、構成(ngsw-config.json
)とビルド時に生成されたアセットに基づいて、ビルドプロセス中に生成されます。
次に、アプリの本番環境アセットを含むディレクトリで HTTP サーバーを起動し、公開 URL を開いて、Chrome DevTools でネットワーク リクエストを確認します。
- Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevTools を開きます。
- [Network] タブをクリックします。
[ネットワーク] タブには、多数の静的アセットが ngsw-worker.js
スクリプトによってバックグラウンドで直接ダウンロードされます。
これは、生成された ngsw.json
マニフェスト ファイルで指定された静的アセットを事前キャッシュする Angular Service Worker です。
重要なアセットが 1 つあります: nyan.png
。この画像を事前キャッシュするには、その画像を含むパターンを、ワークスペースのルートにある ngsw-config.json
に追加する必要があります。
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js",
"/assets/*.png"
]
}
},
...
}
この変更により、/assets
フォルダ内のすべての PNG 画像が app
リソース アセット グループに追加されます。このアセット グループの installMode
が prefetch
に設定されているため、Service Worker は指定されたすべてのアセット(PNG 画像を含む)を事前キャッシュします。
事前キャッシュに保存する他のアセットを指定するのも簡単で、app
リソース アセット グループのパターンを更新します。
おわりに
事前キャッシュに Service Worker を使用すると、アセットをローカル キャッシュに保存できるため、アプリのパフォーマンスが向上するため、低品質のネットワークでも信頼性が向上します。Angular と Angular CLI で事前キャッシュを使用するには:
- プロジェクトに
@angular/pwa
パッケージを追加します。 ngsw-config.json
を編集して、Service Worker がキャッシュに保存する内容を制御します。