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

Christian Liebel
PRO

October 22, 2019
Tweet

More Decks by Christian Liebel

Other Decks in Programming

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:[email protected]',
    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
    [email protected]

    View Slide