Next-pwa: Integrate with another 3rd party service worker

[flamedmg]

Could you please advice how to integrate 3rd party service worker for web push into next-pwa enabled website?

[shadowwalker]

Have you checkout this example: https://github.com/shadowwalker/next-pwa/tree/master/examples/web-push

Is this what you need?

[flamedmg]

@shadowwalker apparently no. I tried to use it in few ways. Put there 3rd party code and try to import their js, but it doesn't work.
Here is integration i'm talking about. https://documentation.onesignal.com/docs/onesignal-service-worker-faq#integrating-multiple-service-workers I found that most 3rd parties are not flexible at all in integration with other service workers. Could you please advice how i can merry them both?!

[LucasMallmann]

Hey, @flamedmg this might be a late answer, but anyway.

In order to integrate the next-pwa service worker with the OneSignal service worker, all you have to do is to import your service worker on the top of your OneSignalSDKWorker.js file.

But you have to keep in mind that you must register the OneSignalSDKWorker file, and not the next-pwa service worker. Let me show u an example:

// In your OneSignalSDKWorker.js and OneSignalSDKUpdaterWorker.js
// @see https://documentation.onesignal.com/docs/onesignal-service-worker-faq#integrating-multiple-service-workers
importScripts(`${self.origin}/sw.js`); // this is your custom service worker generated by next-pwa
importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');

// next.config.js
const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')

module.exports = withPWA({
  pwa: {
    dest: 'public',
    runtimeCaching,
    register: false // you have to keep it false in order to register the onesignal sw.
  },
})

// _app.js file or `index.js` page. Whatever you want to register your sw.
function App() {
  useEffect(() => {
    if (navigator.serviceWorker) {
      navigator.serviceWorker.register(
          `${basePath}/OneSignalSDKWorker.js`
      ).then(reg => console.log(reg));
    }
  }, [])

  return (...)
}

[shadowwalker]

You might want checkout the option importScripts in pwa config as well.

Reference: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.GenerateSW#GenerateSW