Angular 2 - Сервисный работник не найден - Неверный код ответа HTTP (404)

Question

Я использовал sw-precache создать работника службы для Firebase Размещено приложение Angular 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

Ваш регистрационный код работника сервиса мне подходит. Проблема может быть в структуре проекта. Так как вы упомянули корень как папку dist, ваш файл service-worker.js должен находиться в папке dist после запуска ng build скрипт. добавлять "precache": "sw-precache --verbose --config=sw-precache-config.js" на ваш package.json Скрипты объекта. Затем запустите:ng build --prod --aot,затем npm run precacheТеперь ваш файл service-worker.js будет находиться в папке dist. Так как угловой компилятор скомпилировал код вашего приложения в файлы js и сохранил его в папке dist, теперь вы должны обслуживать свое приложение из папки dist. по умолчанию ng serve не поддерживает это. Я предлагаю вам использовать http-server,npm install http-server -g.Затем http-server ./dist -oЭто откроет ваше приложение в браузере по умолчанию.