diff --git a/aleksis/core/assets/App.vue b/aleksis/core/assets/App.vue index 9d2d51b2a37e1e65f0502af00aceeb5488e0bc95..0b0980b090b6f3ab4a7aeb60364516399f34855e 100644 --- a/aleksis/core/assets/App.vue +++ b/aleksis/core/assets/App.vue @@ -8,7 +8,7 @@ <v-navigation-drawer app v-model="drawer"> <v-list nav dense shaped> <v-list-item class="logo"> - <a id="logo-container" href="/" class="brand-logo"> + <a id="logo-container" @click="$router.push('/')" class="brand-logo"> <brand-logo :site-preferences="systemProperties.sitePreferences" /> @@ -85,7 +85,7 @@ <v-toolbar-title tag="a" class="white--text text-decoration-none" - href="/" + @click="$router.push('/')" > {{ systemProperties.sitePreferences.generalTitle }} </v-toolbar-title> @@ -99,7 +99,8 @@ <img v-if=" systemProperties.sitePreferences.accountPersonPreferPhoto && - whoAmI.photo + whoAmI.photo && + whoAmI.photo.url " :src="whoAmI.photo.url" :alt="whoAmI.fullName" @@ -139,7 +140,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") }} @@ -276,7 +278,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"; @@ -454,7 +456,7 @@ export default { name: "App", components: { BrandLogo, - CacheNotification, + BroadcastChannelNotification, LanguageForm, NotificationList, SidenavSearch, diff --git a/aleksis/core/assets/app.js b/aleksis/core/assets/app.js index 27cd71f8cdc665a86571e21205c1a109eda6f603..475eda01c25865593e1db8b87660ef139de50905 100644 --- a/aleksis/core/assets/app.js +++ b/aleksis/core/assets/app.js @@ -1,4 +1,4 @@ -import Vue from "@/vue"; +import Vue from "vue"; import VueRouter from "@/vue-router"; import Vuetify from "@/vuetify"; diff --git a/aleksis/core/assets/components/BroadcastChannelNotification.vue b/aleksis/core/assets/components/BroadcastChannelNotification.vue new file mode 100644 index 0000000000000000000000000000000000000000..fe602bc498e7da3786d35867338dfd40aee8a394 --- /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 f30adbd0bf8f02016216d9285382f7e68e30649c..0000000000000000000000000000000000000000 --- 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 8fa870824dd46202731afd8dd439b15aad1da4c5..fcc181a471037d7ba9e23a2eac08c9a89d66ee4f 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; }); diff --git a/aleksis/core/vite.config.js b/aleksis/core/vite.config.js index 846592bd8856203acb3ff6cbccaa6591e3cc8235..3eb8cb327c9446584dda436478304958eb3fbf70 100644 --- a/aleksis/core/vite.config.js +++ b/aleksis/core/vite.config.js @@ -117,6 +117,7 @@ export default defineConfig({ resolve: { alias: { "@": path.resolve("./node_modules"), + "vue": path.resolve("./node_modules/vue/dist/vue.esm.js"), }, }, });