javascript - 需要有关在域中使用多服务 worker 的信息

Question

我有一个 PWA 网站，并且有我自己的 service-worker.js 文件用于缓存。出于某些原因，我想在我的网站上使用推送通知服务。我应该知道这些问题的答案:

1) 如何在网站根目录下使用多服务 worker ？

2) 我可以使用一个 service worker 文件并在上面放两个 importscript 两个 service worker 吗？

3) 我可以使用假作用域来注册 service worker 吗？ (我的意思是使用范围，但它不在我的网站路径中。)

4) 如果我使用 importscript，我的老用户是否仍然可以使用缓存？

我尝试在网站的根目录中使用一个 service-worker 并使用 importscript 到这个 service worker 文件中，如下所示:

importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');
importScripts('service-worker.js');

我收到推送通知，一切正常，但我不知道我的旧用户缓存文件是否仍然可用？

此外，我尝试将它们都注册到作用域中，但 navigator.serviceWorker.ready (promise) 订阅始终处于 pending:

navigator.serviceWorker.register('/service-worker.js', {scope: '/fake'})
        .then((registration) => {
          console.log('ServiceWorker registration successful.', registration)
          return navigator.serviceWorker.ready
        })
        .catch(error => {
          console.error('ServiceWorker registration failed.', error)
        })

console:

navigator.serviceWorker.ready = Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "pending"
[[PromiseValue]]: undefined

Answer 1

我会尽量回答你的问题:

1) 如何在网站根目录下使用多服务 worker ？

您只能让一个服务 worker 在指定范围内按站点注册:因此只有一个在 / 范围内，但是您可以在站点的每个范围内添加一个服务 worker (即:一个在/ 和一个在 /user 上)但如果需要，您可以将 2 个 service worker 合并为一个。

2) 我可以使用一个 service worker 文件并在上面放两个 service worker 的两个 importscript 吗？

是的，你可以这样做，你可以放置任意数量的 eventListener，它们按声明顺序执行，但要小心，除非 javascript 中的 require，所有脚本都使用 importScripts() 共享相同的作用域，因此如果单个脚本共享一些变量名，它们可能会出现一些问题。

3) 我可以使用假作用域来注册 service worker 吗？ (我的意思是使用范围，但它不在我的网站路径中。)

你可以，但是软件的范围决定了它的执行上下文，所以它会加载到你的电脑/手机上，但它只会在它的范围内根据请求有效，如果你在它下面的页面上(网站.com/fake 或 website.com/fake/whateverelse)或者如果您在此范围内调用资源(website.com/fake/style.css )

4) 如果我使用 importscript，我的老用户是否仍然可以使用缓存？

这取决于您在安装 和激活 阶段所做的事情。安装新的 SW 或其新版本不会清除缓存，除非您在代码中明确地这样做。