Merge branch 'main' into test-db

app/.eslintignore

@@ -4,4 +4,6 @@
 /.quasar
 /node_modules
 .eslintrc.cjs
+**/.eslintrc.js
+**/sw.js
 /quasar.config.*.temporary.compiled*

app/package.json

@@ -17,7 +17,7 @@
     "@quasar/extras": "^1.16.4",
     "axios": "^1.2.1",
     "pinia": "^2.0.11",
-    "quasar": "^2.16.0",
+    "quasar": "^2.16.4",
     "vue": "^3.4.18",
     "vue-router": "^4.0.12"
   },
@@ -34,7 +34,14 @@
     "prettier": "^2.5.1",
     "typescript": "^4.5.4",
     "vite-plugin-checker": "^0.6.4",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^1.8.22",
+    "workbox-build": "^7.0.0",
+    "workbox-cacheable-response": "^7.0.0",
+    "workbox-core": "^7.1.0",
+    "workbox-expiration": "^7.0.0",
+    "workbox-precaching": "^7.0.0",
+    "workbox-routing": "^7.1.0",
+    "workbox-strategies": "^7.0.0"
   },
   "engines": {
     "node": "^20 || ^18 || ^16",

app/quasar.config.js

@@ -43,6 +43,33 @@ module.exports = configure(function (/* ctx */) {
         browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
         node: 'node20',
       },
+      pwa: {
+        workboxMode: 'generateSW', // or 'injectManifest'
+        injectPwaMetaTags: true,
+        swFilename: 'sw.js',
+        manifest: false,
+        manifestFilename: 'manifest.json',
+        useCredentialsForManifestTag: false,
+        workboxOptions: {
+          runtimeCaching: [
+            {
+              urlPattern: /^https:\/\/localhost:9001\/app/, // TODO change this for production
+              handler: 'NetworkFirst',
+              options: {
+                cacheName: 'api-cache',
+                expiration: {
+                  maxEntries: 10,
+                  maxAgeSeconds: 60 * 60 * 24, // 1 day
+                },
+              },
+            },
+          ],
+        },
+        // extendGenerateSWOptions (cfg) {}
+        // extendInjectManifestOptions (cfg) {},
+        // extendManifestJson (json) {}
+        // extendPWACustomSWConf (esbuildConf) {}
+      },
 
       vueRouterMode: 'hash', // available values: 'hash', 'history'
       // vueRouterBase,

app/src-pwa/.eslintrc.cjs

@@ -0,0 +1,17 @@
+const { resolve } = require('path');
+
+module.exports = {
+  parserOptions: {
+    project: resolve(__dirname, './tsconfig.json'),
+  },
+
+  overrides: [
+    {
+      files: ['custom-service-worker.ts'],
+
+      env: {
+        serviceworker: true,
+      },
+    },
+  ],
+};

app/src-pwa/custom-service-worker.ts

@@ -0,0 +1,35 @@
+/*
+ * This file (which will be your service worker)
+ * is picked up by the build system ONLY if
+ * quasar.config.js > pwa > workboxMode is set to "injectManifest"
+ */
+
+declare const self: ServiceWorkerGlobalScope &
+  typeof globalThis & { skipWaiting: () => void };
+
+import { clientsClaim } from 'workbox-core';
+import {
+  precacheAndRoute,
+  cleanupOutdatedCaches,
+  createHandlerBoundToURL,
+} from 'workbox-precaching';
+import { registerRoute, NavigationRoute } from 'workbox-routing';
+
+self.skipWaiting();
+clientsClaim();
+
+// Use with precache injection
+precacheAndRoute(self.__WB_MANIFEST);
+
+cleanupOutdatedCaches();
+
+// Non-SSR fallback to index.html
+// Production SSR fallback to offline.html (except for dev)
+if (process.env.MODE !== 'ssr' || process.env.PROD) {
+  registerRoute(
+    new NavigationRoute(
+      createHandlerBoundToURL(process.env.PWA_FALLBACK_HTML),
+      { denylist: [/sw\.js$/, /workbox-(.)*\.js$/] }
+    )
+  );
+}

app/src-pwa/manifest.json

@@ -0,0 +1,32 @@
+{
+  "orientation": "portrait",
+  "background_color": "#ffffff",
+  "theme_color": "#027be3",
+  "icons": [
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

app/src-pwa/pwa-env.d.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    SERVICE_WORKER_FILE: string;
+    PWA_FALLBACK_HTML: string;
+  }
+}

app/src-pwa/pwa-flag.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import "quasar/dist/types/feature-flag";
+
+declare module "quasar/dist/types/feature-flag" {
+  interface QuasarFeatureFlags {
+    pwa: true;
+  }
+}

app/src-pwa/register-service-worker.ts

@@ -0,0 +1,41 @@
+import { register } from 'register-service-worker';
+
+// The ready(), registered(), cached(), updatefound() and updated()
+// events passes a ServiceWorkerRegistration instance in their arguments.
+// ServiceWorkerRegistration: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
+
+register(process.env.SERVICE_WORKER_FILE, {
+  // The registrationOptions object will be passed as the second argument
+  // to ServiceWorkerContainer.register()
+  // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register#Parameter
+
+  // registrationOptions: { scope: './' },
+
+  ready (/* registration */) {
+    console.log('Service worker is active.') // TEST
+  },
+
+  registered (/* registration */) {
+    console.log('Service worker has been registered.') // TEST
+  },
+
+  cached (/* registration */) {
+    console.log('Content has been cached for offline use.') // TEST
+  },
+
+  updatefound (/* registration */) {
+    console.log('New content is downloading.') // TEST
+  },
+
+  updated (/* registration */) {
+    console.log('New content is available; please refresh.') // TEST
+  },
+
+  offline () {
+    console.log('No internet connection found. App is running in offline mode.') // TEST
+  },
+
+  error (err) {
+    console.error('Error during service worker registration:', err) // TEST
+  },
+});

frontend/public/sw.js → app/src-pwa/sw.js

@@ -1,6 +1,6 @@
 self.addEventListener('push', (e) => {
-  console.log("Received push", e)
-  console.log("Showing notitification");
+  console.log('Received push', e);
+  console.log('Showing notitification');
   var options = {
     body: 'This notification was generate from a push.',
     vibrate: [100, 50, 100],
@@ -9,32 +9,22 @@ self.addEventListener('push', (e) => {
       primaryKey: '2'
     },
     actions: [
-      {
-        action: 'explore',
-        title: 'Explore this new world',
-      },
-      {
-        action: 'close',
-        title: 'Close',
-      }
+      {action: 'explore', title: 'Go to the site',
+        icon: 'images/checkmark.png'},
+      {action: 'close', title: 'Close the notification',
+        icon: 'images/xmark.png'},
     ]
   };
-  e.waitUntil(self.registration.showNotification('Hello World'));
-  console.log("Done showing notification");
+  e.waitUntil(self.registration.showNotification('Hello World', options));
+  console.log('Done showing notification');
 })
 
 
 self.addEventListener('install', (event) => {
   event.waitUntil(
     caches.open('v1').then((cache) => {
       return cache.addAll([
-        '/app',
-        '/app/chat',
-        '/app/profile',
-        '/app/schedule',
-        '/app/create-account',
-        '/app/sign-in',
-        '/app/offline-page',
+        '/#/',
         // Add other assets as needed
       ]);
     })
@@ -56,18 +46,14 @@ self.addEventListener('fetch', (event) => {
         if (cacheResponse) {
           return cacheResponse;
         }
-        // If the resource is not in the cache, return the offline page
-        return caches.match('/app/offline-page').then((offlineResponse) => {
-          return offlineResponse || new Response('Offline', { status: 503 });
-        });
       });
     })
   );
 });
 
 
-self.addEventListener("load", () => { // TESTING
-  if ("serviceWorker" in navigator) {
-    navigator.serviceWorker.register("sw.js");
+self.addEventListener('load', () => {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js');
   }
 });

app/src-pwa/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["WebWorker", "ESNext"]
+  },
+  "include": ["*.ts", "*.d.ts"]
+}

app/src/App.vue

@@ -1,9 +1,68 @@
 <template>
   <router-view />
+
+  <q-dialog v-model="showPrompt">
+    <q-card>
+      <q-card-section>
+        <div class="text-h6">Install our App</div>
+      </q-card-section>
+      <q-card-section>
+        <div v-if="os === 'iOS'">
+          To install this app on your iOS device, tap the share icon and select "Add to Home Screen".
+        </div>
+        <div v-if="os === 'Android'">
+          To install this app on your Android device, tap the menu button and select "Add to Home Screen".
+        </div>
+        <div v-if="os === 'Windows' || os === 'MacOS'">
+          To install this app on your computer, click on the install icon in the address bar or go to settings and select "Install".
+        </div>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="Close" @click="showPrompt = false" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
 defineOptions({
   name: 'App',
 });
+
+// Installation prompt below
+const showPrompt = ref(false);
+const os = ref('unknown');
+
+function detectOS() {
+  const userAgent = navigator.userAgent || navigator.vendor;
+  if (/android/i.test(userAgent)) {
+    return 'Android';
+  }
+  else if (/iPad|iPhone|iPod/.test(userAgent)) {
+    return 'iOS';
+  }
+  else if (/Win(dows )?/.test(userAgent)) {
+    return 'Windows';
+  }
+  else if (/Mac/.test(userAgent)) {
+    return 'MacOS';
+  } 
+  else {
+    return 'unknown';
+  } 
+}
+
+onMounted(() => {
+  os.value = detectOS();
+
+  // Only show the install prompt once
+  if (localStorage.getItem('promptShown') !== 'true') {
+    if (os.value !== 'unknown') {
+      showPrompt.value = true;
+    }
+    localStorage.setItem('promptShown', 'true');
+  }
+});
 </script>