The Future Of The Web: Does It Have One?

Talk from Web Directions Code; video here: http://www.webdirections.org/blog/whats-next-for-the-web-platform-progressive-apps-alex-russell/

Transcript

1. The Future of The Web +Alex Russell @slightlylate Does It Have One?
4. flickr.com/photos/frogman2212
5. flickr.com/photos/usoceangov
6. WE WON ON DESKTOP!
7. ...JUST IN TIME FOR MOBILE TO EAT THE WORLD
8. Where Do We Stand?
9. 86% 14% TIME SPENT ON SITES TIME SPENT ON APPS “Apps continued to cement their lead, and commanded 86% of the average US mobile consumer’s time” Flurry 2014/04/01
13. IT'S NOT THE TECH *: At least not the bits we fixate on. *
14. What's Actually Holding The Web Back On Mobile?
15. THIS S**T
17. IT'S 2015
18. No Other Platform Runs Desktop Apps On Phones
19. flickr.com/photos/monado/4405843023
21. The Web Has No App Model
22. Boring Browser Stuff: 1. The great GPU divide 2. Input metaphor retrofit 3. Chip architecture switch
23. So, What Explains All This E-Commerce Success?
24. 86% 14% TIME SPENT ON SITES TIME SPENT ON APPS 14% 40% GAMING & ENT. 28% SOCIAL 20% OTHER 66% SITES 6% APPS 28% SITES & APPS PRIMARY CHANNEL FOR COMMERCIAL TASKS USER TIME SPENT ON MOBILE DEVICES
25. Native Isn't All Roses: $1-2 per install, $9 per signed-in user And it only gets worse
26. flickr.com/photos/dhollister
27. flickr.com/photos/marktee
28. More Advice We Actually Have To Give In 2015:
29. Users Use 12-20 Apps/month ...But Visit > 100 Sites/month
30. Distribution Is The Hardest Problem In Software
31. flickr.com/photos/blakespot/
32. IT'S THE FRICTION
33. App Developers Report 20% Drop In Conversions Per Action Source: blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html
34. flickr.com/photos/128220700@N05
35. So What's Missing? 1. Homescreen Access 2. Push Notifications 3. Offline
36. 1. Homescreen Access Less typing, more tapping.
44. ... <meta name="description" content="Chrome Dev Summit is your opportunity to...."> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <title>Chrome Dev Summit 2014</title> <meta itemprop="name" content="Chrome Dev Summit"> <meta itemprop="image" content="/devsummit/images/chrome-dev-summit-masthead-1.jpg"> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="/devsummit/images/chrome-touch-icon-192x192.png"> <meta id="theme-color" name="theme-color" content="#362A6C"> <!-- Add to homescreen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Chrome Dev Summit"> <!-- Tile icon for Win8 (144x144 + tile color) --> <meta name="msapplication-TileImage" content="/devsummit/images/ms-touch-icon-144x144-precomposed.png"> <meta name="msapplication-TileColor" content="#362A6C"> ... Currently, On EVERY PAGE These are VERY VALUABLE bytes
45. <meta name="theme-color" content="#303F9F"> <link rel="manifest" href="manifest.json"> HTML { "short_name": "PolyAir", "name": "Polymer Airlines", "start_url": "/", "display": "standalone", "icons": [{ "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "density": "4.0" }], "orientation": "portrait", "gcm_sender_id": "129757602160" } JSON Manifest With Manifests Metadata delegated to one file Extensible & crawlable
46. "PROGRESSIVE APPS"
47. 2. Push Notifications Equal access to system UI matters
49. 1. Works Even If Browser Closed 2. Requires Service Worker 3. Doesn't Require Install
50. 3. Offline That Works™ It isn't an app if it doesn't start when you tap.
53. Gears Started in 2006 Browsers Have Failed at Offline for ~10 Years
54. example.com GET /app.html HTTP/1.1 HOST example.com ... HTTP/1.1 200 OK Date: Thu, 19 Feb 2015 05:21:56 GMT ...
55. example.com // sw.js onfetch = function(e) { if(e.request.url == "app.html") { e.respondWith( caches.match(e.request) ); } if(e.request.url == "content.json") { // go to the network for updates, // meanwhile, use cached content fetch(...).then(function(r) { r.asJSON().then(function(json) { e.client.postMessage(json); }); }); } }; GET /app.html HTTP/1.1 HOST example.com ... GET /content.json HTTP/1.1 HOST example.com ... GET /content.json HTTP/1.1 HOST example.com ... HTTP/1.1 200 OK Date: Thu, 19 Feb 2015... ...
56. Service Workers Are Network Progressive Enhancement Progressive Apps work without SW for first load & old browsers.
58. Photo: Pete LePage
59. Anatomy Of A Progressive App: The Airhorner
60. Getting Set Up For Success: TLS/HTTPS, Client & Server Render, Local Data + Sync
61. +Alex Russell @slightlylate Thank you!