Почему я вижу "Ошибка - разрешены только безопасные источники" для моего работника службы?

Question

Почему при попытке добавить сервисного работника на страницу моего прогрессивного веб-приложения в консоли браузера отображается следующая ошибка?

ERROR "Uncaught (in promise) DOMException: Only secure origins are allowed

Код JS:

(function () {
    'use strict';

    // TODO add service worker code here
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
            .register('service-worker.js')
            .then(function () {
                console.log('Service Worker Registered');
            });
    }
})();

Answer 1

Попробуйте использовать http://127.0.0.1:8080/ для локального хостинга вместо http://192.168.29.53:8080/

Answer 2

От сервисного работника FAQ:

Q: Я получаю сообщение об ошибке "Разрешены только безопасные источники". Зачем?

О: Сервисные работники доступны только для "защищенных источников" (в основном, сайтов HTTPS) в соответствии с политикой предпочитать безопасные источники для новых мощных функций. Однако http://localhost/ также считается безопасным источником, поэтому, если вы можете, разработка на localhost - это простой способ избежать этой ошибки.

Вы также можете использовать --unsafely-treat-insecure-origin-as-secure флаг командной строки. Этот флаг должен сочетаться с --user-data-dir флаг. Например:

$ ./chrome --user-data-dir=/tmp/foo --unsafely-treat-insecure-origin-as-secure=http://your.insecure.site

Если вы хотите проверить на https://localhost/ с самозаверяющим сертификатом, выполните:

$ ./chrome --allow-insecure-localhost https://localhost

Вы также можете найти --ignore-certificate-errors флаг полезен.

Answer 3

В типе хром chrome://flags

поиск "безопасное происхождение"

затем включите, перезапустите Chrome.

Answer 4

Вы можете проверить протокол перед регистрацией работника сервиса, как это, location.protocol === 'https:' && serviceWorker.register('service-worker.js')

Answer 5

1. введите URL

   chrome://flags/#unsafely-treat-insecure-origin-as-secure

2. Введите URL в текстовое поле

3. Выберите «Включено» в опции выбора, посмотрите на изображение, чтобы увидеть детали.