Angular Service Worker を使用した事前キャッシュ

Angular Service Worker を使用すると、接続が不安定なネットワークでもアプリの速度と信頼性を高めることができます。

Minko Gechev

接続制限への対処

ユーザーのネットワーク アクセスが制限されているか、まったくアクセスされていない場合、ウェブアプリの機能が大幅に低下し、しばしばエラーが発生する可能性があります。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 でネットワーク リクエストを確認します。

  1. Ctrl+Shift+J キー（Mac の場合は Command+Option+J キー）を押して DevTools を開きます。
  2. [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 で事前キャッシュを使用するには:

  1. プロジェクトに @angular/pwa パッケージを追加します。
  2. ngsw-config.json を編集して、Service Worker がキャッシュに保存する内容を制御します。