Progressive Web Applications are a new way to think about using the web to provide great user experiences using the best web platform features. The education market has many opportunities to benefit their communities using PWAs to deliver information and application experiences across all devices and platforms.

1. PROGRESSIVE WEB APPS
& EDUCATION
How Developers Can Build Web Sites With Native App User Experience
and the Natural Advantages the Web Offers Businesses and Customers

2. http://bit.ly/2j3sAlG
@chrislove
chris@love2dev.com
www.love2dev.com
CHRIS LOVE

3. http://bit.ly/2uaKQjT
@spartanobstacle @normalfatguy
chris@love2dev.com
SpartanObstacles.com
NormalFatGuy.com
CHRIS LOVE

4. RESOURCES
Slide URL SlideShare – https://slideshare.com/docluv
Source Code – https://github.com/docluv
Progressive Web Apps – https://love2dev.com/pwa/

5. PWA BEGINNER TO EXPERT
PWACourse.com
Over 21 Hours of
Video + Resources
$29

6. PWA DEVELOPMENT BY EXAMPLE
• 3 Example PWAs
• What a PWA is
• How to Quickly Upgrade
• Service Worker Life Cycle
• Basic Service Worker Caching
• Advanced Service Worker
Caching
• Web Performance Best Practices
• Tools to Help Create a PWA
• https://amzn.to/2A0DLU1

7. WHAT IS A PROGRESSIVE
WEB APP?
THE MODERN WEB

8. "A new way to
deliver amazing
user experiences
on the web“
http://bit.ly/2m8GwK2

9. This new level of
quality allows
Progressive Web
Apps to earn a
place on the user's
home screen

10. FAST
Responds
Quickly To
User
ENGAGING
Immersive
User
Experience
RELIABLE
Works Online
Offline
Poor
Connectivity
INTEGRATED
User
Should not
Realize It is
a Browser

11. CHRIS WILSON
Chrome
“Progressive Web Applications:
A New Level of Thinking About the
Quality of Your User Experience”
https://www.youtube.com/watch?v=EErueQdEXMA

12. ALEX RUSSEL
Chrome
“These apps aren’t packaged & deployed
through stores, they’re just websites that
took the right vitamins.
They progressively become apps…”

13. BRUCE LAWSON
Former Head Opera
“Native Apps are a bridging technology
(like Flash)”
http://bit.ly/2e5Cgry

14. JACOB ROSSI
Microsoft
“PWAs should be able to progressively
enhance to full-fledged apps”
http://bit.ly/2f48OTF

15. PAUL THURROTT
Technology Journalist
“This apps platform is a perfect storm of
the right ideas at the right time, a
spiritual combination of the cross-
platform dreams for Java and the
pervasive nature and openness of the
web.”
http://bit.ly/2jwgdjN

16. ITS ABOUT WHAT CUSTOMERS
STUDENTS/FACULTY WANT
Work Offline
Appear on Home Screen
Push Notifications

17. 5 BARS!

18. 1 BAR 

19. NO BARS 

20. LiFi :/

21. Apps Must
Handle
Offline

22. PWA LEGACY TECH UPGRADES
 AppCache -> Service Worker
 localStorage -> IndexDB
 Touch Icons -> Manifest
 Save to Homescreen -> Install Banner

23. Build Better Web Apps than Facebook 23

24. MOBILE WEB VS. APP USAGE
Source: comScore Mobile Metrix June 2015 – US – Age 18+
87%
13%

25. OF TIME SPENT IS IN USERS’
TOP 3 APPS
Source: comScore Mobile Metrix June 2015 – US – Age 18+
80%

26. OF TIME SPENT IS IN USERS’
TOP 3 APPS
Source: comScore Mobile Metrix June 2015 – US – Age 18+
80%

27. WE HAVE PASSED PEAK APP

28. Source: comScore Mobile Metrix June 2015 – US – Age 18+
NUMBER OF APPS
AN AVERAGE USER INSTALLS
PER MONTH

29. ALEX RUSSEL
Chrome
We’ve got pretty strong data from native
app ecosystems that users don’t use
many apps, uninstall heavily, and in
general find installation frustrating and
taxing....Most users won’t install most
PWAs most of the time, and that’s fine.
http://bit.ly/2DKFm43

32. JEREMY KEITH
I worry that the messaging around
“progressive web apps” is perhaps over-
fetishising the home screen. I don’t think
that’s the real battleground. The real
battleground is in people’s heads; how they
perceive the web and how they perceive
native.
https://adactio.com/journal/12015

33. Reach
Capabilities
Native Apps
HTML5

35. WHY PWA FOR EDUCATION
Students Come from a diverse
background and use a diverse range of
devices

36. JESSICA KRYWOSA
an industry that caters primarily to the most
tech savvy—and likely impatient—
consumers, mobile optimization and
adoption in the marketing of higher
education is crucial.
http://bit.ly/2RcuEpN

37. WHY PWA FOR EDUCATION
Education software is expensive (and
from what I can tell outdated)

38. THE WEB MANIFEST
PWA DEEP DIVE

39. WEB
MANIFEST
Creating a manifest and linking it to your
page are straightforward processes
JSON Document
Control what the user sees when
launching from the home screen
Describes Your App
Progressive Enhancement. Ignored by
legacy browsers and only downloaded
when needed.
Reference in HEAD

40. ADD TO HOMESCREEN
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
Prompting heuristics vary

41. INTRODUCTION TO SERVICE
WORKER
SERVICE WORKER

42. A VIRTUAL ASSISTANT FOR YOUR WEB SITE
A service worker is a script
that your browser runs in
the background
Manages Tasks & Features
That Don’t Require User
Interaction
Frees Up the UI Thread
for…UI Stuff

43. SERVICE WORKER
Service worker is a programmable
network proxy, allowing you to control
how network requests from your page
are handled.
It's terminated when not in use, and
restarted when it's next needed
Persistence Done With IndexDB
Can’t Communicate with DOM Directly

44. FETCH
SERVICE WORKER

45. FETCH
Replaces XMLHttpRequest
Uses Promises
Polyfil Available for Legacy Browsers
Full Support for Modern Browsers
IE 11 & Old Android Need Polyfil
* IE Should only be used for legacy sites 
Headers, Request, Response Objects

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

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

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

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

50. LIFE CYCLE
SERVICE WORKER

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

53. INSTALL
self.addEventListener('install', function (e) {
//do something
});

54. ACTIVATE
self.addEventListener('activate', function (event) {
console.log('Service Worker activating.');
});

55. ACTIVATE
self.addEventListener('install', function (e) {
e.waitUntil(…}));
self.skipWaiting();
});

56. THE PROXY SERVER IN YOUR
POCKET
SERVICE WORKER

57. CLASSIC WEB CLIENT-SERVER
Web
ServerWeb Page

58. ADD SERVICE WORKER
Web
ServerWeb Page
Service Worker

59. Web
ServerWeb Page
Service Worker

60. Web
ServerWeb Page
Service Worker
CacheIndexDB