Engage users with Firebase Cloud Messaging

In this video, Andrea Wu will show you how to use Firebase Cloud Messaging to send notifications to remind users to confirm receipts after automatic processing. You’ll also learn how to set up a messaging campaign to send a message once every week to idle users to see if user retention will increase.
Feel free to dive right into this video even if you haven’t watched the others!
Chapters:
0:00 - Introduction
2:23 - Cloud Messaging
4:41 - Project Setup
7:00 - Tokens: VAPID key
8:12 - Tokens: device token
10:12 - Requesting notifications permissions
11:51 - Service worker
14:31 - Send a message
16:48 - Receive a message: app in foreground
17:38 - Receive a message: app in background
20:18 - Cloud Messaging campaigns
Resources:
Code repo - goo.gle/3VCEmmv
Create Firebase project → goo.gle/3BaduPz
Upgrade pricing plan - goo.gle/3B3cgIx
Catch more videos → goo.gle/FirebaseCodealong
Subscribe to Firebase → goo.gle/Firebase
#FirebaseCodealong

[@Firebase]

Catch more videos in the series → goo.gle/FirebaseCodelang

[@okoliugo5766]

The foreground listener isn't working on my react project, but i see the notifications on devtools, is there any possible reason?

[@kimford8866]

This is a very helpful and informative video. Thanks for sharing it. It's one of the few things that covers messaging and covers the sending of messages in a cloud function instead of just sending messages from the console. Problem is that I think it needs to be updated, as most of the scattered and convoluted documentation around this subject points to using Application Default Credentials. Things have apparently changed quite a bit since this vid was posted 10 months ago. I cannot get things to work with "firebase-admin": "^11.8.0" and "firebase-functions": "^4.3.1" in a cloud function.

[@Eyezbergslim]

Can we get tokens for laptops in order to send notifications?

[@AndreKordasti]

Is it possible to show the cloud message in a ”notifications” page? I mean if all is setup good with the SW, foreground and background is fine with push notifications, but what if you want to have it INSIDE your web app? (I keep getting entity not found) Thanks

[@adammuhammad6802]

can a web app subscribe differently for every user? so i can send different message for everyone

[@cryptoknight9440]

How to hide sensitive info like firebase config variable from Service worker file I'm using vite typescript and react

[@soufianeamimi]

I think that you cannot with pure react cause all script is loaded to the client, the solution is to made a server side so your client request be made for server you can use express.js or next.js that has the config info and then that servers will make the request to yourfirebase

[@evandrodealmeidamartins3929]

Nao entendo nada

[@rubenheymans1988]

can you show how this works with a PWA?

[@ODStudiosCEO]

If you really want to learn more about firebase, you got to jump into the docs.

[@ozgurNY]

@@ODStudiosCEO PWA is not firebase, fyi

[@rach3llan3]

Least of all the information I have been getting needs public exposure

[@rach3llan3]

I've been trying to contact the authorities