Web push notifications

Transcript

1. Web push notifications @d_gurgel
2. Å Visitas únicas 12,500 3,800 Visitas únicas mensais Fonte: comScore Mobile Metrix, U.S., Age 18+
3. No Sebrae
4. Como funciona? ⚙ ☁ Cliente Servidor
5. Como funciona no cliente? ☁ Permissão do usuário Inscrição Enviar inscrição
6. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js') .then(initialState); }else { console.log(':('); } navigator.serviceWorker.ready.then(swRegistration=>{ return swRegistration.pushManager .subscribe({userVisibleOnly:true}); }).then(subscription=>{ console.log(subscription); /*Enviar para o servidor*/ }); ☁ "gcm_sender_id": "827747435376" Notification.requestPermission().then(status)
7. E no servidor? ☁ Seu servidor Push Service ⬇ ⬇
8. const webpush = require('web-push'); const vapidKeys = webpush.generateVAPIDKeys(); webpush.setGCMAPIKey('GCMKEY'); webpush.setVapidDetails( 'mailto:hi@diegogurgel.com', vapidKeys.publicKey, vapidKeys.privateKey ); const pushSubscription = { endpoint:”https://android.googleapis.com/gcm/send/ewcFEKglM…”, keys:{ p256dh:”BERT29SHqILHUjCaeN8NJMRXL8oQSQs…”, auth:"gzOk5sX1HTtfXb4PmVoiFA==" } } ☁ const payload = { title: 'Frontend meetup', message: ':) ', };
9. webpush.sendNotification(pushSubscription, JSON.stringify(payload)) .then(data=>{ console.log(data); }) .catch(err=>{ console.log(err); });
10. ⚙ 'use strict'; self.addEventListener('push', function(event) { let data = event.data.json(); event.waitUntil( self.registration.showNotification(data.title, { body: data.message, }) ); });
11. UX ⌚
12. UX 0