加载远程 Service Worker，以在不同的域中运行？

Question

我正在尝试将 Service Worker 放在网站上，并且想从 CDN 加载 Service Worker 脚本。但是，当我从不同的域加载服务工作线程时，出现以下错误。

ServiceWorker DOMException: 无法注册 ServiceWorker: 提供的 scriptURL (' https://cdndomain.com ') 的来源与当前来源 (' http://mydomain ')不匹配

有没有办法从 CDN 加载 Service Worker？我见过很少有推送通知服务这样做，我们可以使用 eval 在本地执行 Service Worker js 吗？

有什么解决方法吗？谢谢

这是我当前的代码的样子

 if (navigator.serviceWorker) {
   console.log("ServiceWorkerssupported");

   navigator.serviceWorker.register('https://cdn.com/sw.js', {
     scope: './'
   })
   .then(function(reg) {
     console.log("ServiceWorkerstered", reg);
   })
   .catch(function(error) {
     console.log("Failedegister ServiceWorker", error);
   });
}

Answer 1

Service Worker 必须来自同一域 - 因为 Service Worker 文件的位置非常重要。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ',    registration.scope);
  }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
  });
}

Register 方法的一个微妙之处是 Service Worker 文件的位置。在这种情况下，您会注意到服务工作线程文件位于域的根目录下。这意味着 Service Worker 的范围将是整个源。换句话说，该服务工作人员将接收该域上所有内容的获取事件。如果我们在 /example/sw.js 注册 Service Worker 文件，那么 Service Worker 将只能看到 URL 以 /example/ 开头的页面（即 /example/page1/、/example/page2/）的 fetch 事件。

您可以使用 php 脚本作为代理从其他地方加载它。