Advanced Progressive Web Apps: Push notifications under control

For sure, Progressive Web Apps (PWA) are one of the hottest topics on the web today. A PWA should feel like a real app, including the ability to show push notifications. In this talk, Thinktecture’s Christian Liebel (@christianliebel) will show you how to implement push messaging in your PWA or website using the Push API, including a look at helpful libraries and third-party services. As a part of Google’s Project Fugu, push notifications will get even better thanks to the advent of the Badging API and Notification Triggers.

Transcript

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

   View Slide

2. 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
   

   View Slide

3. “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
   

   View Slide

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

   View Slide

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

   View Slide

6. 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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. 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/
    

    View Slide

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

    View Slide

13. 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
    

    View Slide

14. 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
    

    View Slide

15. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. 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
    

    View Slide

23. 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
    

    View Slide

24. 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
    

    View Slide

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

    View Slide

26. 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
    

    View Slide

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

    View Slide

28. 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
    

    View Slide

29. 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
    

    View Slide

30. 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
    

    View Slide

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

    View Slide

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

    View Slide

33. 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
    

    View Slide

34. 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
    

    View Slide

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

    View Slide

36. 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
    

    View Slide

37. 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
    

    View Slide

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

    View Slide

39. 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
    

    View Slide

40. 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
    

    View Slide

41. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. 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
    

    View Slide

46. 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
    

    View Slide

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

    View Slide

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

    View Slide

49. 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
    

    View Slide

50. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide