ngsw-config.json設定の解説（Angularのサービスワーカー）
本記事ではAngularサービスワーカーの設定ファイルであるngsw-config.jsonに対して説明します。
ngsw-config.jsonとは？
Angular用サービスワーカーの設定ファイルです。サービスワーカーを導入することで、ページのリソースをキャッシュし、ネットワークがオフラインになってもページの表示ができたり、ページの読み込む時間が早められたりします。
このサービスワーカーにどのリソースをキャッシュするか、キャッシュするタイミングはいつにするか、などを指定してくれるのがngsw-config.jsonになります。
まず、Angularでは@angular/pwaパッケージを設置してサービスワーカーの設置が可能です。パッケージの設置が終わったら、以下のように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",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
]
}
}
]
}
各プロパティー
$schema（スキーマ）
こちらはAngularパッケージの中で存在するschema.jsonファイルを参照しています。schema.jsonはそれぞれのプロパティーやタイプ、ディフォルトバリューなど、ngsw-configのための概要を含めている定義ファイルです。
index（インデックスページ）
ナビゲーションリクエストに必要なindexページを特定しています。普通は./index.htmlになります。
assetGroups（アセットグループ）
サービスワーカーがキャッシュしたいリソースを配列として指定できます。対象はページソース、サードバーティ、CDNの方から読み込まれる全てリソースが該当します。
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/index.html",
"/*.css",
"/*.js"
]
}
}
]
installMode（設置モード）
最初にどの方法を使ってリソースをキャッシュするかを決めます。
(1) prefetch
prefetchモードはサービスワーカーが最新のアプリバージョンをキャッシュする間にresourcesに指定されたリソースを全てをフェッチします。これはより重いネットワークに通信を求めているではありますが、リクエストされたリソースはいつでもアクセスできます。
(2) lazy
lazyモードではどのリソースでも先からキャッシュしてないです。サービスワーカーがキャッシュするリソースはリクエストを貰ったものに限ります。これはオンデマンド、つまり要求に応じてキャッシュするモードになります。リクエストされてないリソースはキャッシュされないです。このモードは特定画面に適切なアセットだけをキャッシュしますので、それぞれ解像度が違うイメージを呼び出す時に役に立ちます。
updateMode（更新モード）
既にキャッシュされたリソースの場合、新しいバージョンが見つかりましたら、キャッシング行動を決めます。前回のバージョンから変更があったリソースなら、このupdateModeに従って更新されます。 デフォルトの値はinstallModeの値に継承されます。
（１) prefetch
変更されたリソースをすぐにダウンロードしてキャッシュするように指示します。新しいバージョンのアプリが利用可能になった直後に最新のデータを提供できますが、初回起動時の読み込み時間が長くなる可能性があります。
（２) lazy
サービスワーカーに変更されたリソースをキャッシュしないように指示します。変更されたリソースは、ユーザーが実際にアクセスするまでキャッシュされません。初回起動時の読み込み時間は短くなりますが、ユーザーが変更されたリソースにアクセスするまで、古いデータが提供される可能性があります。
resources（リソース）
こちらはサービスワーカーにどのリソースをキャッシュするか、教えてくれる項目となります。ファイルのパスやパタンを設定することで、条件に合うリソースをキャッシュします。
（１）ファイル
キャッシュするリソースの具体的なファイルパスを指定します。
（２）URL
キャッシュするリソースのURLパターンを指定します。
dataGroups(データーグループ）
"dataGroups": [
{
"name": "api-cat-image",
"urls": [
"https://api.thecatapi.com/v1/images/search"
],
"cacheConfig": {
"strategy": "performance",
"maxSize": 100, // エントリ数 100 個までキャッシュ
"maxAge": "3d2h" // 3日2時間までキャッシュ
}
}
]
APIリクエストのようなデーターリクエストのキャッシュ設定を決まるところです。
i. name
区別用の名前です。設定には影響を及ばないです。
ii. urls
データーキャッシュのために、URLのパターンや特定のURLを配列として設定できます。
iii. cacheConfig
(1) strategy
-
freshness
データの最新性を重視し、可能な限りネットワークから最新データを要求します。
ネットワーク要求がタイムアウトした場合に限ってキャッシュされたデータを取得します。
データが頻繁に変更される場合に望ましい設定です。 -
performance
パフォーマンスを重視し、可能な限り高速でレスポンスを返すようにします。
(2) maxSize（キャッシュの最大サイズ）
キャッシュ内に保存できるエントリ数またはレスポンス数を設定するオプションです。キャッシュサイズに制限を設けないと、キャッシュが肥大化し、ストレージ容量を超過してしまう可能性がありますので、こちらの設定で不要なエントリなどが自動的に削除されるようにするのができます。
(3) maxAge（キャッシュの有効期限）
キャッシュ内のレスポンスをどれぐらい有効に保管しておくのか、その期間を設定するオプションです。
d= days（日）
h= hours（時間）
m= minutes（分）
s= seconds（秒）
u= milliseconds（ミリ秒）
navigationUrls（ナビゲーション URL）
特定のURLまたはURLパターンに一致するリクエストをindexファイルにリダイレクトするかどうかを制御するオプションです。
{
"name": "app-test",
"installMode": "lazy",
"updateMode": "lazy",
"navigationUrls": [
"/**", // すべての URL をリダイレクト
"!/api/*", // /api/以下のURL は除外
"!/login" // /loginは除外
]
}
参考：
Discussion