Что такое Progressive Web App и зачем вашему сайту Service Worker и App Manifest.

1. /30
Веб без интернет
соединения
1
Дунаев Михаил
Rambler&Co
2016

2. /302

3. /303
Progressive
Web App
Progressive
Responsive
Connectivity
Independent
App-like
Fresh
Safe
Re-engageable
Installable
Linkable

4. /304
Service
Worker

5. /3013
network fetch
response

6. /3013
self.fetch(request)
e.respondWith
response
fetch event
then

7. /307
Safari: Under consideration, Brief positive signals in five year plan.
Edge: In development.

8. /30
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
};
8
Registration

9. /309
Offline mode

10. /3013
fetch event
self.fetch(request)
e.respondWith
reject
self.caches.match(url)
catch

11. /30
this.addEventListener('install', function(event) {
caches.open("1").then(function(cache) {
cache.add("offline.html");
});
});
11

12. /30
this.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).then(function(response) {
return response;
}).catch(function() {
return caches.match("offline.html");
})
);
});
12

13. /3013
App shell

14. /3014

15. /3013
fetch event
self.fetch(request)
e.respondWith
self.caches.match(url)
catch
cache.put

16. /30
this.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).catch(function() {
return fetch(event.request);
})
);
});
16

17. /3017
Sync

18. /3013
fetch event
self.fetch(request)
e.respondWith
sync

19. /30
navigator.serviceWorker.ready.then(function(swRegistration) {
return swRegistration.sync.register('myFirstSync');
});
19
self.addEventListener('sync', function(event) {
if (event.tag == 'myFirstSync') {
event.waitUntil(doSomeStuff());
}
});

20. /3020
manifest.json

21. /3021

22. /30
{
"short_name": "Lenta.ru",
"name": "Lenta.ru",
"icons": [
{
"src": "icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
22
<link rel="manifest" href="/manifest.json">

23. /3023
Native App install banner

24. /30
You have a web app manifest file, which defines how
your app appears on the user’s system and how it
should be launched
You have a service worker registered on your site. We
recommend a simple custom offline page service worker
Your site is served over HTTPS (service worker
requires HTTPS for security)
The user has visited your site at least twice, with at
least five minutes between visits.
24

25. /30
Developer tools
25

26. /3026
https://webmanife.st/
http://realfavicongenerator.net/

27. /3027
webpack-dev-server --https
Chrome --ignore-certificate-errors

28. /3028

29. /30
fin
29
https://goo.gl/PSAjsM
Михаил Дунаев
https://mdunaev.github.io/