How to add push notification using next-pwa
Asked Answered
N

2

7

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.

Neocolonialism answered 30/5, 2021 at 12:48 Comment(0)
A
13

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!

Almanza answered 2/6, 2021 at 8:40 Comment(0)
C
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
Constitute answered 8/1 at 13:57 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.