ServiceWorkerContainer.register()

scriptURL

サービスワーカースクリプトの URL。 登録されたサービスワーカーファイルには、有効な JavaScript の MIME タイプが必要です。

options 省略可

登録オプションを含むオブジェクト。 現在利用可能なオプションは次のとおりです。

• scope: サービスワーカーの登録スコープを定義する URL を表す USVString。 つまり、サービスワーカーが制御できる URL の範囲です。 これは通常、相対 URL です。 これは、アプリケーションのベース URL を基準にしています。 デフォルトでは、サービスワーカー登録の scope 値は、サービスワーカースクリプトが配置されているディレクトリになります。 動作の詳細については、例のセクションを参照してください。

ServiceWorkerRegistration オブジェクトで解決する Promise。

ここで説明する例は、サービスワーカーのスコープがページにどのように適用されるかをよりよく理解するために、まとめて理解する必要があります。

次の例では、scope（を省略した場合）のデフォルト値を使用しています。 この場合、サービスワーカーは example.com/index.html とその下のページ（example.com/product/description.html など）を制御します。

if ('serviceWorker' in navigator) {
  // デフォルトのスコープを使用して、
  // サイトのルートでホストされるサービスワーカーを登録します。
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    console.log('サービスワーカー登録成功:', registration);
  }, /*catch*/ function(error) {
    console.log('サービスワーカー登録失敗:', error);
  });
} else {
  console.log('サービスワーカーをサポートしていません。');
}

次のコードは、サイトのルートにあるページに含まれている場合、上記の例とまったく同じページに適用されます。 スコープが含まれている場合は、ページの場所をベースとして使用することに注意してください。 あるいは、このコードが example.com/product/description.html のページに含まれている場合、'./' のスコープは、サービスワーカーが example.com/product の下のリソースにのみ適用されることを意味します。 example.com のすべてに適用されるサービスワーカーを example.com/product/description.html で登録する必要がある場合は、上記のようにスコープを省略します。

if ('serviceWorker' in navigator) {
  // より限定的なスコープを使用して、
  // サイトのルートでホストされるサービスワーカーを登録します。
  navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
    console.log('サービスワーカー登録成功:', registration);
  }, /*catch*/ function(error) {
    console.log('サービスワーカー登録失敗:', error);
  });
} else {
  console.log('サービスワーカーをサポートしていません。');
}