Con il passare del tempo i siti e le applicazioni diventano sempre più pesanti e gli utenti consumano i loro contenuti prevalentemente attraverso dispositivi mobile. Due cose che non vanno certo d'accordo. Rendere le applicazioni performanti è un compito difficile soprattutto quando ci sono variabili che non possiamo controllare, come la connessione. I Service Worker e altre tecniche che stanno dietro le Progressive Web Apps possono essere una risposta concreta a questo problema.

1. Progressive Web Apps:
trick or real magic?
Milan 26 nov 2016

2. I am Maurizio Mangione
You can find me on Twitter and Github: @granze

3. From cheap tricks
to real magic

4. #PWA

5. Performance

6. Real & Perceived

7. Real
Your website is really fast

8. Perceived
Your website isn’t really fast.
But it looks like it is.

9. Performance analysis
No clue
What?

10. User Perception
is !important

11. A better example

13. 2001 -> 2016
Page speed
Build tools
CSS sprites
Assets minification
Server side compression
Image optimization More knowledge

15. 2473 KBAverage page size (Nov 2106)

16. Solutions?

17. CRITICAL RENDERING PATH

18. APP SHELL
Place your screenshot here

19. ...
Place your screenshot here

20. CONTENT
Place your screenshot here

21. LIE-FI
Place your screenshot here

22. #PWA

23. PROGRESSIVE WEB APPS
◉ Offline support
◉ Push notification
◉ Background sync
◉ Add to home screen

24. Service Worker

25. Service Worker
You SW interweb

26. Register
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
}

27. self.addEventListener('install', event => {
// TODO
});
Install

28. const CACHENAME = 'my-cache-v1';
const urlsToCache = [
'/', '/styles/main.css', '/script/main.js'
];
Cache resources

29. self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHENAME)
.then(cache => cache.addAll(urlsToCache))
);
});
Cache resources

30. Browser Cache
!==
Cache API

31. self.addEventListener('fetch', event => {
// TODO
});
Listen to requests

32. self.addEventListener('fetch', event => {
event.respondWith(
);
});
Respond with

33. self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then( response =>
response != null ? response : fetch(event.request);
)
);
});
Respond with

34. Caching
strategies

35. Cache only

36. Cache only
self.addEventListener('fetch', event => {
event.respondWith(caches.match(event.request));
});

37. Network - Fallback to cache

38. Network - Fallback to cache
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).catch(() =>
caches.match(event.request);
)
);
});

39. Cache - Fallback to Network

40. Cache - Fallback to Network
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then( response =>
response != null ? response : fetch(event.request);
)
);
});

41. Cache then Network

42. Caching is hard

43. SW-PRECACHE
module.exports = {
staticFileGlobs: [
'app/css/**.css',
'app/**.html',
'app/images/**.*',
'app/js/**.js'
]
};

44. SW-TOOLBOX
importScripts('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);
);

45. #PWA
(not only SW)

46. Lighthouse

48. @granze

49. THANKS!
Find me on Twitter @granze
Attribution-NonCommercial-ShareAlike 3.0 Unported