From 9c023e3372a331c81d2cb54a3a28d3df53688e92 Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Tue, 3 Jan 2023 12:48:47 +0100
Subject: [PATCH] WIP Service Worker: Do not serve offline fallback page when
site cannot be fetched but show warning
---
aleksis/core/assets/App.vue | 7 +++--
.../BroadcastChannelNotification.vue | 31 +++++++++++++++++++
.../assets/components/CacheNotification.vue | 25 ---------------
aleksis/core/static/js/serviceworker.js | 24 ++++++--------
4 files changed, 45 insertions(+), 42 deletions(-)
create mode 100644 aleksis/core/assets/components/BroadcastChannelNotification.vue
delete mode 100644 aleksis/core/assets/components/CacheNotification.vue
diff --git a/aleksis/core/assets/App.vue b/aleksis/core/assets/App.vue
index 0b34fa084..d30fa6fe9 100644
--- a/aleksis/core/assets/App.vue
+++ b/aleksis/core/assets/App.vue
@@ -136,7 +136,8 @@
</v-app-bar>
<v-main>
<v-container>
- <cache-notification />
+ <broadcast-channel-notification channel-name="cache-or-not" />
+ <broadcast-channel-notification channel-name="offline-fallback" />
<message-box type="error" v-if="whoAmI && whoAmI.isDummy">
{{ $t("base.person_is_dummy") }}
@@ -273,7 +274,7 @@
</template>
<script>
-import CacheNotification from "./components/CacheNotification.vue";
+import BroadcastChannelNotification from "./components/BroadcastChannelNotification.vue";
import LanguageForm from "./components/LanguageForm.vue";
import NotificationList from "./components/notifications/NotificationList.vue";
import SidenavSearch from "./components/SidenavSearch.vue";
@@ -451,7 +452,7 @@ export default {
name: "App",
components: {
BrandLogo,
- CacheNotification,
+ BroadcastChannelNotification,
LanguageForm,
NotificationList,
SidenavSearch,
diff --git a/aleksis/core/assets/components/BroadcastChannelNotification.vue b/aleksis/core/assets/components/BroadcastChannelNotification.vue
new file mode 100644
index 000000000..fe602bc49
--- /dev/null
+++ b/aleksis/core/assets/components/BroadcastChannelNotification.vue
@@ -0,0 +1,31 @@
+<template>
+ <message-box :value="show" type="warning">
+ {{ $t("alerts.page_cached") }}
+ </message-box>
+</template>
+
+<script>
+export default {
+ name: "BroadcastChannelNotification",
+ props: {
+ channelName: {
+ type: String,
+ required: true
+ },
+ },
+ data() {
+ return {
+ show: false,
+ };
+ },
+ created() {
+ this.channel = new BroadcastChannel(this.channelName);
+ this.channel.onmessage = (event) => {
+ this.show = event.data === true;
+ };
+ },
+ destroyed() {
+ this.channel.close();
+ },
+};
+</script>
diff --git a/aleksis/core/assets/components/CacheNotification.vue b/aleksis/core/assets/components/CacheNotification.vue
deleted file mode 100644
index f30adbd0b..000000000
--- a/aleksis/core/assets/components/CacheNotification.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
- <message-box :value="cache" type="warning">
- {{ $t("alerts.page_cached") }}
- </message-box>
-</template>
-
-<script>
-export default {
- name: "CacheNotification",
- data() {
- return {
- cache: false,
- };
- },
- created() {
- this.channel = new BroadcastChannel("cache-or-not");
- this.channel.onmessage = (event) => {
- this.cache = event.data === true;
- };
- },
- destroyed() {
- this.channel.close();
- },
-};
-</script>
diff --git a/aleksis/core/static/js/serviceworker.js b/aleksis/core/static/js/serviceworker.js
index 8fa870824..fcc181a47 100644
--- a/aleksis/core/static/js/serviceworker.js
+++ b/aleksis/core/static/js/serviceworker.js
@@ -2,24 +2,17 @@
const CACHE = "aleksis-cache";
-const offlineFallbackPage = "offline/";
+const cacheChannel = new BroadcastChannel("cache-or-not");
+const offlineFallbackChannel = new BroadcastChannel("offline-fallback");
-const channel = new BroadcastChannel("cache-or-not");
-
-var comesFromCache = false;
+let comesFromCache = false;
+let offlineFallback = false;
self.addEventListener("install", function (event) {
console.log("[AlekSIS PWA] Install Event processing.");
console.log("[AlekSIS PWA] Skipping waiting on install.");
self.skipWaiting();
-
- event.waitUntil(
- caches.open(CACHE).then(function (cache) {
- console.log("[AlekSIS PWA] Caching pages during install.");
- return cache.add(offlineFallbackPage);
- })
- );
});
// Allow sw to control of current page
@@ -32,7 +25,8 @@ self.addEventListener("activate", function (event) {
self.addEventListener("fetch", function (event) {
if (event.request.method !== "GET") return;
networkFirstFetch(event);
- if (comesFromCache) channel.postMessage(true);
+ if (offlineFallback) offlineFallbackChannel.postMessage(true);
+ if (comesFromCache) cacheChannel.postMessage(true);
});
function networkFirstFetch(event) {
@@ -42,6 +36,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()));
+ offlineFallback = false;
comesFromCache = false;
return response;
})
@@ -66,9 +61,10 @@ function fromCache(event) {
"[AlekSIS PWA] Cache request failed. Serving offline fallback page."
);
comesFromCache = false;
- // Use the precached offline page as fallback
- return caches.match(offlineFallbackPage);
+ offlineFallback = true;
+ return;
}
+ offlineFallback = false;
comesFromCache = true;
return matching;
});
--
GitLab