How to Create an Ionic PWA with Web Push Notifications

Learn to add web push notifications to your Ionic app within a PWA! Apparently this only works for specific web browsers and Android - not on iOS.

#############################

👨‍💻Want to read instead of watch?

🤷‍♂️Want more Ionic tutorials?

⚡️Take my 7 Day Ionic Crash Course

#############################

❤️You can also find me...

#############################

[eulisesquidel]

I made your tutorial from zero, it's work fine. Thanks a full.

[shalandichannel]

Great video.

Couple of questions:
1. Has iOS managed to add support for pwa push notifications in the meantime?
2. Would pwa push notifications work if the phone is rebooted and the pwa has never been opened yet after boot? (I.e. will the service worker register even if the pwa has never been opened by the user )?
3. Are there alternatives to firebase? Maybe even self-hosted ones (for private intranets for example)?

Cheers

[AmitKumarJhaOfficial]

Thanks a lot. I am building a PWA using custom coding and no framework but was stuck about how to use the firebase service worker with my service worker. You saved my worry.

[josuetoral]

Hi! SImon.. Are in-app notifications on ios supported?

[HoseinHomayoni]

Hi Simon, thanks for the tutorial.
When I use firebase push notifications, after splash screen my app show white screen on Android.
Can you help me to solve this problem?

[kundaibodzo]

Thank you, this is what I was looking for, and I can send notification to my angular app triggered in django. Thank you again.

[IngAjVillalon]

Hi Simon Grimm, first of all, thank you very much for the excellent explanation you just gave.
I have my project running on IOS and Android with capacitor/push-notifications, and I want to add the web version as PWA, just as you just explained.
I have two questions:
Registering the ServiceWorkerModule in the App Module of my ionic project, doesn't it affect the native versions? That is, when I generate
ionic capacitor build android --prod
I will not see problems or interferences with capacitor/push-notifications?
Is there a conditional way to ignore these imports (registers) on mobile versions?

Beforehand thank you very much.

[JibinPhiliposeDGameR]

Can seem to get the push notifications in the subscription and on click the notification it isn't even redirecting, is there something that's changed?

[Draconian]

can you do notification for chat ? client to client like whatsap

[vyshnavkumar]

I follow all your vedios they are great I have a dought.How to do FCM(firebase cloud message) for ionic android app? I have tried a lot but couldn't do that plz do a vedio on that

[MaicoTriaca]

Is there any way to use Postman API within my Angular project? That would result in a process of sending notifications automatically, right?

[abdiasnatanaelvrech]

You are awesome man! super easy and practical, thank you!

[BhuviSaini-cw]

Hello foreground notification not received in ionic angular pwa 6

[apenet-]

We have a video topic to request: *Managing Development and Production Builds with Ionic.*

Specifically, we would love to see how to get dev and production apps using different environment variables.

[ozzyparkar]

Hi Simon, Im having some problems with my FCM notifications for IOS. My code works perfectly in Android, I get the notification triggered from firebsusing my fcm get token, and it works perfectly fine for Android. But for IOS it is inconsistent, i get the notification sometimes, and sometimes not. I have been stuck on this for days. Could you please refer me to any article of yours that shows how to get fcm working in ios?

[nathansrivi]

@Simon, Please post file download from URL ionic capasitor

[Nek]

Hey Simon, is there an easy option to handle environment variables with firebase-messaging-sw.js, so that i also could use dev/prod with it?

[haydenbaldwin]

So I followed exactly what you have done twice and everything is working just like you have except the push message is not coming through to the app, at all, not locally or deployed. has the requirement for this changed or?

[lestthatth]

hi, great video as well i love it. Ammm i just have one question an error when a try to get the token the app give the next error "firebaseerror messaging we are unable to register the default service worker", and also i don´t know how to use postman and CURL either, i really hope if you can help me, thank you and great video

[yoyobu]

Can you do the same with ionic react please