サービスワーカーの登録状態を確認したい場合、`ServiceWorkerContainer.getRegistration()`メソッドを使用します。このメソッドを使うことで、特定のスコープに登録されているサービスワーカーの情報を取得できます。

getRegistration()の基本的な使い方

// サービスワーカーの登録状態を確認
navigator.serviceWorker.getRegistration()
  .then(function(registration) {
    if (registration) {
      console.log('サービスワーカーが登録されています');
      console.log(registration);
    } else {
      console.log('サービスワーカーは登録されていません');
    }
  })
  .catch(function(error) {
    console.log('エラーが発生しました:', error);
  });

特定のスコープのサービスワーカーを取得する

スコープを指定して特定のサービスワーカーを取得することもできます：

// スコープを指定してサービスワーカーを取得
navigator.serviceWorker.getRegistration('/app/')
  .then(function(registration) {
    if (registration) {
      console.log('指定したスコープのサービスワーカーが見つかりました');
    }
  });

全てのサービスワーカーを取得する

登録されている全てのサービスワーカーを取得する場合は、`getRegistrations()`メソッドを使用します：

navigator.serviceWorker.getRegistrations()
  .then(function(registrations) {
    console.log('登録されているサービスワーカーの数:', registrations.length);
    registrations.forEach(function(registration) {
      console.log('スコープ:', registration.scope);
    });
  });

よくあるエラーと解決方法

1. セキュリティエラー

HTTPS環境でないと動作しない場合があります。ローカル開発時は`localhost`での実行をお試しください。

// エラーハンドリングの例
try {
  const registration = await navigator.serviceWorker.getRegistration();
  // 処理
} catch (error) {
  if (error.name === 'SecurityError') {
    console.log('セキュリティエラー: HTTPSで実行してください');
  }
}

2. ブラウザ非対応

サービスワーカーに対応していないブラウザでの実行時のエラー処理：

if ('serviceWorker' in navigator) {
  // サービスワーカー関連の処理
} else {
  console.log('このブラウザはService Workerに対応していません');
}

実践的な使用例

サービスワーカーの状態確認と更新処理を組み合わせた例：

async function checkAndUpdateServiceWorker() {
  try {
    const registration = await navigator.serviceWorker.getRegistration();
    if (registration) {
      // 更新確認
      await registration.update();
      console.log('サービスワーカーを更新しました');
    } else {
      // 新規登録
      await navigator.serviceWorker.register('/sw.js');
      console.log('サービスワーカーを新規登録しました');
    }
  } catch (error) {
    console.error('エラーが発生しました:', error);
  }
}

まとめ

  • `getRegistration()`は特定のサービスワーカーの登録状態を確認できる
  • スコープを指定して特定のサービスワーカーを取得可能
  • `getRegistrations()`で全ての登録済みサービスワーカーを取得できる
  • エラーハンドリングとブラウザ対応チェックは必須

サービスワーカーの適切な管理は、PWAの実装やオフライン機能の提供に重要です。`getRegistration()`メソッドを活用することで、効果的なサービスワーカーの管理が可能になります。