diff --git a/aleksis/core/static/js/main.js b/aleksis/core/static/js/main.js index 615f8b287df18ed38c57d1f44358073bb74bcf61..e7a58f3ff2dfe8f15b10f10c1f939d582ca27aa0 100644 --- a/aleksis/core/static/js/main.js +++ b/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").length)) { + $("main").prepend('<div id="cache-alert" class="alert warning"><p><i class="material-icons left">warning</i>' + gettext("This page may contain outdated information since there is no internet connection.") + '</p> </div>') + } +}); diff --git a/aleksis/core/static/js/serviceworker.js b/aleksis/core/static/js/serviceworker.js index 818e27cb7d28e820431a4ac28ba6fdf0c422deb7..16382ec00c5dadb22c63060a227451377202d363 100644 --- a/aleksis/core/static/js/serviceworker.js +++ b/aleksis/core/static/js/serviceworker.js @@ -5,6 +5,10 @@ const CACHE = 'aleksis-cache'; const offlineFallbackPage = 'offline/'; +const channel = new BroadcastChannel('cache-or-not'); + +var comesFromCache = false; + self.addEventListener("install", function (event) { console.log("[AlekSIS PWA] Install Event processing."); @@ -29,6 +33,7 @@ self.addEventListener("activate", function (event) { self.addEventListener("fetch", function (event) { if (event.request.method !== "GET") return; networkFirstFetch(event); + if (comesFromCache) channel.postMessage(true); }); function networkFirstFetch(event) { @@ -38,6 +43,7 @@ function networkFirstFetch(event) { // If request was successful, add or update it in the cache console.log("[AlekSIS PWA] Network request successful."); event.waitUntil(updateCache(event.request, response.clone())); + comesFromCache = false; return response; }) .catch(function (error) { @@ -56,10 +62,11 @@ function fromCache(event) { .then(function (matching) { if (!matching || matching.status === 404) { console.log("[AlekSIS PWA] Cache request failed. Serving offline fallback page."); + comesFromCache = false; // Use the precached offline page as fallback - return caches.match(offlineFallbackPage) + return caches.match(offlineFallbackPage); } - + comesFromCache = true; return matching; }); });