Frontend Academy · レッスン

Service Workerの登録とライフサイクル

Service Workerスクリプトを登録し、install、activate、fetchのライフサイクルイベントを理解して、skipWaitingとclients.claimを使用します。

「Service Workerの登録とライフサイクル」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Service Workerとは

Service Workerは、独立したブラウザーワーカー（メインスレッドではありません）で実行され、オリジンへのネットワーク要求を横取りするJavaScriptファイルです。オフラインPWA、プッシュ通知、バックグラウンド同期を支えるエンジンです。

Service Workerの登録

メインスクリプトから登録します。service workerにはHTTPSが必要です（localhostを除きます）。

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js', { scope: '/' })
      .then(reg => console.log('SW registered:', reg.scope))
      .catch(err => console.error('SW registration failed:', err));
  });
}

スコープ

service workerは、そのスコープ（配信元のディレクトリ）内の要求を制御します。ルートにある/sw.jsはすべてを制御します。/app/sw.jsにあるSWは/app/*だけを制御します。

ライフサイクル: install → activate → fetch

中核となるイベントは3つです。install（一度だけ実行され、キャッシュを準備）、activate（一度だけ実行され、古いキャッシュを削除）、fetch（すべての要求で実行され、キャッシュとネットワークのどちらを使うか判断）です。

// sw.js
self.addEventListener('install', (event) => {
  console.log('SW installing');
  event.waitUntil(
    caches.open('v1').then(cache =>
      cache.addAll(['/', '/index.html', '/styles.css', '/app.js'])
    )
  );
});

self.addEventListener('activate', (event) => {
  console.log('SW active');
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(keys.filter(k => k !== 'v1').map(k => caches.delete(k)))
    )
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(res => res || fetch(event.request))
  );
});

skipWaiting()

通常、更新されたSWはすべてのタブが閉じるまでアクティブ化を待機します。installハンドラー内のself.skipWaiting()は即時アクティブ化を強制します。更新は速くなりますが、古いアセットと新しいアセットが混在するリスクがあります。

self.addEventListener('install', (event) => {
  self.skipWaiting(); // activate immediately on next reload
  // ... cache setup
});

clients.claim()

アクティブ化した後も、新しいSWはそれより前に読み込まれたページを制御しません。activateハンドラー内のself.clients.claim()を使うと、すぐに制御を開始できます。

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim());
});

Service Workerの更新

ブラウザーはナビゲーションのたびに新しいsw.jsを確認します（最大24時間の経過時間）。ファイルの内容が変わると（バイト単位で異なると）、新しいSWとしてインストールされ、アクティブ化を待機します。リロードするとアクティブ化が始まります。

アプリからの更新検知

updatefoundを監視して、更新プロンプトを表示します。

navigator.serviceWorker.register('/sw.js').then(reg => {
  reg.addEventListener('updatefound', () => {
    const newSW = reg.installing;
    newSW.addEventListener('statechange', () => {
      if (newSW.state === 'installed' && navigator.serviceWorker.controller) {
        // New version ready
        showUpdateBanner(() => {
          newSW.postMessage('SKIP_WAITING');
          window.location.reload();
        });
      }
    });
  });
});

登録解除

制御不能になったservice worker（開発中の設定ミスなど）を停止するには、登録を解除します。

navigator.serviceWorker.getRegistrations().then(regs => {
  for (const reg of regs) reg.unregister();
});

ブラウザーDevTools

Chrome DevTools → Application → Service Workersでは、登録済みのSWを確認できます。登録解除、Update on reloadのシミュレーション、ライフサイクルイベントの確認も可能です。

よくある落とし穴

1) SWファイルはルートスコープまたはそれより上位に置く必要があります。2) HTTPSが必要です。3) 開発中にSWを変更した場合は、ハードリロードが必要です。4) キャッシュを無制限に増やさず、一度キャッシュした後はバージョン管理で更新します。5) POSTリクエストはキャッシュしないでください（サポートされていません）。

Workbox — 生産性向上ライブラリ

GoogleのWorkboxはライフサイクルを抽象化し、すぐに使えるキャッシュ戦略を提供します。本番環境のPWAの多くは、手作業で実装したSWコードではなくWorkboxを使用しています。

クイックチェック

service workerのinstallハンドラー内でself.skipWaiting()を実行すると、何が起こりますか？

まとめ: Service Workerのライフサイクル

オリジンへのネットワーク要求を横取りするJavaScriptワーカーです。navigator.serviceWorker.registerで登録します。ライフサイクルはinstall（キャッシュを準備）、activate（クリーンアップ）、fetch（要求を横取り）です。即時更新にはskipWaiting + clients.claimを使います。updatefoundを監視してユーザーに更新を促します。Workboxが定型コードを抽象化します。HTTPSが必要です（localhostを除きます）。

よくある質問

「Service Workerの登録とライフサイクル」レッスンは無料ですか？

はい。「Service Workerの登録とライフサイクル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Service Workerの登録とライフサイクル」で何を学びますか？

Service Workerスクリプトを登録し、install、activate、fetchのライフサイクルイベントを理解して、skipWaitingとclients.claimを使用します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「Service Workerの登録とライフサイクル」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る