Merge remote-tracking branch 'origin/759-finalise-vuetify-app-as-spa' into...

Merge remote-tracking branch 'origin/759-finalise-vuetify-app-as-spa' into 759-finalise-vuetify-app-as-spa

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,

aleksis/core/assets/app.js

-import Vue from "@/vue";
+import Vue from "vue";
 import VueRouter from "@/vue-router";
 
 import Vuetify from "@/vuetify";

aleksis/core/assets/components/CacheNotification.vue → aleksis/core/assets/components/BroadcastChannelNotification.vue

 <template>
-  <message-box :value="cache" type="warning">
+  <message-box :value="show" type="warning">
     {{ $t("alerts.page_cached") }}
   </message-box>
 </template>
 
 <script>
 export default {
-  name: "CacheNotification",
+  name: "BroadcastChannelNotification",
+  props: {
+    channelName: {
+      type: String,
+      required: true
+    },
+  },
   data() {
     return {
-      cache: false,
+      show: false,
     };
   },
   created() {
-    this.channel = new BroadcastChannel("cache-or-not");
+    this.channel = new BroadcastChannel(this.channelName);
     this.channel.onmessage = (event) => {
-      this.cache = event.data === true;
+      this.show = event.data === true;
     };
   },
   destroyed() {

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;
     });

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"),
     },
   },
 });