How to add push notification using next-pwa

Question

I have a Next.js application and I use next-pwa for the Offline Mode. Now I want to add push notification (OneSignal solution), I've seen many articles/tutorials, and they all require to create/update the service worker.

So my question is: How can I do that since the service worker is generated by next-pwa and it doesn't seem to be editable since it's minified.

Answer 1

You can have a look at the examples in next-pwa GitHub repository.

There is an example to add custom worker: https://github.com/shadowwalker/next-pwa/tree/master/examples/custom-worker

And also another example regarding web push: https://github.com/shadowwalker/next-pwa/tree/master/examples/web-push

Hope these few links help you!

Answer 2

Steps:

1. Go to https://github.com/shadowwalker/next-pwa/tree/master/examples/web-push and clone it.
2. Install web-push with npm i web-push and get the VAPID keys with npx web-push generate-vapid-keys
3. Create your .env file at the root of web-push directory
4. Paste your keys generated in step 2 and add your email in your .env file
5. Finally, run npm run build and npm start That's worked for me