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

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

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');
            });
    }
})();

ОТВЕТЫ

Ответ 1

Из Часто задаваемые вопросы об обслуживающем персонале:

В: Появляется сообщение об ошибке "Разрешено только безопасное происхождение". Почему?

A: Работники службы доступны только для "безопасного происхождения" (в основном, сайтов 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.

Ответ 2

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