- Clone the repo
- Create your project on the Firebase Console.
- Open Project and go to Project settings > Cloud Messaging and there in section Web configuration click Generate key pair button.
- Copy public key and in
index.html
file replace<YOUR_PUBLIC_VAPID_KEY_HERE>
with your key. - Copy your Firebase Config object in
index.html
(line 108) andfirebase-messaging-sw.js
(line 65) replacing the existing object. - Serve the folder locally using Python Simple HTTP Server (
python -m SimpleHTTPServer 9000
) - Open Chrome Debugging Tools, go to more tools, remote devices.
- Connect your Android phone and enable USB debugging.
- Once your phone is listed in the remote devices section, enable port forwarding for port 9000.
- Open
localhost:9000
on your phone and grant access to notifications. - Copy your FCM Token.
- Obtain your server key from the project settings, cloud messaging tab.
- Send a cURL request like this
curl -X POST \
https://fcm.googleapis.com/fcm/send \
-H 'Authorization: key=<LEGACY_SERVER_KEY_HERE>' \
-H 'Content-Type: application/json' \
-d '{
"data": {
"title": "FCM Message",
"body": "This is a message from FCM"
},
"to": "<FCM_TOKEN_HERE>"
}'
- Click on the notification received on your device. The notification will open up normally in Chrome.
- Now add
localhost:9000
to your Home Screen as PWA. - Send the same cURL request again.
- Click on the notification.
- Notification won't open up