Web Notifications with Firebase

Transcript

1. Web Notifications with Firebase
2. Who am I?
3. Firebase
4. Platform
5. Database NoSQL JSON “Realtime”
6. Auth Login providers & User management Third party providers • Google • Facebook • … E-mail/password Integrated with DB
7. Storage Google Cloud Storage User content Integrated with Auth
8. Hosting HTTP/2 CDN Versioning
9. Cloud Messaging Replacement for GCM REST API Topics, Device Groups For the web since October
10. Time for a story
11. A story of a man...
12. Amazing shop
13. <screenshot>
14. He was sad :(
15. 5.1% E-mail open rate
16. 1.5% E-mail click-through rate
17. E-mail === User Engagement
18. >97% Of all e-mails are unwanted source: Microsoft security report
19. Native App Expensive Multiple platforms Users already have so many apps
20. Web Notifications No installation required Support • Chrome: 50+ • Firefox: 44+ • Opera Mobile: 37+
21. Combination?
22. Firebase
23. DEMO
24. DB + FCM
25. Library • Latest Firebase JS SDK • firebase.google.com
26. 1. Setting up FCM
27. manifest.json { ..., "gcm_sender_id": "103953800507" }
28. firebase-messaging-sw.js
29. Firebase library <script src="https://www.gstatic.com/firebasejs/3.6.2/firebase.js"></script> <script> // Initialize Firebase // TODO: Replace with your project's customized code snippet var config = { apiKey: "<API_KEY>", authDomain: "<PROJECT_ID>.firebaseapp.com", databaseURL: "https://<DATABASE_NAME>.firebaseio.com", storageBucket: "<BUCKET>.appspot.com", messagingSenderId: "<SENDER_ID>", }; firebase.initializeApp(config); </script>
30. Use messaging... // Retrieve Firebase Messaging object. const messaging = firebase.messaging();
31. Web Components?
32. Polymer library
33. Polymerfire <firebase-app auth-domain="polymerfire-test.firebaseapp.com" database-url="https://polymerfire-test.firebaseio.com/" api-key="AIzaSyDTP-eiQezleFsV2WddFBAhF_WEzx_8v_g"> </firebase-app>
34. FCM component <firebase-messaging id="messaging" token="{{token}}" on-message="handleMessage"> </firebase-messaging>
35. 2. Ask for permission
36. Simple //document.getElementById(‘messaging’) this.$.messaging.requestPermission().then(function() { // permission was granted }, function(err) { // permission was denied });
37. But when?
39. 3. Saving token to database
40. firebase-document <firebase-auth id="auth" provider="google" user="{{user}}"> </firebase-auth> <firebase-document path="/users/[[user.uid]]/fcmToken" data="[[token]]"> </firebase-document>
42. 4. Implement Service Worker
43. Import Firebase importScripts('https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/3.5.2/firebase-messaging.js' ); // Initialize the Firebase app in the service worker by passing in the // messagingSenderId. firebase.initializeApp({ 'messagingSenderId': '781300336566' });
44. Setup a message handler const messaging = firebase.messaging(); messaging.setBackgroundMessageHandler(function(payload) { ... });
45. Show notification const data = payload.data; const notificationTitle = 'Your order state changed'; const notificationOptions = { body: `The order is now '${data.state}'.`, icon: '/images/shop-icon-128.png' }; return self.registration.showNotification(notificationTitle, notificationOptions);
46. 5. Sending notifications
47. HTTP request https://fcm.googleapis.com/fcm/send Content-Type:application/json Authorization:key=AIzaSyZ-1u...0GBYzPu7Udno5aA { "data": { "change": "some_change" }, "to" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1..." }
48. Example: Node.js + Typescript https://goo.gl/R85Oox
49. DEMO TIME!!!
50. Improvements needed
51. Context
52. New order => Ask permission
53. Create a custom UI
54. Hide the UI if we have the permission <template is="dom-if" if="[[!fcmActive]]"> <h2>Enable notifications?</h2> <p>We will send you notifications when order status changes.</p> <shop-button responsive> <a on-tap="_requestFcm" href="#">Enable</a> </shop-button> </template> <template is="dom-if" if="[[fcmActive]]"> <h2>You will be notified about order status changes</h2> </template>
55. DEMO TIME!!!
56. GitHub filipproch/talk-fcm-stuff-shop
57. Thank you @filipproch