Slide 1

Slide 1 text

Advanced Progressive Web Apps Push Notifications Under Control Christian Liebel Consultant @christianliebel

Slide 2

Slide 2 text

Hello, it’s me. Christian Liebel Follow me: @christianliebel Email: christian.liebel @thinktecture.com Cross-Platform Development & Serverless Cloud Architectures Push Notifications Under Control Advanced Progressive Web Apps

Slide 3

Slide 3 text

“Uber Pattern” Progressive Web Apps Push Notifications Under Control Advanced Progressive Web Apps Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive

Slide 4

Slide 4 text

https://pwa.liebel.io Advanced Progressive Web Apps Push Notifications Under Control PWA Demo LIVE DEMO

Slide 5

Slide 5 text

»Don’t call us, we’ll call ya!« Advanced Progressive Web Apps Push Notifications Under Control Hollywood/Push Principle

Slide 6

Slide 6 text

Get the user back with notifications Advanced Progressive Web Apps Push Notifications Under Control Re-Engageable Ä Peter and 12 other people like your photo. SOCIAL NETWORK 08:12 Only today! 350 golden diamonds for $3.49!! PAY TO WIN GAME 11:19

Slide 7

Slide 7 text

Notifications API Push API HTTP Web Push Push on iOS Project Fugu Runtime Push Advanced Progressive Web Apps Push Notifications Under Control Agenda

Slide 8

Slide 8 text

Notifications API Push API HTTP Web Push Push on iOS Project Fugu Runtime Push Advanced Progressive Web Apps Push Notifications Under Control Agenda

Slide 9

Slide 9 text

Support Advanced Progressive Web Apps Push Notifications Under Control Notifications API 14 6 (macOS) 22 5

Slide 10

Slide 10 text

Permissions Advanced Progressive Web Apps Push Notifications Under Control Notifications API await Notification.requestPermission(); 'denied' | 'granted'

Slide 11

Slide 11 text

Permissions Advanced Progressive Web Apps Push Notifications Under Control Notificiations API https://blog.nightly.mozilla.org/2019/04/01/ reducing-notification-permission-prompt-spam-in-firefox/ https://www.androidpolice.com/2019/09/20/ chrome-canary-quiet-notification-prompts/

Slide 12

Slide 12 text

Double Permission Request notfication permissions as a result of a user gesture! Advanced Progressive Web Apps Push Notifications Under Control Notifications API

Slide 13

Slide 13 text

async function showNotification() { const result = await Notification.requestPermission(); if (result === 'granted') { const noti = new Notification('Hello!', { body: 'It’s me.', icon: 'icon512.png' }); noti.onclick = () => alert('clicked'); } } showNotification(); Advanced Progressive Web Apps Push Notifications Under Control Notifications API LIVE DEMO

Slide 14

Slide 14 text

Properties - Title - Text - Icon/Image - Vibration pattern - Action buttons - Arbitrary structured data (platform support may vary) https://developer.mozilla.org/docs/Web/API/notification Advanced Progressive Web Apps Push Notifications Under Control Notifications API

Slide 15

Slide 15 text

Non-persistent: Sent via web application (automatically close) Persistent: Sent via Service Worker/Push API (stay in notification center) Advanced Progressive Web Apps Push Notifications Under Control Notifications API

Slide 16

Slide 16 text

Notifications API Push API HTTP Web Push Push on iOS Project Fugu Runtime Push Advanced Progressive Web Apps Push Notifications Under Control Agenda

Slide 17

Slide 17 text

Advanced Progressive Web Apps Push Notifications Under Control Service Worker as a controller/proxy/interceptor Service Worker Internet Website HTML/JS Cache fetch

Slide 18

Slide 18 text

Advanced Progressive Web Apps Push Notifications Under Control Service Worker Lifecycle Installing Parsed Error Activated Idle Terminated fetch/ message Push API: push

Slide 19

Slide 19 text

Support Advanced Progressive Web Apps Push Notifications Under Control Push API 17 — 44 44

Slide 20

Slide 20 text

Push Services Advanced Progressive Web Apps Push Notifications Under Control Push API Firebase Cloud Messaging Mozilla Push Service Windows Notification Services

Slide 21

Slide 21 text

Notifications API Push API HTTP Web Push Push on iOS Project Fugu Runtime Push Advanced Progressive Web Apps Push Notifications Under Control Agenda

Slide 22

Slide 22 text

Push Services Solution: One abstract protocol that can be used by every push service HTTP Web Push (IETF/RFC 8030) - HTTP endpoints for push communication - Push Message Receipts - Urgency - Time to live - Replacing push messages Advanced Progressive Web Apps Push Notifications Under Control HTTP Web Push

Slide 23

Slide 23 text

Privacy and Security Push messages should be signed and encrypted (required by Google Chrome) Push services cannot read the contents of push messages (except traffic data) Hence, private and public keys are needed Voluntary Application Server Identification (VAPID) for Web Push Advanced Progressive Web Apps Push Notifications Under Control HTTP Web Push

Slide 24

Slide 24 text

Voluntary Application Server Identification Voluntary - Servers do not have to authenticate. - No API keys or logins are required. - Using the push services is completely free! - Voluntarily, developers can provide contact information to get notified in case something goes wrong. Advanced Progressive Web Apps Push Notifications Under Control HTTP Web Push

Slide 25

Slide 25 text

Flow Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push Push Service Application Frontend Application Backend

Slide 26

Slide 26 text

Flow if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js'); navigator.serviceWorker.ready.then(registration => { if ('PushManager' in window) { registerForPush(registration.pushManager); } }); } Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push LIVE DEMO Progressive Enhancement

Slide 27

Slide 27 text

Flow Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push Push Service Application Frontend Application Backend Push Subscription

Slide 28

Slide 28 text

Flow function registerForPush(pushManager) { const options = { userVisibleOnly: true, applicationServerKey: new Uint8Array([/* … */]) }; pushManager.subscribe(options) .then(subscription => console.log(subscription.toJSON())) .catch(error => console.log(error)); } Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push Public VAPID key Send to server

Slide 29

Slide 29 text

Flow For this demo, we’re replacing the server side part by an online tool: https://pwapraxis-push.glitch.me In productive scenarios, you would send the push subscription JSON to your backend. - Typically, the user is already signed in, so you can attach the push subscription to the user’s registration (e.g. for messenger apps) - Don’t forget that a user can have more than one device, thus a user can have more than one active push subscription Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push LIVE DEMO

Slide 30

Slide 30 text

VAPID & Web Push Libraries Ready-to-use packages are available for different server platforms https://github.com/web-push-libs/ - Node.js - .NET - Java - Python - … Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push

Slide 31

Slide 31 text

VAPID & Web Push Libraries const webpush = require('web-push'); // VAPID keys should only be generated only once. const vapidKeys = webpush.generateVAPIDKeys(); webpush.setVapidDetails('mailto:[email protected]', vapidKeys.publicKey, vapidKeys.privateKey); webpush.sendNotification(pushSubscription, { title: 'Hello' }); Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push

Slide 32

Slide 32 text

Flow Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push Push Service Application Frontend Application Backend OK ERR

Slide 33

Slide 33 text

Flow self.addEventListener('push', event => { const notification = event.data.json(); self.registration.showNotification(notification.title, notification); }); Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push LIVE DEMO

Slide 34

Slide 34 text

Handle Notification Clicks self.addEventListener('notificationclick', event => { event.notification.close(); if (event.action === 'ok') { event.waitUntil( client.openWindow(event.notification.data.url) ); } }); Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push

Slide 35

Slide 35 text

Handle Notification Closes self.addEventListener('notificationclose', () => { // Log analytical data }); Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push

Slide 36

Slide 36 text

Limitations No silent push allowed (Google team experiments with a Budget API) Inline reply functionality is not a part of the Notifications API (yet) Only one-off pushes sent in via server are currently possible Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push

Slide 37

Slide 37 text

Limitations Not supported by Apple Safari on desktop and mobile - Safari Push Notfications: an alternative for the desktop platform - No information on whether or when push will be supported BUT: You can make a difference! Let the WebKit team know what you want to build with Push API: https://liebel.io/pushbug Advanced Progressive Web Apps Push Notifications Under Control Push API/HTTP Web Push

Slide 38

Slide 38 text

Notifications API Push API HTTP Web Push Push on iOS Project Fugu Runtime Push Advanced Progressive Web Apps Push Notifications Under Control Agenda

Slide 39

Slide 39 text

Send an SMS Neither shows app name nor icon Tapping the notification opens Messages Advanced Progressive Web Apps Push Notifications Under Control “Polyfills” on iOS https://support.apple.com/en-us/HT201925

Slide 40

Slide 40 text

Wallet Push Notification Can show app name and icon Requires registering a pass first Tapping the notification opens the pass Advanced Progressive Web Apps Push Notifications Under Control “Polyfills” on iOS https://support.apple.com/en-us/HT204003

Slide 41

Slide 41 text

Native wrapper (Cordova) Shows app name and icon Tapping the notification opens the app Requires App Store distribution (!= PWA) Advanced Progressive Web Apps Push Notifications Under Control “Polyfills” on iOS

Slide 42

Slide 42 text

Notifications API Push API HTTP Web Push Push on iOS Project Fugu Runtime Push Advanced Progressive Web Apps Push Notifications Under Control Agenda

Slide 43

Slide 43 text

Advanced Progressive Web Apps Push Notifications Under Control Project Fugu Contacts Picker Notification Triggers Native File System API Badging API 9

Slide 44

Slide 44 text

Badging API Advanced Progressive Web Apps Push Notifications Under Control Project Fugu navigator.setAppBadge(); navigator.setAppBadge(5); navigator.clearAppBadge();

Slide 45

Slide 45 text

Demo • Install (link: http://Airhorner.com) Airhorner.com (Windows / macOS, not Android). • Paste this code in the @ChromeDevTools console: ``` let c = 0; const h = document.querySelector('.horn'); h.addEventListener('click', _ => { navigator.setExperimentalAppBadge(++c); }); ``` • Honk. • T̶h̶a̶n̶k̶ Hate me. Advanced Progressive Web Apps Push Notifications Under Control Badging API https://twitter.com/tomayac/status/1114131251181555714 LIVE DEMO

Slide 46

Slide 46 text

Notification Triggers Currently, only one-off push notifications can be shown (sent in via push) Notification Triggers will allow you to schedule your notifications (i.e., calendar reminders or pre-calculated game events) swRegistration.showNotification('Reminder', { tag: 'reminder', body: 'Your appointment is due in ten minutes!', showTrigger: new TimestampTrigger(timestamp - TEN_MINUTES) }); Advanced Progressive Web Apps Push Notifications Under Control Project Fugu

Slide 47

Slide 47 text

OneSignal Pushpad VWO Engage Advanced Progressive Web Apps Push Notifications Under Control Third-Party Services LIVE DEMO

Slide 48

Slide 48 text

Notifications API Push API HTTP Web Push Push on iOS Project Fugu Runtime Push Advanced Progressive Web Apps Push Notifications Under Control Agenda

Slide 49

Slide 49 text

WebSockets For pushing arbitrary/structured data, you might want to consider a different method to push messages during runtime. .NET: ASP.NET Core SignalR Node.js: socket.io … Advanced Progressive Web Apps Push Notifications Under Control Push During Runtime

Slide 50

Slide 50 text

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]