A gentle Introduction to the concept of Progressive Web Apps, explaining the key concept needed to build a website/app that works even when your user is on a flaky network.

1. Progressive Web Apps:
A Gentle Introduction

2. About Me
Auwal Muhammad Samu
Developer | Tech Evangelist | Community
Organiser| Lover of JS | Fan of Python |
Tweet @auwalms_

3. What are Progressive
Web Apps?
4

4. “
PWAs are apps that leverage on modern
web APIs to deliver app like user
experience

5. “
Progressive Web Apps are apps built with
modern web technologies, basically HTML,
CSS and JavaScript but delivers app like
features.

6. Features of PWA5

7. Features of PWA includes:
◉Progressive
◉Installable
◉Reliable
◉Fast
◉Engaging
◉Safe
◉Fresh
◉Linkable

8. Why build PWA?6

9. Save Users from
Downasaur / Dinosaur Lie-Fi
Image Source: Google Developers

10. Why Build PWA?
◉Work reliably, no matter the network
conditions
◉Saved Data/Memory Usage
◉Easily Updatable
◉App communication is secured.

11. Components of PWA?7

12. What you need:
◉Application Shell
◉Service Worker
◉Manifest

13. Application Shell8

14. “
An 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
- Google Developers

15. Source: Google Developers

16. Service Worker9

17. “
A service worker is a script that your browser runs in the
background, separate from a web page, opening the door to
features that don't need a web page or user interaction.
Today, they already include features like push
notifications and background sync.
- Google Developers

18. “
Service workers essentially act as proxy servers that sit
between web applications, and the browser and network
(when available). They are intended to (amongst other
things) enable the creation of effective offline experiences,
intercepting network requests and taking appropriate action
based on whether the network is available and updated
assets reside on the server.
- Mozilla Developer Network

19. Source: Google Developers

21. Service Worker is for the second
load

22. Life Cycle of a Service Worker
Installing the Service Worker
1st Page Load
install
idle

23. Life Cycle of a Service Worker
Installing the Service Worker
2nd Page Load
activated check for update

24. Life Cycle of a Service Worker
Updating a Service Worker
2nd Page Load
activated check for update
install
idle

25. Registering a 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);
});
}

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

27. Add and activate the SW
self.addEventListener('activate', function(e) {
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName) {
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});

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

29. Caching Resource

30. Cache and Network Race

31. Generic Fallback

32. You may check this out!

33. App Manifest9

34. “
The web app manifest is a simple JSON file that gives you,
the developer, the ability to control how your app appears to
the user in the areas that they would expect to see apps (for
example the mobile home screen), direct what the user can
launch and more importantly how they can launch it.
- Google Developers

35. Web Manifest Structure
{
"name": “Konga EZ",
"short_name": “Konga EZ",
"icons": [ {
"src": "img/icon-48x48.png",
"sizes": "48x48",
"type": "image/png“,
"src": "img/icon-72x72.png",
"sizes": “72x72",
"type": "image/png“,
"src": "img/icon-48x48.png",
"sizes": “96x96",
"type": "image/png“,
}],
"start_url":"index.html?launcher=true",
"theme_color": "#29629E",
"background_color": "#29629E",
"display": "standalone“
}
<link rel="manifest" href="/manifest.json">
Splash screen to be
added

36. App Installation
Using Manifest, the
user is prompted to
“Add to Home
Screen” serving the
same purpose as
installing apps from
store

37. Push Notification
To keep users
engaged, developers
can prompt for
permission to send
push notification to
their users.
Extra

39. Resources:
◉Progressive Web Apps - https://developers.google.com/web/progressive-web-
apps
◉Udacity: Intro to PWA - https://www.udacity.com/course/intro-to-progressive-web-
apps--ud811
◉PWA[Mozilla Dev Network] - https://developer.mozilla.org/en-
US/docs/Web/Apps/Progressive
◉Google IO17 Talk on PWA - https://events.google.com/io/schedule/?section=may-
17&sid=943de475-c3f2-4069-8d07-435686e6b217&track=mobileweb
◉The offline cookbook - https://jakearchibald.com/2014/offline-cookbook/

40. Any Question(s)?
◉ Tweet: @auwalms_
Thanks!