Angular アプリをインストール可能にしたいですか？もう待つ必要はありません。
この投稿では、Angular コマンドライン インターフェース（CLI）を使用してプログレッシブ ウェブアプリ（PWA）を作成する方法について説明します。
このガイドのコードサンプルは、GitHub で確認できます。
インストール可能な PWA を作成する
Angular アプリケーションを PWA にするには、次のコマンドを 1 つ実行するだけです。
ng add @angular/pwa
このコマンドは次のことを行います。
- デフォルトのキャッシュ保存構成でService Workerを作成します。
- マニフェスト ファイルを作成します。このファイルは、ユーザーのデバイスにインストールされたときにアプリがどのように動作するかをブラウザに伝えます。
index.htmlでマニフェスト ファイルへのリンクを追加します。index.htmlにtheme-color<meta>タグを追加します。src/assetsディレクトリにアプリアイコンを作成します。
デフォルトでは、Service Worker は最初のページ読み込みから数秒以内に登録されます。そうでない場合は、registrationStrategy の変更を検討してください。
PWA をカスタマイズする
Angular Service Worker を使用した事前キャッシュの投稿では、Angular Service Worker を構成する方法について説明しています。サービス 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 アプリを作成するには:
- Angular CLI を使用して、プロジェクトに
@angular/pwaを追加します。 - プロジェクトに合わせて
manifest.webmanifestファイルのオプションを編集します。 - プロジェクトに合わせて
src/assets/iconsディレクトリのアイコンを更新します。 - 必要に応じて、
index.htmlのtheme-colorを編集します。