Svelte入門：SvelteKitでのService workers -Vol.2-

今日は、SvelteKitでのService workersについて解説しています。

背景

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

開発時のService Worker

Service Workerは本番環境用にバンドルされますが、開発時にはバンドルされません。そのため、開発時にService Workerを使用できるのは、Service Worker内でのモジュール使用をサポートしているブラウザのみとなります。Service Workerを手動で登録する場合、開発時には{ type: 'module' }オプションを渡す必要があります：

import { dev } from '$app/environment';

navigator.serviceWorker.register('/service-worker.js', {
    type: dev ? 'module' : 'classic'
});

開発時にはbuildとprerenderedは空の配列となります。

解説

1. 開発環境と本番環境の違い：

• 本番環境：Service Workerのコードはバンドル（結合・最適化）される
• 開発環境：バンドルされず、モジュールとして動作

1. ブラウザの互換性に関する注意点：

• 開発時はService Worker内でのESモジュール（import/export）をサポートしているブラウザのみが対象
• 本番環境ではバンドル済みのため、より広いブラウザをサポート

1. Service Worker登録時の設定：

   import { dev } from '$app/environment';

   navigator.serviceWorker.register('/service-worker.js', {
       type: dev ? 'module' : 'classic'
   });

• $app/environmentからdevフラグをインポート
• 開発環境ではtype: 'module'を指定
• 本番環境ではtype: 'classic'を使用

1. 開発時の制限事項：

• build配列：空配列となる（ビルドファイルの情報が含まれない）
• prerendered配列：空配列となる（プリレンダリングされたページの情報が含まれない）

1. 実務上の影響：

• 開発時にはService Workerの機能が制限される可能性がある
• 本番環境でのみ完全な機能が利用可能
• テスト時には本番環境での動作確認が重要

この仕様は開発時のService Workerの動作を理解し、適切な開発・テスト戦略を立てる上で重要となります。特に、開発環境と本番環境での動作の違いを意識してアプリケーションを構築する必要があります。

おわりに

今日は、 SvelteKitでのService workersについて解説しました。