San Diego JS - Progressive Web Apps

Transcript

1. Progressive Web Apps
2. Brian Cardarella CEO of DockYard @bcardarella
3. @dockyard.com https://dockyard.com Design & Software Engineering Consultancy
4. The Mobile Web
5. Who cares?
10. How strong is native?
13. Native Mobile User Acquisition Costs 2012 $1.50 - $2.25 2015 $2.50 - $4.00
14. “It’s not an easy time to build consumer facing mobile companies. It is not an easy time to invest in them either.” — Fred Wilson
 Union Square Ventures
22. However… The User Experience Sucks because… • no home screen apps • no offline mode support • they’re slow
25. Progressive Web Apps (PWA)
26. Progressive Web Apps (PWA) • Instant loading • Fast • Offline / Lie-fi mode • Add to Home Screen • Secure • Push Notifications • Responsive
27. Who cares?
29. • Users time on site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs 70 seconds • 3x more time spent on site • 40% higher re-engagement rate • 70% greater conversion rate among those arriving via Add to Homescreen • 3x lower data usage
32. • 92% less data for initial load, vs. native app • 82% less data to complete first transaction, vs. native app • 63% less data for initial load, vs. previous mobile web experience • 84% less data to complete first transaction, vs. previous mobile web experience
33. Google Developers Case Studies
35. Mobile web traffic 2x native app traffic http://venturebeat.com/2015/09/25/wait-what-mobile-browser-traffic-is-2x-bigger-than-app-traffic-and-growing- faster/
37. How?
38. serviceWorker
39. serviceWorker
40. serviceWorker
41. serviceWorker if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); }
42. serviceWorker self.addEventListener('install', function installer (event) { // your installation code });
43. serviceWorker var offlineFundamentals = [ '/', '/offline', '/css/all.css', '/js/all.js' ]; self.addEventListener('install', function installer (event) { event.waitUntil( caches .open('v1::fundamentals') .then(function prefill (cache) { return cache.addAll(offlineFundamentals); }) ); }); https://ponyfoo.com/articles/serviceworker-revolution
46. fetch replacing XMLHttpRequest function reqListener () { console.log(this.responseText); } var req = new XMLHttpRequest(); req.addEventListener("load", reqListener); req.open("GET", "http://www.example.org/example.txt"); oReq.send();
47. fetch fetch("http://www.example.org/example.txt")
48. fetch var myHeaders = new Headers(); var myInit = { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default' }; var myRequest = new Request(‘flowers.jpg', myInit); fetch(myRequest, myInit) .then(function(response) { return response.blob(); }); https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
49. serviceWorker self.addEventListener('fetch', function fetcher (event) { event.respondWith(fetch(event.request)); });
50. serviceWorker self.addEventListener('fetch', function fetcher (event) { var request = event.request; if (request.method !== 'GET') { event.respondWith(fetch(request)); return; } // handle other requests }); https://ponyfoo.com/articles/serviceworker-revolution
51. serviceWorker self.addEventListener('fetch', function fetcher (event) { var request = event.request; if (request.method !== 'GET') { event.respondWith(fetch(request)); return; } event.respondWith(caches .match(request) .then(queriedCache); ); }); https://ponyfoo.com/articles/serviceworker-revolution
52. https://ponyfoo.com/articles/serviceworker-revolution function queriedCache (cached) { var networked = fetch(request) .then(fetchedFromNetwork, unableToResolve) .catch(unableToResolve); return cached || networked; } function fetchedFromNetwork (response) { var clonedResponse = response.clone(); caches.open(version + 'pages').then(function add (cache) { cache.put(request, clonedResponse); }); return response; } function unableToResolve () { return new Response('', { status: 503, statusText: 'Service Unavailable' }); }
53. Can I Use?
56. Conclusion •PWAs allow you to compete with native • PWAs will make you more money •PAWs will save you money •PWAs are easy to get started •PWAs are very powerful •PWAs can save the mobile web
57. @dockyard.com https://dockyard.com Design & Software Engineering Consultancy
58. Coming soon to a San Diego near you