A presentation on Progressive Web Apps given at the Bi-weekly Knowledge sharing session.

1. 1
Progressive Web Apps
February 2018
Gbolahan Alli
Custom Application Development

2. ● Music
● Developer
● Free Thinker
● Polyglot
● Ecosystem Development
○ @forLoopIbadan
○ @gdgibadan
About Me

3. ● Characteristics
● Service Worker
● Caching Strategies
● App Shell
● Manifest Files
● Live Demo
Agenda

4. What is a Progressive Web App ?
● Experiences that combine
the best of WEB with the
best of APP
● Becomes useful to users
from the very first visit in
a tab.
● No Install Required

5. Progressive Web Apps - Characteristics
● Progressive - Works for every user regardless of browser
and users
● App Like - Feels like an app to the user because it’s built
on the app-shell model
● Installable - Allows user to ‘keep’ apps on their home
screen without the hassle of an app store.

6. ● Responsive - Fits any form factor; desktop,mobile,tablet
etc
● Re-engageable - Makes re-engagement easy through
features like push notifications.
● Connectivity Independent - Enhanced with Service Workers
to Work Offline or on Lie-Fi.
Progressive Web Apps - Characteristics

7. Progressive Web Apps - Characteristics
● Fresh - Always up to date courtesy of service worker
update process
● Safe - Served via HTTPS to prevent snooping and ensure
content isn’t tampered with.

8. Our Discussion - today
● Connectivity Independent
● App - like
● Installable

9. Progressive Web Apps - Service Worker
What is a Service Worker ?
A script run by the browser in the background, separate from a
webpage, that opens the door to features which don’t need a
web page or user interaction
Read more : http://www.html5rocks.com/en/tutorials/service-worker/introduction/
CONNECTIVITY INDEPENDENT

10. Service Workers - Characteristics
● CONNECTIVITY INDEPENDENT - Service worker can “hijack”
network requests, giving you the developer absolute control.
● It is a Javascript file
● Can’t access the DOM directly. Can communicate with pages is
through postMessage.
● Terminated when idle. Restarted when needed.
● Persist data using IndexedDb or something similar1
● Service workers make extensive use of promises2
Read more : http://www.html5rocks.com/en/tutorials/service-worker/introduction/
, http://www.html5rocks.com/tutorials/es6/promises/

11. Service Workers - LifeCycle

12. Service Workers - Registering
( function() {
'use strict';
if (navigator.serviceWorker) {
//Registration Logic goes here
}
})();

13. Service Workers - Events
self.addEventListener(‘install’, function(reg) { // LOGIC GOES
HERE
})
self.addEventListener(‘activate’, function(event) { //LOGIC GOES
HERE
})
self.addEventListener(‘fetch’, function(event) { //LOGIC GOES
HERE
})
self.addEventListener(‘message’, function(event) { //LOGIC GOES
HERE
})

14. Progressive Web Apps - Installable
● A json file
● User can Add App to Homescreen
● Easy access to Web App from homescreen
● Add a Manifest.json file to your app’s directory
Read more : https://www.w3.org/TR/2016/WD-appmanifest-20160331/

15. Progressive Web Apps - Installable
Read more : https://www.w3.org/TR/2016/WD-appmanifest-20160331/
{
"short_name": " ",
"name": "",
"icons": [ {
"src":" ",
"sizes": " ",
"type": " "
} ],
"start_url": " ",
"background_color": " ",
"theme_color": " ",
"display": " "
}

16. Caching Strategies - Responding to requests
Read More : https://jakearchibald.com/2014/offline-cookbook/
https://jakearchibald.com/2016/caching-best-practices/
● Cache Only
● Network Only
● Cache, falling back to Network
● Cache & Network Race
● Network, falling back to Cache
● Cache then network

17. Type this URL into your browser :
https://gbolarhan.github.io/fbn-kss/
TURN OFF YOUR DATA
Hit Refresh!

18. QUESTIONS ?!

19. Eshe! Na Gode! Daalụ!
Thanks! Danke ! Merci!
Obrigado! धन्यवाद !

20. Sources
● The Offline CookBook by Jack Archibald -
https://jakearchibald.com/2014/offline-cookbook/
● Offline Web Applications on Udacity -
https://www.udacity.com/course/offline-web-applications--ud899
● Google Developers - https://developers.google.com/web/progressive-web-
apps/
● Service Workers - https://developer.mozilla.org/en-
US/docs/Web/API/Service_Worker_API
● Source Code : https://github.com/gbolarhan/fbn-kss