Add simple message (Materialize toast) that pops up whenever a page is served from the PWA cache

aleksis/core/static/js/serviceworker.js

@@ -52,6 +52,8 @@ function fromCache(event) {
     // Return response
     // If not in the cache, then return offline fallback page
     return caches.open(CACHE).then(function (cache) {
+        const channel = new BroadcastChannel('cache-or-not');
+        channel.postMessage(true);
         return cache.match(event.request)
             .then(function (matching) {
                 if (!matching || matching.status === 404) {

aleksis/core/templates/core/base.html

@@ -174,5 +174,15 @@
 {% include_js "jquery-sortablejs" %}
 <script type="text/javascript" src="{% static 'js/search.js' %}"></script>
 <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
+
+<script>
+  const channel = new BroadcastChannel('cache-or-not');
+  channel.addEventListener('message', event => {
+    if (event.data) {
+      M.toast({html: "{% trans "This page may contain outdated information since there is no internet connetion." %}"}, 3600)
+    }
+  });
+</script>
+
 </body>
 </html>