サービスワーカーは、デフォルトでアプリケーションのルートに存在する必要があります。既定の場所以外の場所にサービスワーカーを登録するには、次のコードを使用します。
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
.then(function(reg) {
// registration worked
console.log('Registration succeeded. Scope is ' + reg.scope);
}).catch(function(error) {
// registration failed
console.log('Registration failed with ' + error);
});
}
From MDN 、
- 外側のブロックは、1つを登録しようとする前に必ずサービス従事者がサポートされていることを確認するために、特徴検出テストを実行します。
- 次に、我々は我々のアプリ内に存在するだけではJavaScript ファイルであり、このサイトのサービスワーカーを、(注意これは へのファイルのURLの相対的な起源ではなく、JSで登録することServiceWorkerContainer.register()関数を使用しますそれを参照するファイル)
- scopeパラメータはオプションで、サービスワーカーが制御するコンテンツのサブセットを指定するために使用できます。 このケースでは、 '/ sw-test /'を指定しました。これは、アプリの起源のすべてのコンテンツ を意味します。省略すると、デフォルトでは の値になりますが、ここでは説明のために指定しています。
- .then()promise関数は、成功のケースを約束構造に連鎖させるために使用されます。約束が正常に解決されると、コード内に コードが実行されます。
- 最後に、約束が拒否された場合に実行される最後に.catch()関数を連鎖します。
これは、ワーカーコンテキストで実行されるサービスワーカーを登録するため、 にはDOMアクセスがありません。通常のページの外側にあるサービスワーカー のコードを実行して、ロードを制御します。