Better documentation regarding custom service workers about nuxt HOT 5 CLOSED

@calico-crusade using vite-plugin-pwa, @vite-pwa/nuxt or any other library will not solve the logic you need to add push notifications to your app/sw, you have to write a custom service worker (js/ts) and add the corresponding logic.

Check these entries:

• https://vite-pwa-org.netlify.app/guide/inject-manifest.html
• https://vite-pwa-org.netlify.app/workbox/inject-manifest.html

You have the service-worker folder in the elk.zone repository, you have a custom service worker with push notifications there.

The pwa options are basically the same, just add any new ones you need or you're using (plugin) to the pwa module configuration.

You can also refer to this document: https://docs.elk.zone/pwa.

The work I've done on the elk.zone repository was the precursor to @vite-pwa/nuxt. At that time I had no idea about push notifications and needed to read a lot of documentation.

from nuxt.

About stackoverflow, I don't use it, sorry: we've issues and discussions here and also a discord channel (check pwa docs header)

from nuxt.

However, the given repo doesn't use @vite-pwa/nuxt right now, siting that it needs to be added back upon release. Is this because this module doesn't support custom service-worker code?

No, it is because we need web manifest with i18n and theme (dark/light), we've 2 web manifest per locale and we've a few locales there.

from nuxt.

If you check the pwa options in the plugin and in the integration, both have a lot of common entries (in fact, nuxt integration types extends or uses the types from the plugin): you need to change the strategy to injectManifest and configure the entries to locate your custom service worker, you can use the same structure and configuration we've in elk.zone repo.

Check the nuxt config file, we're excluding the service-worker folder from the typescript configuration.

We've also a few common modules to reuse the custom IndexedDB where we store the users (push notification logic will use it to find the user in the app and the app to initialize the user info from the remote backend when sign-in).

from nuxt.

Thanks for your reply.

I ended up getting it to work, though it isn't pretty.

For anyone else want to get a custom service worker running, the simplest method is as follows:

1. Create the service worker file (sw.js) in your /public directory.
2. Install the workbox-core, workbox-precaching, and workbox-routing packages as dependencies
3. Copy the default service-worker configuration:

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.

4. Change pwa:strategies property to injectManifest in nuxt.config.ts

from nuxt.