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时，发生以下错误：

获取脚本时收到错误的HTTP响应代码（404）。   sw.js？1557093232129：1未捕获的DOMException：无法执行

'WorkerGlobalScope'上的'importScripts'：位于以下位置的脚本   “ http://localhost:3333/_nuxt/workbox.dev.4c4f5ca6.js”加载失败。       在http://localhost:3333/sw.js?1557093232129:1:1       在http://localhost:3333/OneSignalSDKWorker.js?appId=xxxxxxxx:1:1   （匿名）@ sw.js？1557093232129：1

ServiceWorkerManager.js：371 [Service Worker安装]安装   服务工作者失败TypeError：无法注册ServiceWorker：   ServiceWorker脚本评估失败

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

Answer 1

我们的服务工作者OneSignalSDKWorker.js和OneSignalSDKUpdaterWorker.js会覆盖在最高（站点根）服务工作者范围中注册的其他服务工作者。解决方案是使用importScripts（）将所有其他服务工作程序脚本合并到我们的服务工作程序脚本中，并注册合并的服务工作程序而不是原始工作程序。

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

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

请同时修改OneSignalSDKWorker.js和OneSignalSDKUpdaterWorker.js，以导入其他服务工作者脚本，例如：

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

我们建议您采用上述方法，而不是将服务工作者导入另一个文件，因为我们的Web SDK会替换在根范围内注册的其他工作者。

此外，请确保修改站点的代码以注册OneSignalSDKWorker.js，而不是您自己的工作程序。您可以使用以下代码执行此操作：

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

有关service workers的信息

Answer 2

您的配置应如下所示：

  oneSignal: {
    cdn: true,
    OneSignalSDK: 'https://cdn.onesignal.com/sdks/OneSignalSDK.js',
    init: {
      appId: 'xxxxxxxxxxx',
      allowLocalhostAsSecureOrigin: true,
      welcomeNotification: {
          disable: true
      }
    },
    importScripts: ["/sw.js"]
  }

无法在“ WorkerGlobalScope”上执行“ importScripts”

2 个答案: