Option for dev=false to still load additional SW's from importScripts()

[lupas]

What problem does this feature solve?

When dev === false, not only the workbox module, but also other additional service-workers loaded via importScripts are not loaded.

In my case I am fine with disabling workbox in development, but I would still want all (or some of) my other service workers to be loaded in development mode.

What does the proposed changes look like?

Something like this in nuxt.config.js:

// OLD
importScripts: [
  '/my-other-sw.js',
],

// PROPOSED
importScripts: [
  {
    src: '/my-other-sw.js',
    force: true // also load in dev when dev=false
  }
],

If that makes sense I'm happy to do a PR for it.

_{This feature request is available on Nuxt community (#c206)}

[fcroce]

@lupas Hi, that's a good idea and I was investigating the same issue where I use service workers for other stuff than just caching the offline mode, so I'd like to have these scripts up and running on DEV.

Any progress on this topic so far? Thank you!

[lupas]

@fcroce
Not yet, haven't found the time to look at it unfortunately...

[fcroce]

Hi @lupas I temporarily solved the issue by creating a plugin client side only and a new service worker dedicated for DEV

Nuxt.config.js

plugins: [
    ...
    '~/plugins/core/devServiceWorker', // IMPORTANT - This creates a service worker in DEV mode
    ...
]

devServiceWorker.js

import consola from 'consola';

export default ({ isDev }) => {
  if (isDev && !process.server && 'serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('/devSw.js') // <<<===== This is your DEV service worker
      .then((registration) => {
        consola.log('Service worker registered successfully', registration.scope);
      })
      .catch((err) => {
        consola.log('Service worker registration failed, error:', err);
      });
  }
};

static/devSw.js

self.importScripts('/assets/my-custom-sw.js');

self.skipWaiting();

self.addEventListener('activate', (event) => {
  /* global clients */
  /* eslint no-undef: "error" */
  event.waitUntil(clients.claim());
});

I hope this helps you too :)

[fcroce]

cc @atinux

[pi0]

Hi. Actually you can enable workbox/service-workers with this nuxt config:

export default {
  workbox: {
    dev: true // <--force enable workbox in dev
  }
}

I planned to make @nuxt/service-worker module so it would be possible to have additional service workers without depending on workbox/pwa and more importantly compiling sw.js

[fcroce]

@pi0 that didn't work for me. Also I don't want the sw.js to run on dev, because I don't want the caching stuff 😅 The plugin I proposed above only runs the importScripts.

What I don't like about my solution is that you have to duplicate the list of imports in nuxt.config.js and devSw.js 😒

[pi0]

Dear @fcroce indeed I'm aware what you mean. In the meantime that there is no general solution for service workers, you may disable pwa.workbox and manually create/register sw.js.