Svelte入門：リファレンス $service-worker -Vol.2-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

import { base, build, files, prerendered, version } from '$service-worker';

このモジュールはサービスワーカーでのみ利用可能です。

SvelteKitのサービスワーカー内で使用できる特殊なモジュール$service-workerについて説明しています。

サービスワーカー専用：
- このモジュールはサービスワーカー内でのみ使用できます
- 通常のSvelteコンポーネントやページからはアクセスできません
提供される値：
- base – アプリケーションのベースパス
- build – ビルドファイルに関する情報
- files – 静的ファイルに関する情報
- prerendered – プリレンダリングされたページの情報
- version – アプリケーションのバージョン情報
用途：
- これらの値はサービスワーカーでのキャッシュ戦略の実装に役立ちます
- 例えば、新しいバージョンがデプロイされたときに古いキャッシュを消去するなどの処理が可能になります

サービスワーカーは、オフライン機能の提供やパフォーマンス向上のためのキャッシュ戦略の実装に使用され、このモジュールはそれらの実装を支援するための情報を提供します。

静的ディレクトリ、またはconfig.kit.files.assetsで指定されたディレクトリ内のファイルを表すURL文字列の配列です。config.kit.serviceWorker.filesを使用して、staticディレクトリから含まれるファイルをカスタマイズできます。

const files: string[];

SvelteKitのサービスワーカーモジュール内で利用可能なfiles変数について説明しています。

filesの内容：
- 静的アセットディレクトリ内のファイルを表すURLの配列です
- デフォルトではstaticディレクトリのファイルが含まれます
- またはconfig.kit.files.assetsで指定された別のディレクトリのファイルが含まれます
カスタマイズ：
- config.kit.serviceWorker.files設定を使用して、含まれるファイルをカスタマイズできます
- これにより、特定のファイルだけをキャッシュしたり、特定のファイルをキャッシュから除外したりできます
用途：
- 画像、フォント、アイコンなどの静的アセットをサービスワーカーでキャッシュする際に使用します
- cache.addAll(files)のように使うことで、静的ファイルをキャッシュできます
型情報：
- filesは文字列の配列（string[]）として定義されています

この変数は、アプリケーションの静的アセットをキャッシュするのに役立ちます。ユーザーエクスペリエンスを向上させるため、画像やその他のアセットをキャッシュしてオフラインでも利用できるようにする際に使用します。

プリレンダリングされたページとエンドポイントに対応するパス名の配列です。開発中は、これは空の配列です。

const prerendered: string[];

SvelteKitのサービスワーカーモジュール内で利用可能なprerendered変数について説明しています。

prerenderedの内容：
- ビルド時にプリレンダリングされたすべてのページとエンドポイントのパス名を含む配列です
- これらはビルドプロセス中に静的HTMLとして生成されたルートを表します
開発環境での動作：
- 開発環境（npm run devなど）では、この配列は空になります
- プリレンダリングはビルド時にのみ行われるため、開発中はこの情報が利用できません
用途：
- サービスワーカーがプリレンダリングされたページを特別に扱うために使用できます
- 例えば、プリレンダリングされたページに対しては「ネットワーク優先」の戦略を、その他のページには「キャッシュ優先」の戦略を適用するなどの区別が可能です
型情報：
- prerenderedは文字列の配列（string[]）として定義されています