Advanced Progressive Web Apps: Push Notifications Under Control

For sure, Progressive Web Apps (PWA) is one of the hottest topics in Web space today. A PWA should feel like the native apps we are used to since years, including the ability to receive and show push notifications.

Thinktecture’s Christian Liebel (@christianliebel), member of the W3C Web Platform Working Group, shows you to implement push messaging in your PWA using the Push API, including helpful libraries and third-party services. Plus, as a part of Google’s Project Fugu, push notifications will even get better thanks to the advent of the Badging API.

Transcript

1. Advanced Progressive Web Apps Push Notifications Under Control Christian Liebel Consultant @christianliebel
2. Hello, it’s me. Advanced Progressive Web Apps Push Notifications Under Control Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform, Cloud & Enterprise Blockchain
3. What’s PWA about anyway? Advanced Progressive Web Apps Push Notifications Under Control
4. Advanced Progressive Web Apps Push Notifications Under Control Apps Today…
5. Web Goes Native • No app stores anymore! • Web App = App App • Cross-platform • Feature parity: Push notifications, offline availability and more for web & native applications • Backwards compatibility: PWAs can also be run on non-PWA browsers, but with reduced feature set Apps Tomorrow… Push Notifications Under Control Advanced Progressive Web Apps
6. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch API Web Notifications Web Workers Push API Web App Manifest HTTPS PWA Technology Overview Push Notifications Under Control Advanced Progressive Web Apps
7. Platform Support PWA Status Quo Push Notifications Under Control Advanced Progressive Web Apps 17 11.1 44 40 4.1 Chrome 40 11.3
8. Progressive Web Apps are not a technology, but a collection of properties an application must/should support. “Uber Pattern” Push Notifications Under Control Advanced Progressive Web Apps
9. “Uber Pattern” Push Notifications Under Control Advanced Progressive Web Apps Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive LIVE DEMO
10. Re-engageable Advanced Progressive Web Apps Push Notifications Under Control PWA Features
11. Don’t call us, we’ll call you! Hollywood/Push Principle Push Notifications Under Control Advanced Progressive Web Apps
12. Get the user back with notifications Idea: Push the users to use the app again Known from social networks or games, etc. • Peter likes your post. • Wow! 300 diamonds for $4.95 only! Combination of two technologies: • Push API • Notifications API Advanced Progressive Web Apps Push Notifications Under Control Re-Engageable
13. Notifications API Advanced Progressive Web Apps Push Notifications Under Control
14. Support Advanced Progressive Web Apps Push Notifications Under Control Web Notifications API 14 6 (macOS) 22 5
15. Permissions Advanced Progressive Web Apps Push Notifications Under Control Notifications API await Notification.requestPermission(); 'denied' | 'granted'
16. Double Permission Advanced Progressive Web Apps Push Notifications Under Control Notifications API
17. 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
18. 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
19. Push API Advanced Progressive Web Apps Push Notifications Under Control
20. Advanced Progressive Web Apps Push Notifications Under Control Service Worker as a controller/proxy/interceptor Service Worker Internet Website HTML/JS Cache fetch
21. Advanced Progressive Web Apps Push Notifications Under Control Service Worker Lifecycle Installing Parsed Error Activated Idle Terminated fetch/ message Push API: push
22. Support Advanced Progressive Web Apps Push Notifications Under Control Push API 17 — 44 44
23. Push services Every browser vendor has its own push service Challenge: Every service is used in a different way Ends in several implementations on the server Solution: One protocol that can be used by every push service Web Push Protocol Advanced Progressive Web Apps Push Notifications Under Control Push API
24. Web Push Protocol Every push service talks Web Push Protocol Only one server implementation needed To make the push request secure, private and public keys are needed Voluntary Application Server Identification (VAPID) for Web Push Ready-to-use-packages are available for different servers (e.g. Node, ASP.NET, etc.) Advanced Progressive Web Apps Push Notifications Under Control Push API
25. Flow Advanced Progressive Web Apps Push Notifications Under Control Push API Push Service Server 4. Send Message to Push Service endpoint 5. Response (success/fail) 1. Register for push 2. Send push information to client 6. Push to client Client(s) 3. Send push endpoint LIVE DEMO
26. No silent push allowed (Google team experiments with a Budget API) Only one-off pushes sent in via server are possible Not supported by Apple Safari on desktop or mobile (there’s an alternative for the desktop platform) Advanced Progressive Web Apps Push Notifications Under Control Limitations
27. Advanced Progressive Web Apps Push Notifications Under Control Project Fugu Writable Files API Badging API Contacts Picker Event Alarms Wake Lock API Web Share Target API User Idle Detection API Async Cookie API Web HID API
28. Badging API Advanced Progressive Web Apps Push Notifications Under Control Project Fugu self.Badge.set(); self.Badge.set(14); self.Badge.set('!'); self.Badge.clear();
29. Event Alarms Currently, only one-off push notifications can be shown (sent in via server) Event Alarms will allow you to schedule your notifications (i.e., calendar reminders or pre-calculated game events) Advanced Progressive Web Apps Push Notifications Under Control Project Fugu
30. OneSignal Pushpad Pushcrew Advanced Progressive Web Apps Push Notifications Under Control Third-Party Services LIVE DEMO
31. 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
32. Questions? Advanced Progressive Web Apps Push Notifications Under Control
33. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com