search

shadowwalker / next-pwa

Zero config PWA plugin for Next.js, with workbox 🧰
MIT License
3.71k stars 312 forks source link

Setting up push notifications with next-pwa #463

Open vamsimudadla opened 1 year ago

vamsimudadla commented 1 year ago

Is next-pwa enough for setting up push notifications or do we need any third party services like onesignal to send and manage notifications. If next-pwa is enough to setup, please tell me how to do it to make it work both in online and offline mode.

https://github.com/shadowwalker/next-pwa/tree/master/examples/web-push

I followed this example but I didn't understand how to send notifications from my BE server.

Please help me out with this.

vamsimudadla commented 1 year ago

@shadowwalker . Please check this out

han-see commented 1 year ago

you don't need an extra third party service. You need to set the vapid details on your server with the vapid generated. You can check the implementation in the example you listed above.

coopbri commented 1 year ago

I am curious about this as well. Are there any benefits to using a third-party service from the code minimization/convenience side? I am migrating a React Native app to a PWA and was using OneSignal with that app because it drastically reduced the code and operational burden (at least at the time the app was created around 2021). Wondering if it may be best to tack OneSignal on top again depending on any benefits it might provide. Researching PWA information like this is a bit tricky.

kiorq commented 1 year ago

I don't know much about the onesignal implementation but I believe it provides you with it's own sw file. Just an idea, but you may be able to set that file as a custom worker (see custom-worker example in repo) and be able to use both pwa and onesignal.

If not you'll probably have to aquire the pushsubscription using the PushAPI and share it with onesignal somehow

coopbri commented 1 year ago

Thanks @kiorq, good call. I got things set up with the example repo (vanilla web push/VAPID) and it wasn't as bad as I thought. It's worth mentioning that I also needed to reference the next-pwa custom worker example (the same one kiorq mentioned, I used the TypeScript example here) and basically glue them together.

@vamsimudadla, these two resources helped me wire up a push backend:

The key server code outlined in the API route in the next-pwa web push example can be adapted to a separate backend server.

vamsimudadla commented 1 year ago

Thanks for your response @han-see @coopbri @kiorq