Web Push Notification with FCM

Talking about Web Push Notification with Firebase Cloud Messaging services at ReactJs Bangalore Meetup on 9th December 2017.

Transcript

2. Himadri Ghosh Senior Software Engineer Mobisy Technologies (P) Ltd. @iam_himadri
3. Web Push Notification
4. 8% increase in conversion rates on recovered carts. 600K+ users have signed up since November 2016 9X more conversion on previously abandoned carts. 178% increase in conversion vs. mSite users who do not receive notifications. 50% increase in repeat visits within 3 months Source: Google Case Studies
5. • Create a firebase project in Firebase console (We can also import from existing Google project) • Click on Add Firebase to your web app.
6. index.html
7. manifest.json NOTE - This value is common for every FCM javascript client, not project specific
8. Getting the message service:
9. Service worker for receiving messages: NOTE - By default, firebase messaging service worker in firebase-messaging-sw.js
10. Request permission:
11. Retrieve current registration token:
12. Monitor token invalidation:
13. Unsubscribe notification:
14. FCM Web Page App Server register() ServiceWorkerRegistration messaging.useServiceWorker(swReg) messaging.getToken() subscription token User Agent (Firebase SDK) messaging.requestPermission() Promise (resolve, reject) token updateTokenToAppServer(token) onTokenRefresh()
15. Two types of messages: ❏ Notification message • Set of predefined keys • Optional data payload • FCM SDK handles automatically
16. Two types of messages: ❏ Notification message ❏ Data message • Set of predefined keys • Optional data payload • FCM SDK handles automatically • Client app needs to be handle. • Custom key-value pairs NOTE - If we specify notification field, it will take precedence over any values in SW.
17. app.js: service-worker.js: Foreground Background
18. HTTP request endpoint: Headers and payload:
19. FCM Web Page App Server User Agent (Firebase SDK) Service Worker message message event notification event
20. Subscribe to a topic: Sending message to a topic:
21. Messaging to a device group: Response:
23. Chrome 50+ Firefox 44+ Opera Mobile 37+
24. • Browsers must provide service worker support. • FCM SDK supports only in HTTPS served pages, due to service worker. • Sending message from Firebase console.
25. • Ask permission carefully. • Use icon with a relevant image. • Title should be precise form of the information. • Don’t use domain name in title or body. • Click action navigation should based on notification information.
26. • Documentation: https://firebase.google.com/docs/cloud-messaging/js/client • Demo Source Code: https://github.com/iamhimadri/web-push-with-fcm • Slides: https://speakerdeck.com/iamhimadri/web-push-notification-with-fcm
27. Share any feedback @iam_himadri