Service Worker を登録する
Service Worker をインストールして有効化します。
「Service Worker を登録する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
Service Workerとは
Service Workerは、ページとは別にブラウザーがバックグラウンドで実行するスクリプトです。プログラム可能なネットワークプロキシとして機能し、リクエストの傍受、キャッシュ済みレスポンスの提供、オフライン体験の実現ができます。
機能検出
すべての環境がService Workerに対応しているわけではありません。古いブラウザーでも適切に機能を低下させられるよう、登録する前にnavigator.serviceWorkerの有無を確認します。
if ('serviceWorker' in navigator) {
// safe to register
}登録
Service Workerを登録するには、そのスクリプトURLをnavigator.serviceWorker.registerに渡します。登録処理は、registrationオブジェクトに解決されるPromiseを返します。
navigator.serviceWorker.register('/sw.js')
.then(reg => console.log('registered, scope:', reg.scope))
.catch(err => console.log('registration failed:', err));登録スコープ
scopeは、Service Workerが制御するURLの集合です。デフォルトでは、スクリプトが置かれているディレクトリになります。/sw.jsにあるService Workerはサイト全体を制御し、/app/sw.jsにあるものは/app/だけを制御します。
navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.明示的なスコープの設定
オプションを使ってスコープを狭めることはできますが、サーバーで特別なヘッダーを設定しない限り、スクリプトのディレクトリより広げることはできません。
navigator.serviceWorker.register('/sw.js', {
scope: '/dashboard/'
});HTTPSの要件
Service Workerにはセキュアコンテキストが必要です。本番環境ではHTTPSを使用します。開発時のlocalhostはセキュアとして扱われます。これにより、攻撃者によるネットワークプロキシの乗っ取りを防ぎます。
installイベント
Service Workerが初めて登録されると、installイベントが実行されます。通常はここで重要なアセットを事前にキャッシュし、アプリをオフラインでも動作させられるようにします。
// sw.js
self.addEventListener('install', (event) => {
console.log('service worker installing');
});activateイベント
インストールの後、Service Workerはactivateイベントを発生させます。ページの制御を開始する前に、以前のバージョンの古いキャッシュを削除する処理をここで行います。
// sw.js
self.addEventListener('activate', (event) => {
console.log('service worker activated');
});ライフサイクル
Service Workerは次の状態を順に遷移します。
- installing — installハンドラーを実行中
- installed/waiting — 準備完了し、制御開始を待機中
- activating / activated — ページを制御中
デフォルトでは、新しいService Workerは、古いページが閉じられるまでアクティブ化を待機します。
リクエストの傍受
アクティブになると、Service Workerはfetchイベントを通じて、スコープ内のすべてのネットワークリクエストを受け取ります。キャッシュ、ネットワーク、またはその両方を組み合わせて応答できます。
// sw.js
self.addEventListener('fetch', (event) => {
// event.request describes the outgoing request
console.log('intercepted', event.request.url);
});登録のまとめ
Service Workerを登録するには、機能を検出し、スクリプトURLを指定してregisterを呼び出します。スコープとHTTPSの要件に注意し、Service Workerのスクリプト内でinstall、activate、fetchイベントを処理します。
理解度チェック
Service Workerの登録についての理解度を確認しましょう。
まとめ
Service Workerの登録方法を学びました。
'serviceWorker' in navigatorで機能を検出します。register(url, { scope })はPromiseを返します。- スコープのデフォルトはスクリプトのディレクトリであり、HTTPSが必要です。
- Service Worker内で
install、activate、fetchを処理します。
次は、Cache APIです。
よくある質問
「Service Worker を登録する」レッスンは無料ですか？
はい。「Service Worker を登録する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「Service Worker を登録する」で何を学びますか？
Service Worker をインストールして有効化します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Service Worker を登録する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Service Worker を登録する
- Cache API
- キャッシュ戦略
- バックグラウンド同期と更新