Andrey Makarov aka r3nya
CACHE MANIFEST
# v1 2017-30-01
CACHE:
index.html
css/style.css
js/app.js
FALLBACK:
/ /offline.html
Can I Use offline-apps? Data on support for the offline-apps feature across the major browsers from caniuse.com.
Can I Use serviceworkers? Data on support for the serviceworkers feature across the major browsers from caniuse.com.
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then((registration) => {
// Регистрация успешна
console.log('Tada! 🎉', registration.scope);
}).catch((err) => console.log('Fail: ', err));
});
}
self.addEventListener('install', (event) => {
// установка
// …
});
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
'/', '/script/main.js', '/styles/main.css',
];
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache.addAll(urlsToCache);
})
});
});
self.addEventListener('fetch', (event) => {
console.log(event.request);
});
self.addEventListener('fetch', (event) => {
console.log(event.request);
console.log(event.request.url);
console.log(event.request.method);
console.log(event.request.headers);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request)
.then((response) => {
// ресурс есть в кеше
if (response) return response;
return fetch(event.request);
})
);
});
const fetchRequest = event.request.clone();
return fetch(fetchRequest).then((response) => {
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
const responseToCache = response.clone();
caches.open(CACHE_NAME).then((cache) => {
cache.put(event.request, responseToCache);
});
return response;
});
self.addEventListener('activate', (event) => {
const cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1'];
event.waitUntil(
return Promise.all(
caches.keys().then((cacheNames) => {
cacheNames.map((cacheName) => {
if (!cacheWhitelist.includes(cacheName)) {
return caches.delete(cacheName);
}
})
);
})
);
toolbox.router.get('/api', toolbox.networkFirst);
toolbox.router.get('/avatars', toolbox.cacheFirst);
toolbox.router.get('/posts', toolbox.fasters);