ServiceWorkerContainer
インターフェイスの register()
メソッドは、所与の scriptURL
の ServiceWorkerRegistration
を作成または更新します。
成功した場合、サービスワーカー登録は、提供されたスクリプト URL(scriptURL
)をスコープ(scope
)に結び付け、その後スコープをナビゲーションでの照合に使用します。 このメソッドは、制御されたページから無条件に呼び出すことができます。 つまり、アクティブな登録があるかどうかを最初に確認する必要はありません。
スコープの意味と使用法についてはしばしば混乱があります。 サービスワーカーは自身の場所よりも広いスコープを持つことはできないため、デフォルトよりも狭いスコープが必要な場合にのみ、scope
オプションを使用してください。
構文
serviceWorkerContainer.register(scriptURL, options) .then(function(serviceWorkerRegistration) { ... });
パラメーター
scriptURL
- サービスワーカースクリプトの URL。 登録されたサービスワーカーファイルには、有効な JavaScript の MIME タイプが必要です。
options
Optional- 登録オプションを含むオブジェクト。 現在利用可能なオプションは次のとおりです。
戻り値
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 の定義 |
草案 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser