Как запустить сервисного работника локально с Angular

Question

Я следую лучшей практике angular, чтобы сделать PWA. После создания производственной сборки (ng build --prod --aot) я также запускаю сервисного работника из dist на localhost: http-server -p 8080 -c-1 dist Когда я пытаюсь синхронизировать рабочий с моим Angular, используя:

navigator.serviceWorker.ready.then(function(swRegistration) {

            console.log('swReady');
});

Ничего не происходит, и кажется, что SW не связывается с Angular. Работа с удаленным сервером (загрузка dist) работает. Так что, похоже, проблема в том, что dist не работает с ng serve. Что я делаю неправильно?

Answer 1

Вы не можете обслуживать свой проект Angular с сервисным работником через ng serve, поскольку в документации для сервисных работников указано, что для него требуется https . Единственный способ запустить его без https / на сервере - это использовать ng build и локально запустить http-сервер , чтобы протестировать ваш проект.

Поскольку ng serve не работает с работниками сферы обслуживания, вы должны использовать отдельный HTTP-сервер для локального тестирования вашего проекта.

Answer 2

В Chrome вы можете включить флаг для обработки определенного хоста, как если бы он был безопасным источником, позволяя работникам сферы обслуживания работать:

./chrome --unsafely-treat-insecure-origin-as-secure=http://your.insecure.site:8080

Чтобы запустить Chrome из терминала, вам необходимознать исполняемый файл.Это будет зависеть от системы.Для MacO:

open /Applications/Google\ Chrome.app/ --args  --unsafely-treat-insecure-origin-as-secure=http://your.insecure.site:8080

Answer 3

Если вы хотите использовать другие браузеры, которые не поддерживают ответ TimKVU, тогда решение состоит в том, чтобы использовать ngrok (https://ngrok.com)

Он устанавливает безопасный туннель к любому серверу, который вы используете. Вы запускаете это с:

нгрок http 4200

Просто подключитесь к домену, показанному на экране.