$OneSignal sometimes works in a PROD environment, sometimes not, in DEV enviroment works fine

[buglavecz]

Version

v3.0.0-beta.19

Reproduction link

https://github.com/nuxt-community/pwa-module

Steps to reproduce

I was create a trusted https on localhost for testing, there working fine with OneSignal.
But, in production environment sometimes working.

If not works, then I got this error, when refresh browser:

I don't understand what is wrong?

---

I call OneSignal in mounted() hook in app layout.

this.$OneSignal.push(() => {

   this.$OneSignal.showNativePrompt();


    this.$OneSignal.isPushNotificationsEnabled((isEnabled) => {
    if (isEnabled) {
      console.log('Push notifications are enabled!')
    } else {
      console.log('Push notifications are not enabled yet.')
    }
  })
});

If I refresh many times the browser, then I got this (only in production):

What is expected ?

Every page refresh show native prompt to user.

What is actually happening?

Sometimes show, sometimes not showing native prompt.

Additional comments?

I don't understand, why works on DEV env, and why not in PROD env. :-(

Please help!!!

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

[buglavecz]

@pi0 can you help me? Thanks.

[buglavecz]

In PROD enviroment:
If I unregister Service Worker in devtools and after refresh Chrome, it is working. Again and again...
But, I no unregister service worker manually, just I refresh Chrome, again and again, then very randomly works.

In DEV environment all working fine.

[zhuharev]

Has same issue

[Galaco]

I appear to have the same/similar issue. Everything is fine on dev environment. Building for prod, OneSignal behaves correctly until notifications have been enabled. Push notifications then work until page is refreshed.

All subsequent page loads after that generates the following error OP mentioned, and notifications no longer work until clearing site data and repeating the notifications prompt process:

installWorker - SW's 'controllerchange' fired but no state change!

My config:

{
      cdn: true,
      init: {
        appId: <removed>,
        allowLocalhostAsSecureOrigin: true,
        welcomeNotification: {
            disable: true
        },
        autoResubscribe: true,
        autoRegister: false
      }
}

[icangku]

anyone?

[ajay-wohlig]

Facing the same issue

[luisjoserivera]

After experiencing the same issue I started digging.
Go to Chrome Developer Tools / Application > Service Workers
When reloading the page the service worker changes from sw.js to OneSignalSDKWorker.js and vice-versa.
It seems the process in charge of updating the service worker is getting all mixed up somewhere.
In one refresh the update installs the OneSignalSDKWorker.js which imports sw.js, but in next refresh install sw.js alone, dismissing OneSignalSDKWorker.js completely.
I'm not well seasoned around service workers, workbox etc. Someone with better knowledge could bring some light here.

[luisjoserivera]

Problem found.
According to OneSignal documentation their service worker overwrites other service workers.

To fix this '@nuxtjs/onesignal' imports sw.js (the sw created by @nuxtjs/pwa with workbox) into OneSignalSDKWorker.js as recomended by OneSignal in here.

Then it tries to set our pwa sw path to OneSignalSDKWorker.js using this.options.workbox.swURL but it should be this.options.pwa.workbox.swURL. I'm not sure if workbox options used to be placed at the top level of nuxt config but now they go under options.pwa.workbox.

This is why at first install we always get sw.js first, but OneSignalSDK.js overwrite this under the hood and on refresh our app sees it has a different service worker and overwrites it again.

I'll try to make a pull request but while it gets accepted feel free to fix this manually by addding pwa.workbox.swURL: 'OneSignalSDKWorker.js' in your nuxt-config options.