The document discusses the evolution and future potential of the web, particularly in relation to mobile applications, emphasizing the need for improvements in mobile web experiences and the advantages of progressive web apps. It highlights the challenges faced by the web, such as distribution friction and the lack of a cohesive app model, while also showcasing successful implementations and the potential for web technologies to match native app performance. Overall, the piece reflects on the necessity for innovation within web development to keep pace with user expectations and technological advancements.

1. The Future of The Web
+Alex Russell
@slightlylate
Does It Have One?

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/web-service-workers-manifest-push

3. Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon San Francisco
www.qconsf.com

6. flickr.com/photos/frogman2212

7. flickr.com/photos/usoceangov

8. WE WON ON
DESKTOP!

9. ...JUST IN TIME
FOR MOBILE TO
EAT THE WORLD

10. Where Do We Stand?

11. 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

12. vs.
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
13% 87%
Mobile web Apps

16. IT'S NOT
THE TECH
*: At least not the bits we fixate on.
*

17. What's Actually Holding
The Web Back On Mobile?

18. THIS S**T

20. IT'S 2015

21. No Other Platform Runs
Desktop Apps On Phones

22. flickr.com/photos/monado/4405843023

24. The Web Has No App Model

25. example.com/
example.com/parts/item
vs.

26. Boring Browser Stuff:
1. The great GPU divide
2. Input metaphor retrofit
3. Chip architecture switch

27. So, What Explains All
This E-Commerce
Success?

28. 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

29. 80%OF TIME SPENT IS IN
USERS’ TOP 3 APPS
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

30. fiksu.com/resources/fiksu-indexes

31. flickr.com/photos/dhollister

32. flickr.com/photos/marktee

33. More Advice We Actually
Have To Give In 2015:

34. average apps used
per month by
a mobile user
27
sites navigated to per
month by the average
Chrome for Android user
100+
Source: Nielsen Mobile Report June 2015

35. Distribution Is The Hardest
Problem In Software
flickr.com/photos/blakespot/

36. IT'S THE
FRICTION

37. Load store
Click install
Accept permissions
Download, wait...
Find in store
Use
Let’s say I
intrigued
~1000 of you
800
640
512
410
328
262
“In a consumer
mobile app, every
step you make a
user perform
before they get
value out of your
app will cost you
~20% of users...”
http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

38. ...but what if I
can get users
directly into a
store/install
flow?
Click install 800
Accept permissions 640
Download, wait 512
Find, Use 410

41. flickr.com/photos/128220700@N05

42. So What's Missing?
1. Homescreen Access
2. Push Notifications
3. Offline

43. 1. Homescreen Access
Less typing, more tapping.

50. "PROGRESSIVE WEB APPS"

52. ...
<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

53. <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

54. 2. Push Notifications
Equal access to system UI matters

56. 1. Works Even If Browser Closed
2. Requires Service Worker
3. Doesn't Require Install

57. +50%
repeat visits within 3 months

58. 3. Offline That Works™
It isn't an app if it doesn't start when you tap.

62. Gears Started in 2006
Browsers Have Failed
at Offline for ~10 Years

63. 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
...

64. 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...
...

65. Service Workers Are
Network Progressive
Enhancement
Progressive Apps work without SW for first load & old browsers.

66. Load URL
Use
Progressive upgrade...
// register Service Worker in index.html
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/v1/sw.js').then(reg => {
console.log("Registration succeeded!");
}).catch(error => {
console.log("Registration failed with" + error);
});
}
Service Worker begins the
progressive upgrade by
initiating the registration
process while the user is
interacting with the page...

68. Photo: Pete LePage

69. Anatomy Of A
Progressive App:
The Airhorner

70. https://airhorner.com

71. Getting Set Up For Success:
TLS,
Client & Server Render,
Local Data + Sync

73. +Alex Russell
@slightlylate
Thank you!

75. November 2015 - Flipkart re-launches mobile web app
"There have been a few turning points in the history of
the web platform that radically changed how web apps
were built, deployed and experienced."
"Mobile Engineering team at Flipkart discovered that
with right set of capabilities in a browser, a mobile web
app can be as performant as a native app."
"We believe more browser companies and developers
will start thinking in these lines and make web apps even
better. The web is truly what you make of it, and we have
only just begun."

77. Facebook presenting at @Scale

78. Push notifications are working!

79. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/web-
service-workers-manifest-push