progressive web apps: trick or real magic? - maurizio mangione - codemotion milan 2016
TRANSCRIPT
Progressive Web Apps: trick or real magic?
Milan 26 nov 2016
I am Maurizio MangioneYou can find me on Twitter and Github: @granze
From cheap tricksto real magic
#PWA
Performance
Real & Perceived
RealYour website is really fast
PerceivedYour website isn’t really fast.
But it looks like it is.
Performance analysis
No clue
What?
User Perception is !important
A better example
2001 -> 2016
Page speed
Build tools
CSS sprites
Assets minification
Server side compression
Image optimization More knowledge
Solutions?
CRITICAL RENDERING PATH
APP SHELL
Place your screenshot here
...
Place your screenshot here
CONTENT
Place your screenshot here
LIE-FI
Place your screenshot here
#PWA
PROGRESSIVE WEB APPS
◉ Offline support◉ Push notification◉ Background sync◉ Add to home screen
Service Worker
Service Worker
You SW interweb
Register
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
}
self.addEventListener('install', event => {
// TODO
});
Install
const CACHENAME = 'my-cache-v1';
const urlsToCache = [
'/', '/styles/main.css', '/script/main.js'
];
Cache resources
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHENAME)
.then(cache => cache.addAll(urlsToCache))
);
});
Cache resources
Browser Cache!==
Cache API
self.addEventListener('fetch', event => {
// TODO
});
Listen to requests
self.addEventListener('fetch', event => {
event.respondWith(
);
});
Respond with
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then( response =>
response != null ? response : fetch(event.request);
)
);
});
Respond with
Caching strategies
Cache only
Cache only
self.addEventListener('fetch', event => {
event.respondWith(caches.match(event.request));
});
Network - Fallback to cache
Network - Fallback to cache
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).catch(() =>
caches.match(event.request);
)
);
});
Cache - Fallback to Network
Cache - Fallback to Network
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then( response =>
response != null ? response : fetch(event.request);
)
);
});
Cache then Network
Caching is hard
SW-PRECACHEmodule.exports = {
staticFileGlobs: [
'app/css/**.css',
'app/**.html',
'app/images/**.*',
'app/js/**.js'
]
};
SW-TOOLBOXimportScripts('sw-toolbox.js');
toolbox.router.get('/myapp/index.html', toolbox.networkFirst);
// Match URLs that end in index.html
toolbox.router.get(/index.html$/, request =>
new Response('Handled a request for ' + request.url);
);
#PWA(not only SW)
Lighthouse
@granze
THANKS!Find me on Twitter @granze
Attribution-NonCommercial-ShareAlike 3.0 Unported