feat!: build custom service worker using vite

[userquin]

I need to check PWA integrations, tested only with VitePress.

closes #260

[netlify]

✅ Deploy Preview for vite-plugin-pwa-legacy ready!

Name	Link
🔨 Latest commit	94aa1e9
🔍 Latest deploy log	https://app.netlify.com/sites/vite-plugin-pwa-legacy/deploys/6467780b2c212c00080e6d32
😎 Deploy Preview	https://deploy-preview-506--vite-plugin-pwa-legacy.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[userquin]

This should be breaking, we're changing injectManifest behavior.

[AntonOfTheWoods]

As this is supposed to be a breaking change, is there a migration guide anywhere? Any pointers on what might break?

[userquin]

@AntonOfTheWoods the only change included is using vite in the build, plugins entry and vite rollup options, any plugin included should be added to plugins option, should not be reused.

Previous version reuse existing ones in vite config (by default using only vite internal plugins).

This PR use similar strategy to build webworkers in vite.

EDIT: if you have time maybe we can include an example and update the docs.

[AntonOfTheWoods]

@userquin Thanks for your reply. I'm unavailable for the next couple of days but am not sure I understand anyway 😕, so not sure I'd be able to help with an example!

[laurentpayot]

@userquin I’m not sure to understand your answer also, could you please reformulate in a more detailed way? What could break exactly?

[doutatsu]

Same here - would like to understand better what could break and what I need to change in my configuration to make sure things work as expected

[userquin]

0.14.7 version using rollup to build custom sw (rollup build plugins collected by name from Vite config); from 0.15.0 you will need to add plugins twice, to your vite config file and in plugins option (for dev and build).

If you're not using any custom Vite plugin in your service worker, you don't need to change anything.

[doutatsu]

Does this mean I have to duplicate plugins in the vite config, into PWA? E.g. things like VueI18nPlugin would have to be added inside VitePWA options?

[userquin]

@doutatsu if you're using some vue-18n stuff inside the sw yes

[userquin]

@AntonOfTheWoods @laurentpayot @doutatsu

In dev mode it will work because we use type module and Vite will just remove TS anotations (esbuild) and the browser will resolve modules.

In build mode, reusing Vite plugins may fail or generate a weird sw code, it depends on the build type: for example, VitePress and SvelteKit generating weird sw build output (SSR build).

If you check Vite docs for WebWorkers (https://vitejs.dev/config/worker-options.html#worker-plugins), you need to do the same.

[laurentpayot]

Thanks @userquin for the precision. I added my plugins to the injectManifest.plugins option and it works.

[doutatsu]

🤔 I don't actually do anything inside SW, I only use it to update the site, so I presume I don't need to do anything? Service Workers are still so confusing to me 😂

<script setup>
  import { useRegisterSW } from 'virtual:pwa-register/vue';

  const intervalMS = 1800000; // 30 minutes in milliseconds

  /* eslint-disable no-unused-vars */
  const { needRefresh, updateServiceWorker } = useRegisterSW({
    immediate: true,
    onRegistered(swUrl, r) {
      // eslint-disable-next-line no-unused-expressions
      r && setInterval(async () => {
        if (!(!r.installing && navigator)) { return; }
        if (('connection' in navigator) && !navigator.onLine) { return; }

        try {
          const response = await fetch(swUrl, {
            method: 'HEAD',
            cache: 'no-store',
            headers: { cache: 'no-store', 'cache-control': 'no-cache' },
          });

          if (response?.ok) { await r.update(); }
        } catch (_) { /* ignore */ }
      }, intervalMS);
    },
  });

  const close = async () => { needRefresh.value = false; };
  const updateWorker = async () => {
    close();
    updateServiceWorker();
  };
  /* eslint-enable */
</script>

[doutatsu]

Alright, my preview app works just fine, so it does seem to not be a change I need to make. Sorry about being clueless haha