Mozilla's View Source 2016 in Berlin

1. Chris Wilson
@cwilso
Google
Progressive Web Apps

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

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

8. ZERONUMBER OF APPS
AVERAGE USER
INSTALLS PER MONTH
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

9. Capability
Reach

10. Capability
Reach

11. Capability
Reach

12. are (a new level of) caring about
the quality of your user experience
Progressive Web Apps

13. Reliable
User experiences need to be...

15. Lie-Fi

16. Reliability means
never showing the Downasaur

17. Reliable Fast
User experiences need to be...

18. of users abandon sites that take
longer than 3 seconds to load40%

19. Reliable Fast Engaging
User experiences need to be...

20. Full screen,
theming,
orientation, etc.
Push
notifications
Immersive Notifications
Engaging
Auto-adding to
Home Screen
Home Screen

21. https://wapo.com/pwa
https://wapo.com/pwa

28. `80ms
article page load time in
the Progressive Web App
Poynter article

29. Reliable Fast Engaging
Progressive Web Apps are…

30. How do you get
started?

31. Focus on the User

32. Stay Secure

33. `
HTTPS: Secure connection
between site and users

34. The Cost of HTTPS
Certificate Search Ranking

36. Let’s Encrypt is a trademark of the Internet Security Research Group.

37. The Cost of HTTPS
Certificate Search Ranking

38. Search Ranking
Guidance
bit.ly/https-migration

39. Build a Service Worker

40. Web server

41. Service worker
Client side proxy
(written in JavaScript)
Cache
Web server

42. Service Worker Life Cycle
• Adds app-like lifecycle to a page
• Wakes up only when the OS says
• Only responds to system events
Activated Error
Idle
Active Terminated
Install
Register

43. Service Worker Life Cycle
• Adds app-like lifecycle to a page
• Wakes up only when the OS says
• Only responds to system events
Activated Error
Idle
Active Terminated
Install
Register

44. Service Worker Life Cycle
• Adds app-like lifecycle to a page
• Wakes up only when the OS says
• Only responds to system events
Activated Error
Idle
Active Terminated
Install
Register

46. Service Worker Life Cycle
• Adds app-like lifecycle to a page
• Wakes up only when the OS says
• Only responds to system events
Activated Error
Idle
Active Terminated
Install
Register

47. is for the SECOND load.
Service Worker

48. Implementing a simple Service Worker

49. Register the Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

50. Register the Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(reg) {
console.log('Service Worker Registered', reg);
})
.catch(function(err) {
console.log('Error registering Service Worker', err);
});
}

51. Activated Error
Idle
Active Terminated
Install
Register
Pre-fetch the App Resources

52. Pre-fetch the App Resources
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', ...];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
}).then(function() {
return self.skipWaiting();
})
);
});

53. Pre-fetch the App Resources
var cacheName = 'app-shell-cache-v1';
var filesToCache = ['/', '/index.html', ...];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(cacheName).then(function(cache) {
return cache.addAll(filesToCache);
}).then(function() {
return self.skipWaiting();
})
);
});

54. Activated Error
Idle
Active Terminated
Install
Register
Not Done Yet...

56. Add a fetch Event Handler
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

57. Add a fetch Event Handler
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

58. Add a fetch Event Handler
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

59. Add a fetch Event Handler
self.addEventListener('fetch', function(e) {
e.respondWith(
caches.match(e.request).then(function(response) {
return response || fetch(e.request);
})
);
});

60. Activated Error
Idle
Active Terminated
Install
Register
Ready to Go!

61. control
YOU ARE IN

62. Caching strategies galore!

63. Engage Your Users

64. Add to
Home Screen

65. Add To Home Screen
Was Broken

66. Add To Home Screen
Was Broken
Required user interaction
Buried deep in menus

67. Add To Home Screen
Was Broken
Required user interaction
Buried deep in menus
Where would it start?
Dependent on bookmark

68. Add To Home Screen
Was Broken
Required user interaction
Buried deep in menus
Where would it start?
Dependent on bookmark
Would it work offline?
Users didn't expect offline

69. Add To Home Screen
Was Broken

70. <link rel="manifest" href="/manifest.json">
{
"name": "The Washington Post",
"short_name": "Wash Post",
"icons": [{
"src": "icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {...}],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait",
"background_color": "#000000",
"theme_color": "#000000"
}

71. manifest.json
{
"name": "The Washington Post",
"short_name": "Wash Post",
"icons": [{
"src": "icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {...}],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait",
"background_color": "#000000",
"theme_color": "#000000"
}

72. manifest.json
{
"name": "The Washington Post",
"short_name": "Wash Post",
"icons": [{
"src": "icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {...}],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait",
"background_color": "#000000",
"theme_color": "#000000"
}

73. manifest.json
{
"name": "The Washington Post",
"short_name": "Wash Post",
"icons": [{
"src": "icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {...}],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait",
"background_color": "#000000",
"theme_color": "#000000"
}

74. manifest.json
{
"name": "The Washington Post",
"short_name": "Wash Post",
"icons": [{
"src": "icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {...}],
"start_url": "/index.html",
"display": "standalone",
"orientation": "portrait",
"background_color": "#000000",
"theme_color": "#000000"
}

75. `
Good, but what
about prompt to
install?

76. A Promise to the User
Consistent
Experience
Works
Offline
The User is
Engaged

77. `
Web Push
Notifications

78. `
Web Push
Notifications
The browser doesn’t need to be open!

79. `

80. `
38%
open rate
9x
more conversions on
previously abandoned carts

81. Built on Service Workers
example.com
/* ServiceWorker.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 /content.json HTTP/1.1
HOST example.com
GET /content.json HTTP/1.1
HOST example.com
GET /app.html HTTP/1.1
HOST example.com

82. Built on Service Workers
/* ServiceWorker.js */
onpush = function(event) {
var data = event.data.json();
var t = data.title;
var opt = {
body: data.body,
icon: data.icon,
tag: data.tag
};
self.registration
.showNotification(t, opt);
};
End Point
example.com

83. Stay Secure

84. Use a Service Worker

85. Engage Your Users

86. `

87. `
2x more
page views
74% increase
in time spent

88. `
2x more
page views
74% increase
in time spent
82% more
conversions on iOS

89. is progressive.
Progressive Web App

90. not the tech.
Focus on the user

91. Go build!
meow