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

Progressive Web Apps - DDD Scotland 2018

jamesmaciver
February 10, 2018

Progressive Web Apps - DDD Scotland 2018

Accompanying code in which we incrementally added offline capabilities, notifications and background sync of newly created content can be found at https://github.com/jamesmaciver/dddscot-demo

jamesmaciver

February 10, 2018
Tweet

More Decks by jamesmaciver

Other Decks in Technology

Transcript

  1. Progressive Web Apps James Maciver @jmaciver22

    View full-size slide

  2. Progressive Web Apps James Maciver @jmaciver22
    Progressive Web Apps
    “For the many, not the few”

    View full-size slide

  3. Progressive Web Apps James Maciver @jmaciver22
    About Me - James Maciver
    Technical Lead at Streamba
    Full stack developer focussed on .NET and JS
    Twitter: @jmaciver22

    View full-size slide

  4. Progressive Web Apps James Maciver @jmaciver22
    Progressive Web Apps
    What is a Progressive Web App (PWA)?
    Why do we care?
    Building a PWA
    (Service Workers, Cache API, IndexedDb, Web Push, Background Sync, Web App
    Manifest)

    View full-size slide

  5. Progressive Web Apps James Maciver @jmaciver22
    What is a PWA?

    View full-size slide

  6. Progressive Web Apps James Maciver @jmaciver22
    What is a PWA? - Reliable
    Always Available
    Instantly Available
    Network access is a Progressive Enhancement

    View full-size slide

  7. Progressive Web Apps James Maciver @jmaciver22
    What is a PWA? - Fast
    It just feels native
    Response: respond in under 50 ms
    Animation: produce a frame in 10ms
    Idle: maximise the use of Idle Time
    Load: Deliver content and interactive in 5s on first hit, 2s on
    subsequent hits

    View full-size slide

  8. Progressive Web Apps James Maciver @jmaciver22
    What is a PWA? - Engaging
    Frictionless Installation
    Increased Engagement

    View full-size slide

  9. Progressive Web Apps James Maciver @jmaciver22
    Why should we care?

    View full-size slide

  10. Progressive Web Apps James Maciver @jmaciver22
    Twitter Lite
    Twitter developed Twitter Lite to deliver a more robust experience, with explicit
    goals for instant loading, user engagement and lower data consumption.
    “Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter. The
    web app rivals the performance of our native apps but requires less than 3% of the device
    storage space compared to Twitter for Android.”
    65% increase in pages per session
    75% increase in Tweets sent
    20% decrease in bounce rate

    View full-size slide

  11. Progressive Web Apps James Maciver @jmaciver22
    BookMyShow (Indian Ticketing Firm)
    “Since launching our PWA, we’ve seen an exponential increase in mobile conversion rates.
    The PWA helped us connect with more people on mobile — and it's mobile users who make
    up the majority of our overall audience.”
    BookMyShow's PWA drove an 80%+ increase in their conversion rates.
    The size of the PWA is 54x smaller than the Android app and 180x smaller than the
    iOS app.
    The PWA takes less than 2.94 seconds to load and enables checkout within 30
    seconds.

    View full-size slide

  12. Progressive Web Apps James Maciver @jmaciver22
    Jumia (African e-commerce site)
    In Jumia's main market, sub-Saharan Africa, 75% of the mobile connections are on
    2G networks. Many users only have intermittent connectivity and visit the site from
    low-end phones with data limitations
    33% higher conversion rate
    50% lower bounce rate
    12X more users versus native apps (Android & IOS)
    5X less data used
    2X less data to complete first transaction
    25X less device storage required

    View full-size slide

  13. Progressive Web Apps James Maciver @jmaciver22
    …..

    View full-size slide

  14. Progressive Web Apps James Maciver @jmaciver22
    Building a PWA

    View full-size slide

  15. Progressive Web Apps James Maciver @jmaciver22
    Disclaimer!

    View full-size slide

  16. Progressive Web Apps James Maciver @jmaciver22
    DDD Scot PWA (Demo)

    View full-size slide

  17. Progressive Web Apps James Maciver @jmaciver22
    AppCache

    ...

    CACHE MANIFEST
    # v1 - 2011-08-13
    # This is a comment.
    http://www.example.com/index.html
    http://www.example.com/header.png
    http://www.example.com/blah/blah

    View full-size slide

  18. Progressive Web Apps James Maciver @jmaciver22
    AppCache
    Application Cache is a Douchebag by Jake Archibald
    “The ApplicationCache spec is like an onion: it has many layers, and as you peel
    through them you will be reduced to tears”
    - Files Always Come from the Application Cache, even if online!
    - The application cache is only updated if the appcache manifest itself has
    changed
    - Non Cached files can’t be accessed from cached files
    - ApplicationCache respects caching headers - with no caching headers the
    browser will guess.

    View full-size slide

  19. Progressive Web Apps James Maciver @jmaciver22
    Service Workers
    The heart of a PWA
    Script that runs in the background
    Client side proxy
    Server
    App
    Service worker

    View full-size slide

  20. Progressive Web Apps James Maciver @jmaciver22
    Service Workers - Cache API
    Store for resources necessary to load your app when offline
    Request / Response pairings stored
    Available in windowed scopes as well as workers
    Multiple named Caches per origin (helpful for versioning)
    No Expiration or automatic updating. Does not honour cache headers
    E.g. match(), add(), put(), delete(), keys()

    View full-size slide

  21. Progressive Web Apps James Maciver @jmaciver22
    Service Workers - IndexedDB
    Full, transactional database
    Javascript-base Object Oriented Database (Structured Clone Algorithm)
    Indexes to allow high performance searches
    Notoriously bad API
    Wrappers - IndexedDB Promised, Local Forage, Lovefield

    View full-size slide

  22. Progressive Web Apps James Maciver @jmaciver22
    Service Workers - Web Push
    Push API to allow receiving of messages from a server whether app is active or not.
    Notification API to display the message as a notification.

    View full-size slide

  23. Progressive Web Apps James Maciver @jmaciver22
    Service Workers - Web Push
    Server
    APP
    Push Service
    (Web Push Protocol)
    PushSubscription
    /w endpoint
    Subscriptions
    Message
    to user’s endpoint
    Message

    View full-size slide

  24. Progressive Web Apps James Maciver @jmaciver22
    Service Workers - Background Sync
    Allows user to create content offline and sync to server later.
    Still in early stages - Chrome only.
    Extends service workers with a sync event and an API for signalling the desire for
    this event to fire.
    serviceWorkerRegistration.sync.register() to request a sync.
    self.addEventListener(‘sync’, () =>{}) to carry out the sync

    View full-size slide

  25. Progressive Web Apps James Maciver @jmaciver22
    Web App Manifest
    JSON manifest that provides information needed to install app “natively”
    To install on Android, must have a Web App Manifest & a registered service worker.

    View full-size slide

  26. Progressive Web Apps James Maciver @jmaciver22

    View full-size slide

  27. Progressive Web Apps James Maciver @jmaciver22

    View full-size slide

  28. Progressive Web Apps James Maciver @jmaciver22
    Measuring - Lighthouse

    View full-size slide

  29. Progressive Web Apps James Maciver @jmaciver22
    Resources

    View full-size slide

  30. Progressive Web Apps James Maciver @jmaciver22
    Resources
    Service Workers Spec (Working Draft)
    https://www.w3.org/TR/service-workers-1/
    Is Service Worker Ready?
    https://jakearchibald.github.io/isserviceworkerready/
    Offline Cookbook (Caching Strategies)
    https://jakearchibald.com/2014/offline-cookbook/
    Google’s reference for “Amazing Web Experiences”
    https://developers.google.com/web/fundamentals/

    View full-size slide

  31. Progressive Web Apps James Maciver @jmaciver22
    Resources
    HNPWA - Hacker News Readers as PWAs (PWAs using different frameworks)
    https://hnpwa.com/
    Web Push Book
    https://web-push-book.gauntface.com/
    Demo
    https://github.com/jamesmaciver/dddscot-demo

    View full-size slide

  32. Progressive Web Apps James Maciver @jmaciver22
    Thanks

    View full-size slide