Web notifications with Polymer & Firebase

Transcript

1. with Polymer & Firebase Web notifications Filip Prochazka
2. • How far is the web? • Tools? • Notifications?
9. credit: Morgan Stanley
10. Users expect more!
14. We can do it
15. “I want to write least code possible” every developer ever
18. FCM
21. #UseThePlatform
22. <dom-module id="contact-card"> ... </dom-module>
23. <style>...</style> <template> <content></content> <iron-icon icon="star" hidden$="{{!starred}}"> </iron-icon> </template>
24. <script> Polymer({ is: 'contact-card', properties: { starred: Boolean } }); </script>
25. <contact-card starred> <img src="profile.jpg" alt="Eric's photo"> <span>Eric Bidelman</span> </contact-card
27. Polymer + Firebase = Polymerfire
28. <firebase-app auth-domain="mydb.firebaseapp.com" database-url="https://mydb.firebaseio.com/" api-key="AIzaSyDTP-eiQezleFsV2WdEzx_8v_g"> </firebase-app>
29. <firebase-auth id="auth" user="{{user}}" provider="google" on-error="handleError"> </firebase-auth> this.$.auth.signInWithPopup()
30. Web Notifications
31. <firebase-app auth-domain="mydb.firebaseapp.com" database-url="https://mydb.firebaseio.com/" api-key="AIzaSyDTP-eiQezleAhF_WEzx_8v_g" messaging-sender-id="811649979958"> </firebase-app>
32. <firebase-messaging id="messaging" token="{{token}}" on-message="_onMessageReceived"> </firebase-messaging>
33. <firebase-document path="/users/[[user.uid]]/token" value="[[token]]"> </firebase-document>
34. Service Worker
35. importScripts('../../firebase-app.js') importScripts('../../firebase-messaging.js') firebase.initializeApp({ messagingSenderId: '811649979958' }) var messaging = firebase.messaging()
36. messaging.setBackgroundMessageHandler( pushMessage => { ... })
37. const title = pushMessage.data.title const notificationOptions = { body: pushMessage.data.body, icon: '/images/notification.png', tag: 'notification-tag', data: { targetUrl: pushMessage.data.targetUrl } }
38. self.registration .showNotification(title, notificationOptions)
39. self.addEventListener('notificationclick', event => { ... }
40. event.notification.close() var targetUrl = event.notification.data.targetUrl
41. event.waitUntil( clients.matchAll({ type: 'window', includeUncontrolled: !0 }).then( clientList => { openWindow(clientList, targetUrl) }))
42. function openWindow(clientList, targetUrl) { clientList.forEach( client => { if (client.url.endsWith(targetUrl) && 'focus' in client) { return client.focus() } } return self.clients.openWindow(targetUrl) }
43. this.$.messaging.requestPermission() .then(() => { console.log('Notification permission granted.') }) .catch( err => { console.log('Notification permission was denied.') })
45. “What’s that?” your confused user
49. 1. The web is important 2. Use the tools 3. Think about the user
50. Filip Prochazka filipproch www.settleup.info