Angular 7 - сервисный работник не зарегистрирован

Я сделал все, как написано в " https://angular.io/guide/service-worker-getting-started ", чтобы сделать мое приложение PWA.

Используются именно эти команды:

ng add @angular/pwa

npm install http-server -g

ng build --prod

http-server -p 8080 -c-1 dist

Затем я открыл этот URL на Chrome (в инкогнито)

http://127.0.0.1:8080

Когда я открываю инструменты для разработчиков (f12)> Приложения> Сервисные работники, сервисный работник недоступен, и веб-сайт не работает, когда я отключаюсь от сети.

Дополнительная информация о моем угловом приложении:

package.json: (самые важные из них)

"@angular/core": "^7.0.2",
"@angular/pwa": "^0.10.6",
"@angular/service-worker": "^7.0.4",
"@angular-devkit/build-angular": "^0.10.6",
"@angular/cli": "^7.0.6",

Ответ 1

Похоже, что настройка для работника сервиса не работает для @angular/cli @7.1.4:

В качестве временного решения вы можете зарегистрировать его вручную, изменив файл src/main.ts (После исправления вы можете удалить регистрацию работника сервиса вручную.):

.....

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  if ('serviceWorker' in navigator && environment.production) {
    navigator.serviceWorker.register('/ngsw-worker.js');
  }
}).catch(err => console.log(err));

PS: проблема с Github создана: https://github.com/angular/angular-cli/issues/13351

PS: Github выпуск № 2 создан: https://github.com/angular/angular-cli/issues/15025

Ответ 2

Артемизийское решение работает, но это взлом, и вы не уверены, будет ли оно работать в будущем.

Лучшее решение

Как упомянул MortimerCat в комментариях, это стало доступно только в Angular v8, но его трудно найти: кажется, что существует "registrationStrategy", которое связано с угловым ожиданием с регистрацией, пока ваше приложение не станет "стабильным". Теперь, если у вас есть куча вещей, загружаемых во время запуска вашего приложения (проверка подлинности и создание подключений к веб-сокетам), Angular, очевидно, думает, что ваше приложение никогда не будет стабильным.

К счастью, вы можете изменить регистрационную стратегию на registerImmediately следующим образом:

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerImmediately' }),

Смотрите документацию здесь

После этого загрузчик будет загружен независимо от состояния вашего приложения. Также есть возможность передать наблюдаемое, так что вы можете загрузить его, когда считаете нужным.

Ответ 3

Я думаю, что вы выполнили шаги и инструкции, чтобы установить необходимые библиотеки из документации. Для имитации проблемы с сетью: Инструменты > Инструменты разработчика > Вкладка "Сеть" > Установите флажок "Не в сети". Теперь приложение не имеет доступа к сетевому взаимодействию. Если вы посмотрите на вкладку Сеть, вы можете убедиться, что работник службы активен.