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

Progressive Web Apps - DDD Scotland 2018

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


February 10, 2018

More Decks by jamesmaciver

Other Decks in Technology


  1. Progressive Web Apps James Maciver @jmaciver22 About Me - James

    Maciver Technical Lead at Streamba Full stack developer focussed on .NET and JS Twitter: @jmaciver22
  2. 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)
  3. Progressive Web Apps James Maciver @jmaciver22 What is a PWA?

    - Reliable Always Available Instantly Available Network access is a Progressive Enhancement
  4. 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
  5. Progressive Web Apps James Maciver @jmaciver22 What is a PWA?

    - Engaging Frictionless Installation Increased Engagement
  6. 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
  7. 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.
  8. 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
  9. Progressive Web Apps James Maciver @jmaciver22 AppCache <html manifest="example.appcache"> ...

    </html> 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
  10. 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.
  11. 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
  12. 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()
  13. 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
  14. 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.
  15. 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
  16. 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
  17. 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.
  18. 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/
  19. 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