PWA向けService Workerサポートの検出

Service Worker検出

Service Workerはプログレッシブウェブアプリ（PWA）の基盤であり、オフラインキャッシング、プッシュ通知、バックグラウンド同期を可能にします。ブラウザとサーバーの間のプログラム可能なネットワークプロキシとして機能します。

検出

const hasServiceWorker = 'serviceWorker' in navigator;

登録パターン

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

要件

• HTTPS必須: Service Workerはセキュアオリジン（HTTPS）または開発用のlocalhostでのみ動作します。
• 同一オリジン: Service Workerファイルはページと同じオリジンから提供する必要があります。
• スコープ: Service Workerはそのスコープ内（登録されたディレクトリ）のページを制御します。
• ライフサイクル: Service Workerはinstall、activate、fetchの各フェーズを独自の更新サイクルで経ます。

関連API

Service Workerは複数の依存APIを有効にします：

• Cache API (caches) オフラインストレージ用
• Push API プッシュ通知用
• Background Sync 遅延リクエスト用
• Navigation Preload ページ読み込みの高速化用