/303
Progressive
Web App
Progressive
Responsive
Connectivity
Independent
App-like
Fresh
Safe
Re-engageable
Installable
Linkable
/30
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
};
8
Registration
/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
/30
this.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).catch(function() {
return fetch(event.request);
})
);
});
16
/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());
}
});
/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">
/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