Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced Progressive Web Apps: Push Notifications Under Control

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.

Christian Liebel

November 17, 2018
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. Platform Support PWA Status Quo Push Notifications Under Control Advanced

    Progressive Web Apps 17 11.1 44 40 4.1 Chrome 40 11.3
  5. 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
  6. “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
  7. 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
  8. Permissions Advanced Progressive Web Apps Push Notifications Under Control Notifications

    API await Notification.requestPermission(); 'denied' | 'granted'
  9. 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
  10. 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
  11. Advanced Progressive Web Apps Push Notifications Under Control Service Worker

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

    Lifecycle Installing Parsed Error Activated Idle Terminated fetch/ message Push API: push
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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();
  19. 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
  20. 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