Show how out of date stale pages are

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

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 {

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);
+              });
+
             });
           }
 

views/index.html

@@ -39,6 +39,7 @@
       </div>
     </footer>
 
+    <script>window.cacheDate=false;</script>
     <script src="/assets/enhancements.js" async></script>
   </body>
 </html>