Progressive Web Apps James Maciver @jmaciver22 

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

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

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) 

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

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

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 

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

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

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 

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. 

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 

Progressive Web Apps James Maciver @jmaciver22 ….. 

Progressive Web Apps James Maciver @jmaciver22 Building a PWA 

Progressive Web Apps James Maciver @jmaciver22 Disclaimer! 

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

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 

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. 

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 

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

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 

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. 

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 

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 

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. 

Progressive Web Apps James Maciver @jmaciver22 

Progressive Web Apps James Maciver @jmaciver22 

Progressive Web Apps James Maciver @jmaciver22 Measuring - Lighthouse 

Progressive Web Apps James Maciver @jmaciver22 Resources 

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/ 

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 

Progressive Web Apps James Maciver @jmaciver22 Thanks