Nuxt PWA module no longer compatible with Nuxt One Signal module (with workaround)

[benjaminrichardson-ms]

Version

v3.0.0-beta.19

Reproduction link

https://jsbin.com/towacag/

Steps to reproduce

Install both "@nuxtjs/onesignal": "^3.0.0-beta.16" and "@nuxtjs/pwa": "^3.0.0-beta.20"

Setup your nuxt.config.js to load both modules.

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

Run your application

What is expected ?

The One Signal service worker is meant to combine the default sw.js service worker in workbox with the One Signal SW. If this works as expected, the browser should run OneSignalSDKWorker.js as the worker, which subsequently loads sw.js and https://cdn.onesignal.com/sdks/OneSignalSDK.js.

What is actually happening?

Even though @nuxtjs/onesignal is running first in the modules, because they are both async the order in which they run can get muddled up. Because of the change to grouping the option for @nuxtjs/pwa, in beta 17 under the pwa: {} object, and a flawed method that is meant to ensure backwards compatibility, the One Signal and PWA modules do not work together.

As you can see in the screen shots, the order in modules is correct, but when the modules run, the pwa module tries to get the modified this.options from the onesignal module, before it has had a chance to run.

Specifically this line is undefined when the pwa module is collecting up all of the options from the global options object.
this.options.workbox.swURL = 'OneSignalSDKWorker.js'

This causes the wrong worker to load and One Signal is never properly setup. Because the onesignal config cannot be passed to the workbox config, the default sw.js is still loaded as the service worker, rather than OneSignalSDKWorker.js

Code in onesignal module that is meant to run first

Code in PWA module that actually runs first, thus missing the modifications from onesignal module

Additional comments?

Splitting out of the One Signal module is a good idea, but the fact that both of the most recent versions of these modules no longer work together is quite annoying (wasted many hours on nothing to figure this out).

To work around this, at a minimum you need to have the following in your PWA configuration in nuxt.config.js.

  pwa: {
    workbox: {
      swURL: 'OneSignalSDKWorker.js'
    },
    manifest: {
      gcm_sender_id: '482941778795'
    }
  },

By doing this, the part of the config that are supplied by the one signal module are already part of the PWA module config. Then the order in which they modules run will no longer matter.

_{This bug report is available on Nuxt community (#c224)}

[ghost]

Thanksç for yoủ sharing, but Can you explain what is the '482941778795' mean in gcm_sender_id: '482941778795'?