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

Angular アプリをインストール可能にする場合は、もう待って！

Minko Gechev

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

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

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

Angular アプリケーションを PWA にするために必要な作業は、次の 1 つのコマンドを実行することだけです。

ng add @angular/pwa

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

  • デフォルトのキャッシュ構成で Service Worker を作成します。
  • マニフェスト ファイルを作成して、ユーザーのデバイスにアプリをインストールしたときの動作をブラウザに伝えます。
  • マニフェスト ファイルへのリンクを 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 を編集します。