There’s been a lot of talk lately about Progressive Web Apps. The main purpose is to provide an app-like user experience. For those who haven’t heard of them, progressive web apps aim to bridge the gap between the mobile web and native apps by providing things like the ability to install, provide offline support, run background processes and send push notifications. How does it work? What does it mean from the technical point of view? Is it worth to dig into PWA now? What are the non-technical doubts about using it? Johannes Weber shows PWA in action and is intended to answer all these questions.

1. Are Progressive Web Apps the Future of Web
Development?

2. ● Current state of Apps
● PWAs
● Manifest
● Service Worker
● Push Notifications
● Outlook
What’s up today?

3. Johannes Weber
@jowe

6. https://www.fiksu.com/resources/fiksu-indexes/

7. “Every Step Costs You 20% of Users”

8. 800
640
512
410
328
262

9. 800
640
512
410

10. So why does this happen?

11. http://beetfusion.com/blogs/sujit-singh/asking-key-roi-questions
Easy to Launch
Immetiate Value
Offline (mostly)
Handle slow Connections
Push Notifications
Device Access

13. Progressive Web Apps

14. airhorner.com

15. What is a “Progressive Web App”?
● Works offline
● Launches from home screen
● Hides URL bar
● Branded colors
● "First class" treatment in OS
● Push notifications (optional)

16. Add to homescreen
Is not Bookmarking

17. example.com
vs.
example.com/blog/2016/08/PWA

19. Next Steps
● Be on HTTPS
● Add a manifest to control the how your experience is
shown and launched
● Use Service Worker and make it work offline
● Control the prompting experience

20. Installable web apps in 2 simple steps
{
"name": "The Airhorner",
"short_name": "Airhorner",
"icons": [],
"start_url": "index.html",
"display": "standalone",
"theme_color": "",
"background_color": ""
}
1. Create a manifest (json)
<link rel="manifest"
href="/manifest.json">
2. Link it to your page

21. Flow
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}

22. Homescreen
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}

23. App switcher
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}

24. Splash screen: part 1
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}

25. How to launch: standalone
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}

26. How to launch: browser or fullscreen
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"display": "standalone", // browser or fullscreen
"orientation": "portrait",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}

27. How to launch: standalone
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}
@media (display-mode: standalone) {
h3:after { content “ in standalone mode!”}
}

28. How to launch: window
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}

29. How to launch: window
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html",
"display": "fullscreen",
"orientation": "landscape",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}
andreasbovens.github.io/inbox-attack

30. What to Launch
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html?homescreen", // statistics....
"display": "standalone",
"orientation": "portrait",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}

31. What to Launch
{
"name": "The Air Horner",
"short_name": "Air Horner",
"icons": [
{
"src": "images/Airhorner_192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html?homescreen", // statistics....
"display": "standalone",
"orientation": "portrait",
"theme_color": "#2196F3",
"background_color": "#2196F3"
}
Must Match the
ServiceWorker

32. Resources
Guides https://goo.gl/UrOYcG
Samples https://goo.gl/phPpab
Spec w3c.github.io/manifest/

33. Next Steps
● Be on HTTPS
● Add a manifest to control the how your experience is
shown and launched
● Use Service Worker and make it work offline
● Control the prompting experience

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

35. 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
cache-control: must_revalidate,
public, max-age=3600
...

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

37. // 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);
});
});
}
};

39. Service Workers Are
Network Progressive
Enhancement
A Programmable Network Proxy under your control.

41. Service Workers are to
Progressive Web Apps as
XMLHttpRequest was to Ajax
The foundational capability that was a tipping point for innovation

42. Resources
Guides https://goo.gl/S1yWWe, http://goo.gl/2rPg9B
Samples https://serviceworke.rs, https://goo.gl/nnPd7p
Spec slightlyoff.github.io/ServiceWorker/spec/service_worker

43. Next Steps
● Be on HTTPS
● Add a manifest to control the how your experience is
shown and launched
● Use Service Worker and make it work offline
● Control the prompting experience

44. Push Notifications
How can we re-engage users at the right time?

45. 1. Works if Browser Closed
2. Needs Permission

46. +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
+50%repeat visits within 3 months

47. Push & Notification Flow

48. Subscribing Users
Ask User to
Subscribe
User
Subscribes
Send End
Point Details
Check If User Is
Subscribed
Save End
Point Details
Browser Server

49. Sending Messages
Send to End
Point
Send To
Browser
Received by
Browser
Generate Message
Server End Point Client

50. Receiving Messages
SW Starts
Handle
Message
Show
Notification
Push Arrives
Client

51. API’s
● Notification API
Handles notification display
● Service Workers API
Handles the push message when it arrives
● Push API
Enables users to (un)subscribe and receive push messages

52. Build better engagement

53. Resources
Guides https://goo.gl/1uUCGk
Samples gauntface.github.io/simple-push-demo/
Spec w3.org/TR/push-api

55. https://jakearchibald.github.io/isserviceworkerready/index.html

56. ● Reliable: Fast loading, offline and on flaky networks
● Fast: Smooth animation, scrolling and nav
● Engaging and integrated
On the home screen, no URL bar, icons, splash
● Re-engaging with push notifications
● Consistent experience across browsers
The Progressive Web App Experience

57. THANK YOU

58. https://github.com/pazguille/offline-first
https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
https://docs.google.com/document/d/1y94QHbYW2Xmob6vPX2BMBvm50ojR0qD9KEwMBTHNBLg/edit#heading=h.9kr8ci
pk9uk7
https://docs.google.com/document/d/1JlKBWmowi9sA5_9FCMBt9WJbTKHc9g6CYZksToCtfd4/edit#
https://serviceworke.rs/
https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web?hl=en
https://public.etherpad-mozilla.org/p/pwa-nexmo
https://ponyfoo.com/articles/serviceworker-revolution
https://ponyfoo.com/articles/progressive-networking-serviceworker
Related Links