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. What are the non-technical doubts about using it? How does it work? Is it worth to dig into PWA now?

1. Image: https://yourstory.com/2017/03/progressive-web-vs-native-apps-will-mobile-experience/

2. Johannes Weber
@jowe

4. Why?
What & How?
Challenges.

5. Why PWA?

6. Take Web Contentm make them offline
and usable on mobile.

8. Android OS Fragmentation by Device. Source: OpenSignal

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

10. What are PWA?

11. What is a “Progressive Web App”?
Progressive because it works for every user
on any browser.
Responsive because it fits any form factor.
Connectivity Independent because it is
designed with the worst network in mind
App-Like as a result of the separation of
functionality from application content.
Fresh due to the service workers updating
content in the background.
Safe because it is served over HTTPS.
Discoverable since search engines are
better able to identify it as an application.
Re-engageable through features like push
notifications.
Installable on a user’s home screen for easy
access.
Linkable through a simple url.

12. airhorner.com

13. How to start with PWA?

14. Precondition: be on HTTPS!

15. Pruning the Critical Path
Tolerating Network Instability
App Like Characteristics

16. You Can't Optimize What You
Can't Measure

17. Image: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp?hl=de

18. Image: https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2

19. Request

20. HTML
CSS
DOM
CSSOM
JavaScript
Render
Tree
Layout PaintNetwork
Critical rendering path

21. HTML
CSS
DOM
CSSOM
JavaScript
Render
Tree
Layout PaintNetwork
Critical rendering path

22. DNS Lookup TCP Connection
HTTP Request
and Response
Server
Response Time
Client-Side Rendering
Network
processing and
rendering the page
100ms 150ms 150ms 200ms 400ms
One second on a mobile device

23. Image Source: Aumcore.com
Offline That Works
It isn't an app if it doesn't start when you tap.

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

25. e
// 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...
...

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

27. Image: https://developers.google.com/web/fundamentals/getting-started/primers/
Worker ThreadMain Thread

29. Service Workers Are
Network Progressive
Enhancement
mable Network Proxy under your control.

30. w/o ServiceWorker

31. w/o ServiceWorker
with ServiceWorker

32. Application Shell
No matter what,
east be able to say “sorry mate, I’m offline”

33. Source: https://developers.google.com/web/updates/2015/11/app-shell

34. Image: https://sokra.github.io/slides/webpack2

35. Plaing Page
/w ServiceWorker
/w ServiceWorker
/w ApplicationShell

36. DNS Lookup TCP Connection
HTTP Request
and Response
Server
Response Time
Client-Side Rendering
Network
processing and
rendering the page
100ms 150ms 150ms 200ms 400ms
Again, that’s one second on a mobile device

37. Source: https://developers.google.com/web/updates/2015/11/app-shell
Cable Connection

38. Source: https://developers.google.com/web/updates/2015/11/app-shell
3G Connection

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

40. Pruning the Critical Path
Tolerating Network Instability
App Like Characteristics

41. Pruning the Critical Path
Tolerating Network Instability
App Like Characteristics

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

43. 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"
}

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

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

46. 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"
}

47. 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"
}

48. 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"
}

49. 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!”}
}

50. 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"
}

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

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

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

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

55. Build better engagement

56. - Works if Browser Closed
- Needs Permission

57. +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

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

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

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

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

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

63. Pruning the Critical Path
Tolerating Network Instability
App Like Characteristics

64. Challenges.

65. Is it worth to dig into
PWA now?

67. More on https://www.pwastats.com

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

69. Global Smartphone Sales. Source: Gartner

70. webpack and PWA

72. Use Route-Based Code Splitting

75. Use Smaller Images

76. Image: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

77. Image: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

78. Delay ServiceWorker Registration

79. Image: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

80. Image: https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3

82. THANK YOU!

83. 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.9kr8cip
k9uk7
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

84. https://github.com/GoogleChrome/sample-currency-converter
https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures
https://habd.as/monitor-pwa-website-performance/
https://github.com/paulirish/pwmetrics
https://developers.google.com/web/showcase/
https://www.pwastats.com/
https://github.com/GoogleChrome/sw-toolbox
Related Links