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

Question

当我尝试在渐进式Web应用程序页面上添加服务工作程序时,为什么浏览器控制台会显示以下错误？

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:

问:我收到有关"仅允许安全来源"的错误消息.为什么？

答:服务工作者只能获得"安全起源"(基本上是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

镀铬类型chrome://flags

搜索“安全来源”

然后点击启用，重新启动chrome。

Answer 3

尝试使用 http://127.0.0.1:8080进行本地托管而不是 http://192.168.29.53:8080