Add simple message that is shown whenever a page is served from the PWA cache

aleksis/core/static/js/main.js

@@ -110,3 +110,11 @@ $(document).ready(function () {
         el.addClass("closed").removeClass("opened");
     });
 });
+
+// Show notice if serviceworker broadcasts that the current page comes from its cache
+const channel = new BroadcastChannel("cache-or-not");
+channel.addEventListener("message", event => {
+    if (event.data) {
+        $("#cache-alert").removeClass("hide")
+    }
+});

aleksis/core/static/js/serviceworker.js

@@ -59,7 +59,8 @@ function fromCache(event) {
                     // Use the precached offline page as fallback
                     return caches.match(offlineFallbackPage)
                 }
-
+                const channel = new BroadcastChannel('cache-or-not');
+                channel.postMessage(true);
                 return matching;
             });
     });

aleksis/core/templates/core/base.html

@@ -109,6 +109,12 @@
     {% endfor %}
   {% endif %}
 
+  <div id="cache-alert" class="alert info hide">
+    <p>
+      <i class="material-icons left">info</i>{% trans "This page may contain outdated information since there is no internet connection." %}
+    </p>
+  </div>
+
   {% block no_page_title %}
     <h4>{% block page_title %}{% endblock %}</h4>
   {% endblock %}
@@ -174,5 +180,6 @@
 {% include_js "jquery-sortablejs" %}
 <script type="text/javascript" src="{% static 'js/search.js' %}"></script>
 <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
+
 </body>
 </html>