无法在 Firefox 中注册 Service Worker，操作不安全

Question

我目前正在将 chrome 扩展移植到 Firefox，当我尝试注册 service worker 时，我得到：DOMException: The Operation is insecure

我尝试查找 cookie 设置，但是，它没有设置为“在浏览器关闭之前保留”。 我还尝试向本地主机添加证书

我尝试通过两个都注册它

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./firebase-messaging-sw.js', { scope: '/' }).then(function(reg) {

    if(reg.installing) {
      console.log('Service worker installing');
    } else if(reg.waiting) {
      console.log('Service worker installed');
    } else if(reg.active) {
      console.log('Service worker active');
    }
  }).catch(function(error) {
    console.log('Registration failed with ' + error);
  });
}

并使用

const runtime = require('serviceworker-webpack-plugin/lib/runtime');

if ('serviceWorker' in navigator) {
    const registration = runtime.register();
}

Answer 1

当我尝试将文件添加到我的项目目录之外的缓存时，我刚刚遇到了这个问题。 有趣的是，我能够使用先前注册的缓存获取文件，但无法重新注册或重新安装。

解决方案是调整在为我的ServiceWorker.js文件提供ServiceWorker.js时设置的Service-Worker-Allowed标头。 以前，它仅设置为项目 URL/文件夹，但需要对其进行扩展，使其包含要缓存的文件的所有父文件夹。

如果你对如何设置这个头感到困惑，我使用了一个 PHP 文件作为 ServiceWorker 文件； 这允许我设置必要的标头，然后将 ServiceWorker 文件放在我服务器上的任何位置（尽管在下面的示例中，脚本与 PHP 文件位于同一文件夹中）。

索引.php

<?php
header("Service-Worker-Allowed: https://www.yoursite.com/");
header("Content-Type: application/javascript");

echo file_get_contents("ServiceWorker.js");
?>

然后，如果您的文件在ServiceWorker文件夹中，您可以使用类似的内容注册它。

navigator.serviceWorker.register(
    'ServiceWorker/',
    {scope:"https://www.yoursite.com/"})
.then(function(reg){},function(err){});