Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web notifications with Polymer & Firebase
Search
Filip Prochazka
November 26, 2016
Programming
0
71
Web notifications with Polymer & Firebase
Filip Prochazka
November 26, 2016
Tweet
Share
More Decks by Filip Prochazka
See All by Filip Prochazka
Firebase na webu? Hračka
filipproch
0
320
Web Notifications with Firebase
filipproch
0
66
Other Decks in Programming
See All in Programming
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
800
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
330
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
180
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
PHPはいつから死んでいるかの調査
chiroruxx
1
400
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
710
SIMD Parallel Programming with the Vector API
josepaumard
0
180
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Featured
See All Featured
The Invisible Customer
myddelton
114
12k
How to Ace a Technical Interview
jacobian
272
22k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
In The Pink: A Labor of Love
frogandcode
138
21k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Faster Mobile Websites
deanohume
299
30k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Producing Creativity
orderedlist
PRO
337
39k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Docker and Python
trallard
34
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Transcript
with Polymer & Firebase Web notifications Filip Prochazka
• How far is the web? • Tools? • Notifications?
None
None
None
None
None
None
credit: Morgan Stanley
Users expect more!
None
None
None
We can do it
“I want to write least code possible” every developer ever
None
None
FCM
None
None
#UseThePlatform
<dom-module id="contact-card"> ... </dom-module>
<style>...</style> <template> <content></content> <iron-icon icon="star" hidden$="{{!starred}}"> </iron-icon> </template>
<script> Polymer({ is: 'contact-card', properties: { starred: Boolean } });
</script>
<contact-card starred> <img src="profile.jpg" alt="Eric's photo"> <span>Eric Bidelman</span> </contact-card
None
Polymer + Firebase = Polymerfire
<firebase-app auth-domain="mydb.firebaseapp.com" database-url="https://mydb.firebaseio.com/" api-key="AIzaSyDTP-eiQezleFsV2WdEzx_8v_g"> </firebase-app>
<firebase-auth id="auth" user="{{user}}" provider="google" on-error="handleError"> </firebase-auth> this.$.auth.signInWithPopup()
Web Notifications
<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>
<firebase-messaging id="messaging" token="{{token}}" on-message="_onMessageReceived"> </firebase-messaging>
<firebase-document path="/users/[[user.uid]]/token" value="[[token]]"> </firebase-document>
Service Worker
importScripts('../../firebase-app.js') importScripts('../../firebase-messaging.js') firebase.initializeApp({ messagingSenderId: '811649979958' }) var messaging = firebase.messaging()
messaging.setBackgroundMessageHandler( pushMessage => { ... })
const title = pushMessage.data.title const notificationOptions = { body: pushMessage.data.body,
icon: '/images/notification.png', tag: 'notification-tag', data: { targetUrl: pushMessage.data.targetUrl } }
self.registration .showNotification(title, notificationOptions)
self.addEventListener('notificationclick', event => { ... }
event.notification.close() var targetUrl = event.notification.data.targetUrl
event.waitUntil( clients.matchAll({ type: 'window', includeUncontrolled: !0 }).then( clientList => {
openWindow(clientList, targetUrl) }))
function openWindow(clientList, targetUrl) { clientList.forEach( client => { if (client.url.endsWith(targetUrl)
&& 'focus' in client) { return client.focus() } } return self.clients.openWindow(targetUrl) }
this.$.messaging.requestPermission() .then(() => { console.log('Notification permission granted.') }) .catch( err
=> { console.log('Notification permission was denied.') })
None
“What’s that?” your confused user
None
None
None
1. The web is important 2. Use the tools 3.
Think about the user
Filip Prochazka filipproch www.settleup.info