角2 - サービスワーカーが見つかりません - 悪いHTTP応答コード（404）

Question

私はを使用して、Firebaseホストされた角度2アプリのサービスワーカーを生成しました。

エラー：

Service Worker registration failed: TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. 

構造

src- 
    app-- 
    index.html  
service-worker.js 
sw-precache-config.js 

SW-プリキャッシュ-config.jsの

module.exports = { 
    navigateFallback: '../index.html', 
    stripPrefix: 'dist', 
    root: 'dist/', 
    staticFileGlobs: [ 
    'dist/index.html', 
    'dist/**.js', 
    'dist/**.css' 
    ] 
}; 

index.htmlを

<script> 
    if ('serviceWorker' in navigator) { 
     console.log(navigator.serviceWorker); 

     navigator.serviceWorker.register('service-worker.js').then(function (registration) { 
     console.log('Service Worker registered'); 
     }).catch(function (err) { 
     console.log('Service Worker registration failed: ', err); 
     }); 
    } 
    </script> 

Answer 1

あなたのサービスワーカーの登録コードは私にとってうまく感じます。プロジェクト構造に問題がある可能性があります。ng buildスクリプトを実行した後、distフォルダとしてルートを記述したので、service-worker.jsファイルはdistフォルダになければなりません。 。あなたのスクリプトオブジェクトにを追加してください。実行： ng build --prod --aot、npm run precache。あなたのservice-worker.jsファイルがdistフォルダにあります。角度コンパイラがアプリケーションコードをjsファイルにコンパイルして、 distフォルダを作成したら、distフォルダからアプリケーションを提供する必要があります。しかし、デフォルトのngサービスはそれをサポートしていません。http-serverを使用することをお勧めします。 npm install http-server -g .The http-server ./dist -o。これにより、既定のブラウザでアプリケーションが開かれます。