Merge pull request #34 from AlekEagle/development

Improved connectivity handling

CU-86dv3rbbb[complete]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cumulonimbus-frontend",
   "private": true,
-  "version": "4.6.0",
+  "version": "4.6.1",
   "type": "module",
   "license": "GNU-GPL-3.0",
   "scripts": {

src/App.vue

@@ -112,7 +112,7 @@
   // External Modules
   import { ref, onMounted, watch, computed } from 'vue';
   import { useRouter, useRoute } from 'vue-router';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
 
   const user = userStore(),
     toast = toastStore(),

src/components/DomainModal.vue

@@ -73,7 +73,7 @@
 
   // External Modules
   import { ref, onMounted, watch } from 'vue';
-  import { useNetwork } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
 
   const emit = defineEmits<{
     (event: 'submit', data: { domain: string; subdomain?: string }): void;
@@ -101,7 +101,7 @@
     domain = ref<string>(),
     subdomain = ref<string>(),
     allowsSubdomains = ref(false),
-    { isOnline: online } = useNetwork();
+    online = useOnline();
 
   function onSubdomainInput(event: Event) {
     const input = event.target as HTMLInputElement;

src/components/Online.vue

@@ -20,7 +20,7 @@
   // No Store Modules to import here.
 
   // External Modules
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
 
   const props = defineProps({
     noMsg: {

src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import { ConnectivityCheckPlugin } from './utils/ConnectivityCheck';
 import { createPinia } from 'pinia';
 import { router } from './router';
 import packageJson from '../package.json';
@@ -13,5 +14,6 @@ app.config.globalProperties.$dependencies = packageJson.dependencies;
 app.config.globalProperties.$devDependencies = packageJson.devDependencies;
 
 app.use(router);
+app.use(ConnectivityCheckPlugin);
 app.use(createPinia());
 app.mount('html body');

src/sw.ts

@@ -93,6 +93,60 @@ async function threadedPrecache(urls: string[], threads: number = 4) {
   debugLog('ServiceWorkerThreadedPrecache', 'Precaching complete.');
 }
 
+// ---- Refined Connectivity Check ----
+
+const checkInterval = 60e3,
+  checkTarget = 'https://connectivitycheck.alekeagle.com',
+  checkTargetResponseStatus = 204;
+
+// The variable we'll use to track if we're online or not. We'll initialize with the navigator's online status.
+let isOnline = navigator.onLine,
+  isOnlineInterval: ReturnType<typeof setInterval> | null = null;
+
+async function makeConnectionCheck() {
+  try {
+    // Make a call to a known online resource to check if we're online.
+    const res = await fetch(checkTarget, { method: 'HEAD' });
+    // If the response status matches the expected status, we're online.
+    if (isOnline !== (res.status === checkTargetResponseStatus)) {
+      isOnline = res.status === checkTargetResponseStatus;
+      debugLog(
+        'ServiceWorkerConnectivityCheck',
+        'Connection status changed:',
+        isOnline,
+      );
+    }
+  } catch (err) {
+    // If the fetch fails, we're probably offline.
+    if (isOnline) {
+      isOnline = false;
+      debugLog(
+        'ServiceWorkerConnectivityCheck',
+        'Connection status changed:',
+        isOnline,
+      );
+    }
+  }
+}
+
+async function runConnectionCheck() {
+  // Clear the interval if it exists.
+  if (isOnlineInterval) {
+    clearInterval(isOnlineInterval);
+    isOnlineInterval = null;
+  }
+  // Make a connection check immediately.
+  await makeConnectionCheck();
+  // Set the interval back up to check every x seconds.
+  isOnlineInterval = setInterval(makeConnectionCheck, checkInterval);
+}
+
+self.addEventListener('online', runConnectionCheck);
+self.addEventListener('offline', runConnectionCheck);
+
+// Start the connection check interval.
+runConnectionCheck();
+
 // ---- Service worker lifecycle ----
 
 self.addEventListener('install', async (event) => {
@@ -149,7 +203,7 @@ router.addRoute(
         'Cache hit',
         `URL: ${options.url}`,
       );
-      if (navigator.onLine) {
+      if (isOnline) {
         debugLog(
           'ServiceWorkerOfflineCacheManager',
           'Revalidating cache',
@@ -167,7 +221,7 @@ router.addRoute(
       'Cache miss',
       `URL: ${options.url}`,
     );
-    if (!navigator.onLine) {
+    if (!isOnline) {
       debugLog(
         'ServiceWorkerOfflineCacheManager',
         'Offline, serving default route',

src/utils/ConnectivityCheck.ts

@@ -0,0 +1,46 @@
+import { inject, Plugin, ref } from 'vue';
+
+const checkInterval = 60e3,
+  checkTarget = 'https://connectivitycheck.alekeagle.com',
+  checkTargetResponseStatus = 204;
+
+export const ConnectivityCheckPlugin: Plugin = {
+  install(app) {
+    let isOnlineInterval: ReturnType<typeof setInterval> | null = null;
+    // Initialize the isOnline ref with the current navigator status
+    const isOnline = ref(navigator.onLine);
+
+    app.provide('isOnline', isOnline);
+
+    async function makeConnectionCheck() {
+      try {
+        const response = await fetch(checkTarget, { method: 'HEAD' });
+        isOnline.value = response.status === checkTargetResponseStatus;
+      } catch (error) {
+        isOnline.value = false;
+      }
+    }
+
+    async function runConnectionCheck() {
+      // Clear the interval if it exists.
+      if (isOnlineInterval) {
+        clearInterval(isOnlineInterval);
+        isOnlineInterval = null;
+      }
+      // Make a connection check immediately.
+      await makeConnectionCheck();
+      // Set the interval back up to check every x seconds.
+      isOnlineInterval = setInterval(makeConnectionCheck, checkInterval);
+    }
+
+    window.addEventListener('online', runConnectionCheck);
+    window.addEventListener('offline', runConnectionCheck);
+
+    // Start the connection check interval.
+    runConnectionCheck();
+  },
+};
+
+export const useOnline = () => {
+  return inject('isOnline') as ReturnType<typeof ref>;
+};

src/utils/loadWhenOnline.ts

@@ -1,4 +1,4 @@
-import { useOnline } from '@vueuse/core';
+import { useOnline } from '@/utils/ConnectivityCheck';
 import { watch } from 'vue';
 
 // This function takes a callback and conditions for when to call the callback.

src/views/AccountSwitcher.vue

@@ -110,7 +110,7 @@
 
   // External Modules
   import { ref, onBeforeMount, computed } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter } from 'vue-router';
 
   const user = userStore(),

src/views/Auth.vue

@@ -117,7 +117,7 @@
 
   // External Modules
   import { ref, onMounted } from 'vue';
-  import { useNetwork } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter, useRoute } from 'vue-router';
 
   const user = userStore(),
@@ -128,7 +128,7 @@
     toast = toastStore(),
     loginForm = ref<InstanceType<typeof Form>>(),
     registerForm = ref<InstanceType<typeof Form>>(),
-    { isOnline: online } = useNetwork();
+    online = useOnline();
 
   async function toggleState() {
     switch (action.value) {

src/views/staff-space/Domains.vue

@@ -168,7 +168,7 @@
 
   // External Modules
   import { ref, onMounted } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter } from 'vue-router';
 
   const online = useOnline(),

src/views/staff-space/Files.vue

@@ -95,7 +95,7 @@
 
   // External Modules
   import { ref, onMounted } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter } from 'vue-router';
   import loadWhenOnline from '@/utils/loadWhenOnline';
 

src/views/staff-space/KillSwitches.vue

@@ -93,7 +93,7 @@
 
   // External Modules
   import { ref, onMounted } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import LoadingMessage from '@/components/LoadingMessage.vue';
 
   const killSwitches = killSwitchesStore(),

src/views/staff-space/SetupGuide.vue

@@ -227,7 +227,7 @@
 
   // External Modules
   import { ref, watch, onMounted } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter } from 'vue-router';
 
   const online = useOnline(),

src/views/staff-space/SetupGuides.vue

@@ -132,7 +132,7 @@
 
   // External Modules
   import { ref, watch, onMounted } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter } from 'vue-router';
   import loadWhenOnline from '@/utils/loadWhenOnline';
 

src/views/staff-space/User.vue

@@ -562,7 +562,7 @@
 
   // External Modules
   import { ref, computed, onMounted } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter } from 'vue-router';
 
   const user = userStore(),

src/views/staff-space/UserSecondFactors.vue

@@ -184,7 +184,7 @@
 
   // External Modules
   import { ref, onMounted } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter } from 'vue-router';
 
   const secondFactors = secondFactorsStore(),

src/views/staff-space/UserSessions.vue

@@ -128,7 +128,7 @@
 
   // External Modules
   import { ref, onMounted, computed } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter } from 'vue-router';
 
   const router = useRouter(),

src/views/staff-space/Users.vue

@@ -97,7 +97,7 @@
 
   // External Modules
   import { ref, onMounted } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import loadWhenOnline from '@/utils/loadWhenOnline';
 
   const users = usersStore(),

src/views/user-space/Account.vue

@@ -396,7 +396,7 @@
 
   // External Modules
   import { ref } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter } from 'vue-router';
 
   const deleteAccountModal = ref<InstanceType<typeof FormModal>>(),

src/views/user-space/AccountSecondFactors.vue

@@ -337,7 +337,7 @@
 
   // External Modules
   import { ref, onMounted, computed } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import QRCode from 'qrcode';
   import { startRegistration } from '@simplewebauthn/browser';
 

src/views/user-space/AccountSessions.vue

@@ -479,7 +479,7 @@
   // External Modules
   import { ref, onMounted, computed } from 'vue';
   import { useRouter } from 'vue-router';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useClipboard } from '@vueuse/core';
 
   const confirmDeleteModal = ref<InstanceType<typeof ConfirmModal>>(),

src/views/user-space/Files.vue

@@ -86,7 +86,7 @@
 
   // External Modules
   import { ref, onMounted } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
 
   const files = filesStore(),
     page = ref(0),

src/views/user-space/SetupGuides.vue

@@ -63,7 +63,7 @@
 
   // External Modules
   import { ref, onMounted } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
 
   const instructions = instructionsStore(),
     toast = toastStore(),

src/views/user-space/Verify.vue

@@ -31,7 +31,7 @@
 
   // External Modules
   import { onMounted, ref } from 'vue';
-  import { useOnline } from '@vueuse/core';
+  import { useOnline } from '@/utils/ConnectivityCheck';
   import { useRouter } from 'vue-router';
 
   const user = userStore(),

vite.config.ts

@@ -1,3 +1,5 @@
+//TODO: Add a way to extend the configuration without having to copy the whole file.
+
 import { defineConfig } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
 import vue from '@vitejs/plugin-vue';