Instantly share code, notes, and snippets.

Embed
What would you like to do?
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', { scope: '/test/' }).then(
function (reg) {
console.log('Service Worker registriert', reg)
}, function (err) {
console.log('Fehler: ', err)
})
}
</script>
</body>
</html>
// Installation
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('meinCacheVersion1').then(function(cache) {
return cache.addAll([
'/test/',
'/test/index.html',
'/test/style.css',
'/test/bundle.js',
'/test/logo.jpg',
'/test/sorry-offline.html',
]);
})
);
});
// Fetch = Netzwerkabfragen abfangen
this.addEventListener('fetch', function(event) {
event.respondWith(
// Reagiere auf Anfragen mit passenden Ressourcen aus dem Cache
caches.match(event.request).catch(function() {
// Wenn das nicht möglich ist, leite sie an das Netzwerk weiter
return fetch(event.request).then(function(response) {
// Sobald das geschehen ist, befülle 'meinCacheVersion1' mit den angefragten Ressourcen
return caches.open('meinCacheVersion1').then(function(cache) {
cache.put(event.request, response.clone());
return response;
});
}).catch(function() {
// Scheitert die Cache- und Netzwerkanfrage, liefere sorry-offline.html
return caches.match('/test/sorry-offline.html');
});
})
);
});
// Aktivierung = Aktualisierung des Cache
this.addEventListener('activate', function(event) {
let cacheWhitelist = ['meinCacheVersion2'];
// Lösche alle Caches, die nicht in der Whitelist genannt sind
event.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (cacheWhitelist.indexOf(key) === -1) {
return caches.delete(key);
}
}));
})
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment