How would I go about combining the XDN service worker with an automatically generated one?

Edgio Q&A
, ,
1

Hey there,

I’m seemingly unable to figure out on how to go about this. Basically, I’m running nuxtjs with the @nuxtjs/pwa module where I have the workbox plugin enabled. This automatically generates a perfect service worker for the related web app it’d be running for. When adding the module @xdn/nuxt/module to the buildModules this will generate another workbox service worker and both of these will start interfering. I tried disabling features on both sides, adding the prefetch module to a separate script and import that into the nuxt pwa module but none of these attempts worked.

My question now is how would I go about combining these so they don’t interfere each other but I’d be still able to benefit from the XDN service worker configuration (e.g. prefetching)?

In addition to that I’d like to point out a small issue I’m facing when developing locally. When restarting the local XDN development environment (ctrl + c, xdn:dev) I’ll end up being stuck with a port (3001) seemingly being used or refusing connections although it isn’t.

Error: connect ECONNREFUSED 127.0.0.1:3001
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16) {
  errno: -4078,
  code: 'ECONNREFUSED',
  syscall: 'connect',
  address: '127.0.0.1',
  port: 3001
}
 ERROR  Command failed with exit code 1.

This prohibits me from trying out live configurations and forced me to use the old nuxt development environment. A follow up on that would be awesome as well!

Thanks,
Have a great day,
Cheers,
~ rxsto

2

That’s odd, I’ve never run into that. The xdn cli actually uses kill-port to kill any processes running on the ports that it needs when you run xdn dev. Maybe just try using kill-port directly?

Regarding the service worker. The xdn nuxt module just does 3 things:

1.) Adds the devtools
2.) Extends the nuxt build to build the service worker from sw/service-worker.js
3.) Injects code into the browser bundle to install the service worker from (2) when your app loads in the browser.

Since you’re already doing (2) and (3) with another plugin, you can just add the Prefetcher class to your existing service worker. For example:

import { Prefetcher } from '@xdn/prefetch/sw'

// your existing service worker code here

new Prefetcher().route()

If you want to keep the devtools, you could just import @xdn/devtools/widget/install somewhere in your browser code rather than using our nuxt module to add it.

BTW, you can see the source for the module here: