Angular アプリをインストール可能にする場合は、もう待って！
この投稿では、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 アプリを作成するには:
- Angular CLI を使用して、プロジェクトに
@angular/pwaを追加します。 - プロジェクトに合わせて
manifest.webmanifestファイル内のオプションを編集します。 - プロジェクトに合わせて、
src/assets/iconsディレクトリのアイコンを更新します。 - 必要に応じて、
index.htmlのtheme-colorを編集します。