diff --git a/public/assets/enhancements.js b/public/assets/enhancements.js
index 459ac35..5a5c7bd 100644
--- a/public/assets/enhancements.js
+++ b/public/assets/enhancements.js
@@ -224,8 +224,20 @@
};
// Register service worker
- if(supports.test(['serviceWorker'])) {
+ if(supports.test(['serviceWorker', 'querySelector', 'classList'])) {
navigator.serviceWorker.register('/sw.js');
+ DOMReady(function() {
+ if(window.cacheDate) {
+ var offlineMessage = create('div');
+ offlineMessage.classList.add('cache-message');
+ offlineMessage.innerText = '*There seems to be an issue connecting to the server. This is a cached version of this page from ' + window.cacheDate;
+ var main = find('main');
+ if(main) {
+ doc.body.classList.add('no-connection');
+ main.insertBefore(offlineMessage, main.firstChild);
+ }
+ }
+ });
}
// Init favourite nodes
diff --git a/public/assets/style.css b/public/assets/style.css
index 454f1b8..03389f6 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -371,6 +371,13 @@ footer {
font-size: 18px;
}
+/* Cache message */
+.cache-message {
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.9);
+ margin-bottom: 1rem;
+}
+
/* Large desktop */
@media (min-width: 1230px) {
pre {
diff --git a/public/sw.js b/public/sw.js
index 4a030e4..e6ce2f1 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -56,7 +56,14 @@ self.addEventListener('fetch', function(event) {
.then(function(response) {
if(requestUrl.pathname === '/') {
caches.open(cacheName).then(function(cache) {
- cache.put(event.request, response.clone());
+
+ // Modify the response html so we know when it was cached
+ response.clone().text().then(function(html) {
+ html = html.replace('window.cacheDate=false;', 'window.cacheDate="'+Date()+'";');
+ var modifiedResponse = new Response(new Blob([html]), { headers: response.headers });
+ cache.put(event.request, modifiedResponse);
+ });
+
});
}
diff --git a/views/index.html b/views/index.html
index f580192..6a66f79 100644
--- a/views/index.html
+++ b/views/index.html
@@ -39,6 +39,7 @@
+