ServiceWorkerContainer.register()

ServiceWorkerContainer インターフェイスの register() メソッドは、所与の scriptURLServiceWorkerRegistration を作成または更新します。

成功した場合、サービスワーカー登録は、提供されたスクリプト URL(scriptURL)をスコープscope)に結び付け、その後スコープをナビゲーションでの照合に使用します。 このメソッドは、制御されたページから無条件に呼び出すことができます。 つまり、アクティブな登録があるかどうかを最初に確認する必要はありません。

スコープの意味と使用法についてはしばしば混乱があります。 サービスワーカーは自身の場所よりも広いスコープを持つことはできないため、デフォルトよりも狭いスコープが必要な場合にのみ、scope オプションを使用してください。

構文

serviceWorkerContainer.register(scriptURL, options)
  .then(function(serviceWorkerRegistration) { ... });

パラメーター

scriptURL
サービスワーカースクリプトの URL。 登録されたサービスワーカーファイルには、有効な JavaScript の MIME タイプが必要です。
options Optional
登録オプションを含むオブジェクト。 現在利用可能なオプションは次のとおりです。
  • 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('サービスワーカーをサポートしていません。');
}

仕様

仕様 状態 コメント
Service Workers
ServiceWorkerContainer: register の定義
草案 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
register
実験的
Chrome 完全対応 40Edge 完全対応 17
完全対応 17
完全対応 16
無効
無効 From version 16: this feature is behind the Enable service workers preference.
Firefox 完全対応 44
補足
完全対応 44
補足
補足 Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE 未対応 なしOpera 完全対応 27Safari 完全対応 11.1WebView Android 完全対応 40Chrome Android 完全対応 40Firefox Android 完全対応 44Opera Android 完全対応 27Safari iOS 完全対応 11.3Samsung Internet Android 完全対応 4.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。