web-dev-qa-db-ja.com

serviceWorkerを登録する際の404エラー

Service Workerを登録しようとすると、次のエラーが表示されます。

ServiceWorkerの登録に失敗しました:スクリプトを取得するときに、不正なHTTP応答コード(404)がgwreceivedされました。

私はionicで作業していますが、これはapp.jsで持っているものです:

   if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      //registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  }else {
    console.log('No service-worker on this browser');
  }

ディレクトリには、同じフォルダーのapp.jsのすぐ隣にservice-worker.jsファイルがあります。

Ubuntuデスクトップで最新のchromeバージョンを使用します。

19
George Cscnt

_service-worker.js_と同じディレクトリに_app.js_があると言いますが、.register()に渡されるURLはHTMLドキュメントのパスに関連しています。 _service-worker.js_ファイルが、表示中のページに対応する_.html_ファイルと同じディレクトリにあることを確認する必要があります。

51
Jeff Posnick

Service WorkerとSW.jsを登録しようとしているHTMLドキュメントは、同じディレクトリにある必要があります。

enter image description here

8
Hitesh Sahu

サービスワーカーとindex.htmlファイルは共通ディレクトリにある必要があります。

2
Abhishek Jha

正しいパスをnavigator.serviceWorker.registerに渡すだけでよく、必ずしもHTMLファイルと同じである必要はありません。

たとえば、私のservice-worker.jsはアプリのScriptsフォルダーにあるため、次のようにnavigator.serviceWorker.registerでパス「/Scripts/service-worker.js」を渡す必要がありました。

navigator.serviceWorker.register('/Scripts/service-worker.js')
2
Diego Cotini

〜を使用して、ソースがルートディレクトリを検索するように設定してください。
このような:

 navigator.serviceWorker.register('~service-worker.js')
0
user3423593