Experimental: very minimal PWA support

This commit is contained in:
Jason McBrayer 2018-09-19 09:55:48 -04:00
parent 12d2636091
commit 0f3162f7b3
3 changed files with 58 additions and 0 deletions

View File

@ -0,0 +1,34 @@
//This is the "Offline page" service worker
//Install stage sets up the offline page in the cache and opens a new cache
self.addEventListener('install', function(event) {
var offlinePage = new Request('offline.html');
event.waitUntil(
fetch(offlinePage).then(function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
console.log('[PWA Builder] Cached offline page during Install'+ response.url);
return cache.put(offlinePage, response);
});
}));
});
//If any fetch fails, it will show the offline page.
//Maybe this should be limited to HTML documents?
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function(error) {
console.error( '[PWA Builder] Network request Failed. Serving offline page ' + error );
return caches.open('pwabuilder-offline').then(function(cache) {
return cache.match('/static/offline.html');
});
}
));
});
//This is a event that can be fired from your page to tell the SW to update the offline page
self.addEventListener('refreshOffline', function(response) {
return caches.open('pwabuilder-offline').then(function(cache) {
console.log('[PWA Builder] Offline page updated from refreshOffline event: '+ response.url);
return cache.put(offlinePage, response);
});
});

View File

@ -0,0 +1,13 @@
<html>
<head>
<title>Brutaldon is offline</title>
</head>
<body>
<h1>Brutaldon is offline</h1>
<p>
Your page request will be fulfilled the next time you are online.
We don't seem to have this particular page in the cache for you.
Terribly sorry.
</p>
</body>
</html>

View File

@ -217,6 +217,17 @@
{
$(".attachments").photobox('a', { history: true });
});
if (navigator.serviceWorker.controller) {
console.log('[PWA Builder] active service worker found, no need to register')
} else {
//Register the ServiceWorker
navigator.serviceWorker.register('{% static "js/pwabuilder-sw.js" %}', {
scope: './'
}).then(function(reg) {
console.log('Service worker has been registered for scope:'+ reg.scope);
});
}
</script>
{% block page_scripts_inline %}
{% endblock %}