Progressive Web Applications (PWA) is a comprehensive term describing web applications that implement a base set of browser platform features like HTTPS, Web Manifest and Service Workers. But it bleeds beyond the scope of an application's code because browsers are enabling qualified web applications to offer the same user experiences native application enjoy. This includes prominent home screen placement, push notifications, eliminated browser chrome and app store placement. Become a Progressive Web App expert with my course: Progressive Web Apps (PWA) Beginner to Expert -> http://PWACourse.com

1. Disrupting the Application
Eco-System with
Progressive Web
Applications
LOVE2DEV.COM

2. My Bio
Microsoft MVP
ASP Insider
Edge User Agent
Web Developer 25 years
Author & Speaker
@ChrisLove
Love2Dev.com

3. Slide Decks & Source Code
Source Code
http://GitHub.com/
docluv
Slide Deck
http://slideshare.net/docluv/
presentations
LOVE2DEV.COM

4. The Web Has an
Image Problem
LOVE2DEV.COM

5. LOVE2DEV.COM
Mark Zuckerberg
2012
http://tcrn.ch/2hwN6HF
“Not only was this a big mistake with
mobile, but Zuckerberg says that its
biggest mistake period was the focus
on HTML5.”

6. LOVE2DEV.COM

7. LOVE2DEV.COM

8. LOVE2DEV.COM

9. LOVE2DEV.COM

10. LOVE2DEV.COM

11. What is a Progressive Web
Application?
Defining the Front-End
LOVE2DEV.COM

12. “Progressive Web Applications:
A New Level of Thinking About the Quality of
Your User Experience”
https://www.youtube.com/watch?v=EErueQdEXMA Chris Wilson,
Google

13. “Native Apps are a bridging
technology (like Flash)”
http://bit.ly/2e5Cgry Bruce Lawson,
Opera (former)

14. “These apps aren’t packaged &
deployed through stores,
they’re just websites that took
the right vitamins.
They progressively become
apps…”
Alex Russell
Google

15. Work In
Customers
Context
Modern Web Apps

16. Modern Web Apps
A Single Code Base,
Friendly to All Platforms

17. Modern Web Apps
Operate Fast
Engage Customers
Built Very Different
From the Past

18. LOVE2DEV.COM

19. PWA Features
•Reliable - Load instantly and never show the
downasaur, even in uncertain network
conditions.
•Fast - Respond quickly to user interactions
with silky smooth animations and no janky
scrolling.
•Engaging - Feel like a natural app on the
device, with an immersive user experience.
LOVE2DEV.COM

20. PWA Features
•“install” to the home screen
•have their own icon (defined by the web
developer)
•can launch full-screen, portrait or
landscape
•but “live” on the Web
LOVE2DEV.COM

21. PWA Features
•live on the server so no update distribution
lag
•require no app store or gatekeeper
•can work offline
•are a normal website on browsers such as
Opera Mini, Safari, Windows phones
•searchable, indexable, linkable
LOVE2DEV.COM

22. PWA Features
•“Feels” like a normal app
•Push Notifications (optional)
•Background Sync (optional)
•More Coming (soon)
LOVE2DEV.COM

23. Why Build A PWA?
•Worthy of Being on the Home screen
•Work Reliably, No Matter the Network
Conditions
•Increased Engagement
•Improved Conversions
LOVE2DEV.COM

24. PWA Updates
•AppCache -> Service Worker
•localStorage -> IndexDB
•Touch Icons -> Manifest
•Save to Homescreen -> Install Banner
LOVE2DEV.COM

25. PWA Requirements
• HTTPS
• Manifest
• Service Worker
LOVE2DEV.COM
{
name: “your
application”, …
}

26. Application Loading Process
The 1st Time a User Visits
They ‘Install’ the
Application

27. •The Initial Request
•Contains Critical Path Assets
• Master Layout HTML + CSS Inline
• Initial Possible Views
• Initial View’s CSS
• Core Application JavaScript + Initial View’s
Controllers
Application Loading Process

28. •Deferred Request(s)
•Contains Additional View HTML, CSS and
JavaScript
Application Loading Process

29. PWA Application Shell
LOVE2DEV.COM
Basic CSS
Basic JavaScript
Core HTML

30. Application Shell
•The app "shell" is the minimal HTML, CSS
and JavaScript required to power the user
interface and when cached offline can
ensure instant, reliably good performance
to users on repeat visits
LOVE2DEV.COM

31. Application Shell
•The Approach For Single Page Applications
•Aggressively Cache Content via Service
Worker
•Get Initial HTML on the Screen without a
Network
•Content Rendered via Using JavaScript
LOVE2DEV.COM

32. Benefits
•Reliable performance that is consistently
fast
•Native-like interactions
•Economical use of data
LOVE2DEV.COM

33. Manifest File
• Creating a manifest and linking it to your page are
straightforward processes.
• Control what the user sees when launching from the
home screen.
• This includes things like a splash screen, theme colors,
and even the URL that's opened.
LOVE2DEV.COM

34. Manifest File
<head>
…
<link rel="manifest" href="/manifest.json">
</head>
LOVE2DEV.COM

35. Manifest File
{
"name": "Fast Furniture",
"short_name": "Fast Furniture",
"icons": [
{
"src": "Fast-Furniture-64x64.gif",
"sizes": "64x64",
"type": "image/gif"
},
... ],
"start_url": "/",
"display": "standalone",
"background_color": "#F99D36",
"theme_color": "#55B4F6"
}
LOVE2DEV.COM

36. Include
•A short_name for use as the text on the
users home screen.
•A name for use in the Web App Install
banner.
LOVE2DEV.COM

37. start_url
•Allows you to control what page is loaded
when application is launched
•Without start_url the current page (route)
is assumed to be the start page
LOVE2DEV.COM

38. display
•Control display type and page orientation
• standalone | browser
• portrait | landscape
LOVE2DEV.COM

39. Manage Manifest in F12
LOVE2DEV.COM

40. Manifest File Tools
• Manifest Generator
http://brucelawson.github.io/manifest/
•Manifest validator manifest-
validator.appspot.com
LOVE2DEV.COM

41. Manifest File Tools
• Manifestation Node Module
•https://github.com/patrickkettner/manifes
tation
LOVE2DEV.COM

42. HTTPS
•Because PWAs Require a Service Worker
They Must Be Secure
•HTTPS Protects Against Man in the Middle
Atacks
LOVE2DEV.COM

43. HTTPS
•Certificates Are Cheap Today
•LetsEncrypt.org
• Free, but very technical process
•AWS Certificate Manager (free!!!)
LOVE2DEV.COM

44. Service Workers
•Allow Offline Capabilities
•Native Resource Caching
•Allow Push Notifications
•Data Synch*
* Near Future
LOVE2DEV.COM

45. Fetch
The New AJAX
LOVE2DEV.COM

46. Fetch
• Replaces XMLHttpRequest
• Uses Promises
• Polyfil Available for Legacy Browsers
• Full Support for Modern Browsers
• IE 11 & Old Android Need Polyfil
• Headers, Request, Response Objects
LOVE2DEV.COM

47. The Fetch API provides a JavaScript
interface for accessing and manipulating
parts of the HTTP pipeline, such as requests
and responses. It also provides a global
fetch() method that provides an easy, logical
way to fetch resources asynchronously across
the network.
LOVE2DEV.COM

48. if (typeof fetch === "undefined" ||
fetch.toString().indexOf("[native code]") === -1) {
scripts.unshift("js/libs/fetch.js");
}
LOVE2DEV.COM

49. var myImage = document.querySelector('img');
fetch('flowers.jpg')
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
LOVE2DEV.COM

50. Supply Request Options
• method
• headers
• body
• mode
• credentials
• cache
• redirect
• referrer
• referrerPolicy
• integrity
LOVE2DEV.COM

51. var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
fetch('flowers.jpg',myInit)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
LOVE2DEV.COM

52. Verify Succesful Response
• Will Reject With a TypeError For Network Error
• 404 is Not an Error
• Check Response.OK
LOVE2DEV.COM

53. fetch('flowers.jpg').then(function(response) {
if(response.ok) {
response.blob().then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
} else {
console.log('Network response was not ok.');
}
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation:
' + error.message);
});
LOVE2DEV.COM

54. Create Custom Request Object
LOVE2DEV.COM

55. var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
var myRequest = new Request('flowers.jpg', myInit);
fetch(myRequest)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
LOVE2DEV.COM

56. Body Object
• ArrayBuffer
• ArrayBufferView (Uint8Array and friends)
• Blob/File
• string
• URLSearchParams
• FormData
LOVE2DEV.COM

57. Body Object Extraction Methods
• arrayBuffer()
• blob()
• json()
• text()
• formData()
LOVE2DEV.COM

58. var form = new
FormData(document.getElementById('login-form'));
fetch("/login", {
method: "POST",
body: form
});
LOVE2DEV.COM

59. RespondWith()
• Resolves
• Respond
• Network Error
LOVE2DEV.COM

60. self.addEventListener('fetch', function(event) {
console.log('Handling fetch event for', event.request.url);
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
console.log('Found response in cache:', response);
return response;
}
console.log('No response found in cache. About to fetch from network...');
return fetch(event.request).then(function(response) {
console.log('Response from network is:', response);
return response;
}).catch(function(error) {
console.error('Fetching failed:', error);
throw error;
});
})
);
});
LOVE2DEV.COM

61. Service Workers
More Than an AppCache Replacement
LOVE2DEV.COM

62. Service Workers
• allows developers to cache assets when connected,
and intercept failed calls to network when offline, so
user experience can be maintained
LOVE2DEV.COM

63. Service Workers
• Faster loading of assets, even
when online
• Fastest HTTP Request is the One
Never Made
LOVE2DEV.COM

64. Service Workers
•Push Notifications
LOVE2DEV.COM
Even When Browser Is Closed

65. if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
// Registration was successful
})
.catch(function(err) {
// registration failed :(
});
}
LOVE2DEV.COM

66. self.addEventListener('install', function (e) {
//do something
});
LOVE2DEV.COM

67. self.addEventListener('activate', function (event) {
console.log('Service Worker activating.');
});
LOVE2DEV.COM

68. LOVE2DEV.COM
Web
ServerWeb Page

69. LOVE2DEV.COM
Web
ServerWeb Page
Service Worker

70. LOVE2DEV.COM
Web
ServerWeb Page
Service Worker

71. LOVE2DEV.COM
Web
ServerWeb Page
Service Worker
Cache

72. Service Worker Cache
• Persist Files with Response Headers
• Limited by Device Resources
• Available Online & Offline
LOVE2DEV.COM

73. self.addEventListener('install', function (e) {
e.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll(filesToCache)
.catch(function (error) {
console.log(error);
});
})
);
});
LOVE2DEV.COM

74. self.addEventListener('fetch', function (event) {
//intercept fetch request (any request from the UI thread for a file or
API) and return from cache or get from server & cache it
event.respondWith(
caches.match(event.request).then(function (resp) {
return resp || fetchAsset(event);
})
);
});
LOVE2DEV.COM

75. Service Worker Cache
• Persist Files with Response Headers
• Limited by Device Resources
• Available Online & Offline
LOVE2DEV.COM

76. LOVE2DEV.COM
Web
ServerWeb Page
Service Worker
CacheIndexDB

77. LOVE2DEV.COM
5 Bars!

78. LOVE2DEV.COM
No Bars 

79. LOVE2DEV.COM
1 Bar 

80. LOVE2DEV.COM
Lie-Fi :/

81. Handling Offline
LOVE2DEV.COM

82. LOVE2DEV.COM
Web Page
Service Worker

83. LOVE2DEV.COM
Web Page
Service Worker
Cache

84. Offline API
if (!navigator.onLine) {
console.log("you are offline");
}
window.addEventListener('online', function () {
console.log("you have gone offline");
});
window.addEventListener('offline', function () {
console.log("you are back online");
});
LOVE2DEV.COM

85. Debugging Service Workers
• Use Developer Tools
• Sources
• Application
• Manifest
• Service Workers
LOVE2DEV.COM

86. LOVE2DEV.COM
Web
Server
Web
Page
Service
Worker
Cache
2
1

87. LOVE2DEV.COM
Web
Server
Web
Page
Service
Worker
Cache
2

88. self.addEventListener('install', function (e) {
e.waitUntil(
…
})
);
self.skipWaiting();
});
LOVE2DEV.COM

89. Service Worker Tools
• sw_precache
• A node module to generate service worker code that will precache
specific resources so they work offline.
• https://github.com/googlechrome/sw-precache
• sw_toolbox
• A collection of service worker tools for offlining runtime requests
• https://github.com/GoogleChrome/sw-toolbox
LOVE2DEV.COM

90. Service Worker Resources
• Is Service Worker Ready?
• https://jakearchibald.github.io/isserviceworkerready/
• Service Worker Cookbook
• https://serviceworke.rs/
LOVE2DEV.COM

91. Immersion
LOVE2DEV.COM

92. Add Application to Home Screen
• Has a web app manifest file with:
• a short_name (used on the home screen)
• a name (used in the banner)
• a 144x144 png icon
• a start_url that loads
• Has a service worker registered on your site.
• Is served over HTTPS (.
• Is visited at least twice, with at least five minutes
between visits.
LOVE2DEV.COM

93. LOVE2DEV.COM

94. LOVE2DEV.COM

95. Push Notifications
• Require Service Worker so they operate in the
background
• Work even when the browser is closed
LOVE2DEV.COM

96. • 72% increase in time spent for users visiting via a push
notification
• 26% increase in average spend per visit by members
arriving via a push notification
• +50% repeat visits within 3 month
LOVE2DEV.COM

97. Two Technologies
• push is invoked when a server supplies information to
a service worker;
• a notification is the action of a showing information to
a user
LOVE2DEV.COM

98. serviceWorkerRegistration
.showNotification(title, options);
LOVE2DEV.COM

99. {
"body": "Did you make a $1,000,000 purchase at Dr. Evil...",
"icon": "images/ccard.png",
"vibrate": [200, 100, 200, 100, 200, 100, 400],
"tag": "request",
"actions": [
{ "action": "yes", "title": "Yes", "icon": "images/yes.png" },
{ "action": "no", "title": "No", "icon": "images/no.png" }
]
}
LOVE2DEV.COM

100. Request User Permission
function initialiseState() {
if (Notification.permission !== 'granted') {
console.log('The user has not granted the notification
permission.');
return;
} else if (Notification.permission === “blocked”) {
/* the user has previously denied push. Can't reprompt. */
} else {
/* show a prompt to the user */
}
LOVE2DEV.COM

101. Request User Permission
// Use serviceWorker.ready so this is only invoked
// when the service worker is available.
navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
serviceWorkerRegistration.pushManager.getSubscription()
.then(function(subscription) {
if (!subscription) {
// Set appropriate app states.
return;
}
})
.catch(function(err) {
console.log('Error during getSubscription()', err);
});
});
}
LOVE2DEV.COM