ServiceWorkerを解除したら再登録できなくなった

前提条件

JSはあまり得意ではなく、Service Worker勉強中です

環境

Windows10
Firefox Developer Edition 85.0b9 (64 ビット)

事象

以下のコードを実行しServiceWorkerをFirefoxに登録いたしました。
実際に開発者コンソールの「アプリケーション」タブで、Service Workerが登録されたことを確認済みです。

※「service-worker.js」という外部ファイルに保存してあります

window.addEventListener('load', async () => {
    if ('serviceWorker' in navigator) {
        window.sw = await navigator.serviceWorker.register('/service-worker.js', { scope: '/' });
    }
});

ここで開発者コンソールの「アプリケーション」タブに「解除」ボタンが有り試しに押してしまいました。
その後再度ServiceWorkerのJSを実行するサイトにアクセスしたところ、

Uncaught (in promise) TypeError: ServiceWorker script at http://localhost:5000/service-worker.js for scope http://localhost:5000/ threw an exception during script evaluation.

というエラーがコンソールに出て、ServiceWorkerが登録できなくなってしまいました。

質問

ServiceWorkerを再登録するにはどの様にすればよろしいでしょうか？
知見がなくわかりません。

ご存じの方がいらっしゃいましたら、ご教示頂けますと幸いです。
よろしくお願いいたします。

dameo

2021/01/20 21:57

サービスワーカーの使い方はこの辺にあります。 https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers regeisterメソッドの定義はここです。 https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerContainer/register 見れば分かるとおり、registerの戻り値はPromiseなので、呼び出しっぱなしだと結果を受け取ることができません。メッセージにあるとおり、Promiseに紐づく処理中にexceptionが発生したのにcatchされてないと怒られています。何が起きているのか知るために、まずはちゃんとPromiseを処理してください。

行動規範の内容に同意します

回答1件

自己解決

window→selfで解決しました。

selfってなんだ…？

    self.addEventListener('load', async () => {
        if ('serviceWorker' in navigator) {
            window.sw = await navigator.serviceWorker.register('/service-worker.js', { scope: '/' });
        }
    });

（補足で頂いたpromis部分は申し訳ありません、よくわかりませんでした…）

投稿2021/01/21 02:54

nnahito

総合スコア2004