GDG Ibadan #pwa

Progressive Web Apps Dev Summit
Gbolahan Alli
July 23rd , 2016

● Service Worker
● Caching Strategies
● App Shell
● Manifest Files
● Codelabs
Agenda

What is a Progressive Web App ?
Experiences that combine the best of web with the best of
app and becomes useful to users from the very first visit in
a tab.
No Install Required

Key Characteristics of PWA
●Progressive - Works for every user regardless of
browser and users
●Responsive - Fits any form factor; desktop,mobile,tablet
etc
●Connectivity Independent - Enhanced with
Service Workers to Work Offline or on Lie-
Fi.

Key Characteristics of PWA - cont’d
●App Like - Feels like an app to the user because it’s built
on the app-shell model
●Re-engageable - Makes re-engagement easy through
features like push notifications.
●Installable - Allows user to ‘keep’ apps on
their homescreen without the hassle of an
app store.

Key Characteristics of PWA - cont’d
●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.

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

Connectivity Independent
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/

Service Workers
Things to note
× Can’t access the DOM directly. Only way to communicate with pages
is through postMessage.
× Service worker can “hijack” network requests, giving you the
developer absolute control.
× Terminated when idle. Restarted 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/

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

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
})

Installable - Manifest.json
● 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/

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

Caching Strategies - Responding to
request
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

CODELABS!!!
https://gbolly.github.io/gdgcodelab/

Thanks!
Any questions?
You can find me at
× @purple_heart_me
× gbolahan@ibadan.gdg.ng

Credits
Special thanks to all the people who made and
released these awesome resources for free:
× Presentation template by SlidesCarnival
× Photographs by Unsplash
× The Offline CookBook by Jack Archibald
× Offline First - Interactive Course by Jack
Archibald and Udacity

GDG Ibadan #pwa

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to GDG Ibadan #pwa

Similar to GDG Ibadan #pwa (20)

Recently uploaded

Recently uploaded (20)

GDG Ibadan #pwa