Angular CLI を使用してプログレッシブ ウェブアプリを作成する

Angular アプリをインストール可能にしたい場合、待つ必要はありません。

Minko Gechev

この記事では、Angular コマンドライン インターフェース（CLI）を使用してプログレッシブ ウェブアプリ（PWA）を作成する方法について説明します。

このガイドのコードサンプルは GitHub にあります。

インストール可能な PWA を作成する

Angular アプリケーションを PWA にするには、次のコマンドを 1 つ実行するだけです。

ng add @angular/pwa

このコマンドは次のことを行います。

  • デフォルトのキャッシュ構成でサービス ワーカーを作成します。
  • マニフェスト ファイルを作成します。このファイルは、ユーザーのデバイスにインストールされた場合にアプリがどのように動作すべきかをブラウザに指示します。
  • index.html にマニフェスト ファイルへのリンクを追加します。
  • theme-color <meta> タグを index.html に追加します。
  • src/assets ディレクトリにアプリアイコンを作成します。

デフォルトでは、Service Worker は最初のページ読み込みから数秒以内に登録されます。含まれていない場合は、registrationStrategy の変更を検討してください。

PWA をカスタマイズする

Angular Service Worker による事前キャッシュの投稿では、Angular Service Worker の構成方法について説明しています。Service Worker にキャッシュに保存させるリソースと、そのキャッシュ保存に使用する戦略を指定する方法については、こちらの記事をご覧ください。

アプリのマニフェスト ファイルでは、アプリの名前、短い名前、アイコン、テーマカラーなどの詳細を指定できます。設定できるプロパティの全セットについては、ウェブアプリ マニフェストを追加するをご覧ください。

Angular CLI によって生成されたマニフェスト ファイルを確認します。

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

これらのプロパティは、manifest.webmanifest で関連する値を変更することでカスタマイズできます。

PWA は、index.html の link 要素でマニフェスト ファイルを参照します。ブラウザが参照を見つけると、[ホーム画面に追加] プロンプトが表示されます。

プログレッシブ ウェブアプリのインストール プロンプト

ng-add スキームには、アプリをインストール可能にするために必要なものがすべて追加されるため、ユーザーがアプリをデスクトップに追加すると、次のようなショートカット アイコンが生成されます。

プログレッシブ ウェブアプリのショートカット アイコン

PWA を本番環境にデプロイする前に、必ずマニフェストのプロパティとアイコンをカスタマイズしてください。

まとめ

インストール可能な Angular アプリを作成するには:

  1. Angular CLI を使用して @angular/pwa をプロジェクトに追加します。
  2. プロジェクトに合わせて manifest.webmanifest ファイルのオプションを編集します。
  3. プロジェクトに合わせて src/assets/icons ディレクトリのアイコンを更新します。
  4. 必要に応じて、index.html の theme-color を編集します。