javascript - 无法在 'importScripts' 上执行 'WorkerGlobalScope'

Question

我正在尝试在我的 pwa nuxtjs 应用程序中启用 OneSignal 通知。

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/onesignal',
    '@nuxtjs/pwa',
  ],

  oneSignal: {
    cdn: true,
    OneSignalSDK: 'https://cdn.onesignal.com/sdks/OneSignalSDK.js',
    init: {
      appId: 'xxxxxxxxxxx',
      allowLocalhostAsSecureOrigin: true,
      welcomeNotification: {
          disable: true
      }
    }
  },
  workbox: {
    dev: true,
    debug: true
  },

我收到弹出通知，当我按 Accept 时，出现以下错误:

A bad HTTP response code (404) was received when fetching the script. sw.js?1557093232129:1 Uncaught DOMException: Failed to execute

'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3333/_nuxt/workbox.dev.4c4f5ca6.js' failed to load. at http://localhost:3333/sw.js?1557093232129:1:1 at http://localhost:3333/OneSignalSDKWorker.js?appId=xxxxxxxx:1:1 (anonymous) @ sw.js?1557093232129:1

ServiceWorkerManager.js:371 [Service Worker Installation] Installing service worker failed TypeError: Failed to register a ServiceWorker: ServiceWorker script evaluation failed

我在静态文件夹中也有 sw.js 文件。在Github问题部分发现了类似的问题，但没有真正的解决方案。

Answer 1

我们的服务 worker OneSignalSDKWorker.js 和 OneSignalSDKUpdaterWorker.js 会覆盖在最顶层(站点根目录)服务 worker 范围内注册的其他服务 worker 。解决方案是使用 importScripts() 将所有其他服务 worker 脚本合并到我们的服务 worker 脚本中，并注册合并的服务 worker 而不是原始 worker 。

OneSignalSDKWorker.js 和 OneSignalSDKUpdaterWorker.js 都包含以下代码:

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

请同时修改 OneSignalSDKWorker.js 和 OneSignalSDKUpdaterWorker.js 以导入您的其他服务 worker 脚本，例如:

importScripts('https://example.com/sw.js');
importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');

我们建议使用上述方法而不是将我们的服务 worker 导入另一个文件，因为我们的 Web SDK 替换了在根范围上注册的其他 worker 。

此外，请务必修改您网站的代码以注册 OneSignalSDKWorker.js 而不是您自己的 worker。您可以使用如下代码执行此操作:

navigator.serviceWorker.register('/OneSignalSDKWorker.js');

关于 service workers 的信息