Progressive Web Apps use new web platform technologies like manifest files and service workers to deliver app-style experiences to users on the mobile web. By adding features normally only available to native apps, like home screen shortcuts, push notifications, and offline access, Progressive Web Apps improve user engagement. For example, one Progressive Web App saw time spent increase 3x and returning visitor rates rise by 63% after adding these capabilities. While browser support for the required technologies is still evolving, Progressive Web Apps provide a path for the mobile web to better compete with native apps.

1. Progressive Web Apps with
Polymer
@marcushellberg / vaadin

2. State of the web on mobile

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

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

5. What's holding back the web
on mobile?

6. THIS S**T

7. IT'S 2016

8. No other platform tries to run
desktop apps on phones

9. NOPE.

11. The web has no app model

12. example.com/
example.com/parts/item
vs.

14. The problem is friction

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

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

18. fiksu.com/resources/fiksu-indexes

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

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

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

23. Today's Mobile Web: Broad Reach, Low Engagement
Top 1000 mobile apps vs. top 1000 mobile web properties
10.9
Monthly unique visitors (MM)
3.3
Average minutes per visitor
Mobile webApps
8.9
201.8
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

24. What's missing?
1.Home screen access
2.Push Notifications
3.Offline support

25. 1. Home screen access

27. Progressive Web Apps!

28. Currently, On EVERY PAGE

29. <meta name="theme-color" content="#303F9F">
<link rel="manifest" href="manifest.json">
HTML
{
"short_name": "Air Horner",
"name": "Air Horner",
"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

31. Time Spent on Flipkart Lite
3x
70 seconds 210 seconds

32. Returning Visitors week over week
40%

33. +63%
Conversions from Homescreen
visits

34. 2. Push notifications

35. 1. Works even if browser closed
2. Requires Service Worker
3. Needs permission, not Install

36. Respectful Prompts Succeed

37. +50%
repeat visits within 3 months

38. 26%
increase in average spend
per visit by members arriving
via a push notification
72%
increase in time spent for users
visiting via a push notification

39. 3. Offline support

41. Enter service worker

43. Event-driven
Best-effort while executing event handlers
Shut down between events
Idle SWs can be reclaimed to limit memory use
Only one active instance
1:N SW/tabs. Node-like I/O via events

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

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

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

48. Impact of speed on bounce rates
Source: SOASTA; September, 2015
2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
180,000
140,000
100,000
60,000
0
20,000
58
45
32
19
0
6
Sessions
Load time (in seconds)
Bouncerate(%)
Sessions Bounce rate
13%
bounce
rate
20%
bounce
rate
58%
bounce
rate

50. Are we there yet?

56. "Becoming a more frequent request.
We should do it."
https://trac.webkit.org/wiki/FiveYearPlanFall2015

60. ...

63. 1. Application shell

65. Speed tip: don't block the initial
render

68. Vulcanize all the things

71. 2. Setting up caching

74. Created by gulpfile
cache-config.json
index.html

75. Caching strategies
networkFirst – check network first, fall back on cache
fastest – hit both network and cache at the same time, return faster
networkOnly – bypass cache

77. 2. Data sync

78. Service Worker?

82. 4. Push notifications

84. https://github.com/notwaldorf/caturday-post

85. https://github.com/vaadin/expense-manager-demo

86. Finally: a few tips

87. chrome://flags/#bypass-app-banner-engagement-checks

88. chrome://inspect

91. Resources
Poylmer Starter Kit
developers.google.com/web/tools/polymer-starter-kit
Polymer Slack
polymer-slack.herokuapp.com
Getting Started With Progressive Web Apps tutorial
addyosmani.com/blog/getting-started-with-progressive-web-apps
SW Toolbox
github.com/GoogleChrome/sw-toolbox

92. Questions?

93. thanks!
marcus@vaadin.com
@marcushellberg
ſ @marcus