How to add custom service worker to Nuxt 3 with vite-pwa?

Question

I am trying to glue together a Nuxt 3 PWA with vite-plugin-pwa, more specifically @vite-pwa/nuxt. I installed the module and set up basic configuration (I basically followed this video)

What I want

The first feature I would like to implement is sending Push Notifications to users at fixed time. They should receive the Push Notifications even if they are not in the app. That's why I added the PWA module.

What I do not understand

I don't know how to add my custom service worker. If I understand it correctly, I could write a service worker, that just sends Push Notifications with the Notification API to my app. No need for services like OneSignal (right?).

As I understand the documentation Vite PWA uses google's workbox under the hood and per default it generates a service worker. If you set injectRegister: 'script' it should inject a service worker registration in the head of my app (like described here).

Now when I search the source code via the developer tools I cannot find any serviceWorker script. Strangely enough, when I go to the application tab in the dev tools, I can see that a service worker dev-sw.js is registered. How did this get added?

​

I think I have to set a mode in the configuration to tell workbox not to generate the service worker registration for me. This mode should be called injectManifest, as described here and here. But again, how do I add this to my code?

As suggested in the documentation I also had a look at the elk repo. But unfortunately they take a different approach and currently do not use vite-pwa/nuxt.

How can I add my custom service worker to send push notifications?

Does anybody have experience with PWAs in Nuxt 3 and specifically working with service workers and sending Push Notifications?

Answer 1

I ran into the same problem and ended up reaching out via the issues on the vite-pwa/nuxt git repo.

This aspect of vite-pwa is not handled by the @vite-pwa/nuxt plugin itself. Instead it uses the underlying library as per the base documentation found on the vite-pwa website.

In order to get the service-worker registered you will need a few things:

1. Install the workbox-core, workbox-precaching, and workbox-routing as dependencies via either yarn or npm.
2. Create a service-worker javascript file (by default, vite-pwa looks for sw.js) in the public directory of your application.
3. Set the pwa.strategies property in your nuxt.config.ts file to injectManifest.
4. Update your service-worker file, and you're good.

I would suggest copying the service-worker default template that @vite-pwa/nuxt creates by default (this should be similar to what you got by inspecting the dev-sw.js file, as that is where I copied this code from, kinda):

import { clientsClaim } from 'workbox-core'
import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute, NavigationRoute } from 'workbox-routing';

self.skipWaiting();
clientsClaim();
precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();

//You can remove this code if you aren't precaching anything, or leave it in and live with the warning message
try {
    const handler = createHandlerBoundToURL('/');
    const route = new NavigationRoute(handler);
    registerRoute(route);
} catch (error) {
    console.warn('Error while registering cache route', { error });
}

//Your service-worker code here.

I ended up going with Firebase Cloud Messaging using the firebase SDK for push notifications following this guide. I needed a backend service to send your push notifications (I am using asp.net core, but anything that supports the Firebase Admin SDK should work), however you might be able to get away with just using the service-worker, a quick google turned up this answer which should be viable after configuring your PWA.

Edit for more clarity:

How did the dev-sw.js file get added

vite-pwa (the library that @vite-pwa/nuxt uses to modify the vite build) generates the PWA based off of the configuration rules you pass into the pwa property in your nuxt.config.ts file, this is then served by nuxt whenever the browser requests the /sw.js file.