CODEWITHSUNDEEP
reactjsnext.jsprogressive-web-appsonesignalnext-pwa
adamine
adamine

Reputation: 143

How to add push notification using next-pwa

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.

Upvotes: 7

Views: 14434

Answers (2)

Ángel Ugarte
Ángel Ugarte

Reputation: 161

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

Upvotes: 2

micataudella
micataudella

Reputation: 131

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!

Upvotes: 13

Related Questions