为什么我的服务人员看到“错误 - 只允许安全起源”？

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

来自Service Worker FAQ：

  

问：我收到有关＆＃34的错误消息;只允许安全来源＆＃34;。为什么？

     

A：服务工作人员只能使用＆＃34;安全起源＆＃34; （基本上是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 2

尝试使用 http://127.0.0.1:8080本地托管 代替 http://192.168.29.53:8080

Answer 3

您可以在注册服务工作者之前检查协议， location.protocol === 'https:' && serviceWorker.register('service-worker.js')

Answer 4

镀铬类型chrome://flags

搜索“安全来源”

然后启用，重新启动Chrome。