Веб без интернет соединения, Михаил Дунаев, moscowjs 31
TRANSCRIPT
/30
Веб без интернет соединения
1
Дунаев МихаилRambler&Co
2016
/303
Progressive
Web App
Progressive
Responsive
Connectivity
Independent
App-like
Fresh
Safe
Re-engageable
Installable
Linkable
/304
Service Worker
/3013
network fetch
response
/3013
self.fetch(request)
e.respondWithresponse
fetch event
then
/307
Safari: Under consideration, Brief positive signals in five year plan. Edge: In development.
/30
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
};
8
Registration
/309
Offline mode
/3013
fetch eventself.fetch(request)
e.respondWithreject
self.caches.match(url)
catch
/30
this.addEventListener('install', function(event) {
caches.open("1").then(function(cache) {
cache.add("offline.html");
});
});
11
/30
this.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).then(function(response) {
return response;
}).catch(function() {
return caches.match("offline.html");
})
);
});
12
/3013
App shell
/3014
/3013
fetch eventself.fetch(request)
e.respondWith
self.caches.match(url)
catch
cache.put
/30
this.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).catch(function() {
return fetch(event.request);
})
);
});
16
/3017
Sync
/3013
fetch eventself.fetch(request)
e.respondWith
sync
/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());
}
});
/3020
manifest.json
/3021
/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">
/3023
Native App install banner
/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
/30
Developer tools
25
/3026
https://webmanife.st/
http://realfavicongenerator.net/
/3027
webpack-dev-server --https
Chrome --ignore-certificate-errors
/3028
/30
fin
29
https://goo.gl/PSAjsM
Михаил Дунаевhttps://mdunaev.github.io/