Service Workerモジュールテンプレートジェネレーターとは
ESモジュールサービスワーカーはregister()呼び出しでtype: 'module'オプションを使用し、importScripts()の代わりにimport/export構文を可能にします。これにより、標準的なJavaScriptモジュールパターン、静的インポート、より優れた依存関係管理が実現します。設定可能なキャッシュ戦略（cache-first、network-first、stale-while-revalidate、network-only、cache-only）と組み合わせることで、サービスワーカーはネットワークリクエストの処理方法を制御し、インストール時に重要なアセットをプリキャッシュし、オフラインフォールバックページを提供できます。
クイックアンサー
設定可能なキャッシュ戦略（cache-first、network-first、stale-while-revalidate、network-only、cache-only）、プリキャッシュURLリスト、自動アクティベーション（skipWaiting + clients.claim）、オフラインフォールバックページをサポートするESモジュールサービスワーカーテンプレートを生成します。importScriptsの代わりに静的import/exportを使用したESモジュール構文を使用します。
Last updated: 2026-05-31
制限事項
- ESモジュールサービスワーカーは動的import()をサポートしていません。すべてのモジュール依存関係はトップレベルで静的に宣言する必要があります。動的コードローディングには、代わりに従来のimportScriptsパターンが必要です。
- クロスオリジンモジュールスクリプトはサービスワーカーでサポートされていません。インポートされるモジュールは同一オリジンである必要があります。CDNからスクリプトをロードする必要がある場合は、従来のサービスワーカーパターンを使用するか、コードをローカルにバンドルしてください。
- サービスワーカーのライフサイクル（install -> waiting -> activate -> update）は開発中にバージョン競合を引き起こす可能性があります。ブラウザDevToolsの「Update on Reload」および「Bypass for Network」オプションが役立ちますが、本番環境でのバージョン管理には注意深いキャッシュ命名とクリーンアップロジックが必要です。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- ルートタイプごとにキャッシュ戦略を選択します。静的アセットにはcache-first、API呼び出しにはnetwork-first、頻繁に更新されるコンテンツにはstale-while-revalidate、機密性の高いエンドポイントにはnetwork-only。
- インストールイベント中にプリキャッシュするURLのリストを入力します。これらはフェッチされてキャッシュに保存されるため、オフラインでも即座に動作します。
- 自動アクティベーションを切り替えてskipWaitingとclients.claimを有効にします。これにより、次のページロードを待たずに新しいサービスワーカーがすべてのクライアントで即座にアクティブになります。
- 必要に応じてオフラインフォールバックページを有効にします。フェッチが失敗し、リソースがキャッシュにない場合、サービスワーカーはブラウザのオフラインエラーの代わりにフォールバックページを提供します。
主な用途
- インストール時にすべての静的アセットをキャッシュし、APIデータにはnetwork-firstを使用し、キャッシュされていないルートにはオフラインフォールバックページを提供するプログレッシブウェブアプリを作成します。
- 記事にstale-while-revalidateキャッシングを使用するコンテンツサイトを構築します。キャッシュされたバージョンを即座に提供し、バックグラウンドでキャッシュを更新して、ネットワークを待たずにコンテンツを最新に保ちます。
- 開発者が独自のキャッシュ戦略、プリキャッシュリスト、オフライン動作でカスタマイズできるサービスワーカースケルトンを含むプロジェクトテンプレートを生成します。