Changed flow to allow ios users to install an pwa

frontend/app.vue

@@ -1,17 +1,19 @@
 <template>
-  <div v-if="showInstallGuide !== null && showInstallGuide && host != 'localhost'" class="bg-neutral-1100 dark:bg-neutral-900 h-screen flex flex-col px-5 text-center text-black dark:text-gray-200">
+  <div v-if="showInstallGuide !== null && showInstallGuide" class="bg-neutral-1100 dark:bg-neutral-900 h-screen flex flex-col px-5 text-center text-black dark:text-gray-200">
     <h1 class="font-bold text-3xl text-center mb-10 mt-20 text-primary">Reddingsbrigade Waddinxveen</h1>
     <p class="mb-10">Om gebruik te maken van de WRB App moet je deze installeren</p>
     <h2 class="font-bold">Op een iPhone:</h2>
-    <p class="mb-10">
+    <ol class="list-decimal list-inside mb-3">
-      Ga naar <a href="https://apps.apple.com/us/app/waddinxveense-reddingsbrigade/id6443636255" class="underline">deze link</a> en download de app via de App Store
+      <li>Druk op het deel icoon: <Icon size="1.7em" name="ion:share-outline" /></li>
-    </p>
+      <li>En kies voor "Toevoegen aan startscherm"</li>
-    <h2 class="font-bold">Op een Android:</h2>
+    </ol>
+    <h2 class="font-bold mt-5">Op een Android:</h2>
     <ol class="list-decimal list-inside mb-3">
       <li>Druk op het opties icoon:<Icon size="1.7em" name="ion:md-more" /></li>
       <li>En kies voor "Toevoegen aan startscherm" of "App installeren"</li>
     </ol>
     <i>Als deze optie er niet is, gebruik dan de chrome browser</i>
+    <span @click="showInstallGuide = false" class="text-neutral-500 mt-20 text-sm">Klik hier om het in de browser te gebruiken</span>
   </div>
   <div v-else-if="userStore.userLoaded">
     <div v-if="userStore.isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
@@ -47,7 +49,7 @@ onMounted(async () => {
 
   Device.getInfo().then(info => {
     if (info.platform === 'ios') {
-      showInstallGuide.value = false;
+      showInstallGuide.value = true;
       document.getElementsByClassName('top-right')[0].classList.add('toastios')
     } else if (info.platform === 'web' && process.client && 'serviceWorker' in navigator && window.isSecureContext) {
       if (window.matchMedia('(display-mode: standalone)').matches) showInstallGuide.value = false

frontend/nuxt.config.ts

@@ -1,19 +1,23 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
   ssr: false,
+
   imports: {
    dirs: ['stores']
   },
+
   modules: [
       '@nuxtjs/tailwindcss',
       'nuxt-icon',
       '@vueuse/nuxt',
       '@nuxtjs/robots',
-      [ '@pinia/nuxt', { autoImports: [ 'defineStore' ]} ],
+      '@pinia/nuxt',
   ],
+
   build: {
       transpile: ['vue-toastification'],
   },
+
   app: {
     head: {
       title: 'WRB App',
@@ -33,9 +37,12 @@ export default defineNuxtConfig({
 
     }
   },
+
   runtimeConfig: {
     privateKeyId: '',
     privateKey: '',
     clientId: ''
-  }
+  },
+
+  compatibilityDate: '2025-04-24'
 })

frontend/package.json

@@ -1,8 +1,5 @@
 {
   "private": true,
-  "overrides": {
-    "vue": "latest"
-  },
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -11,28 +8,30 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@capacitor/cli": "^4.7.1",
+    "@capacitor/cli": "^7.2.0",
-    "@nuxtjs/tailwindcss": "^6.6.0",
+    "@nuxtjs/tailwindcss": "^6.13.2",
-    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/forms": "^0.5.10",
-    "@vueuse/core": "^9.13.0",
+    "@vueuse/core": "^13.1.0",
-    "@vueuse/nuxt": "^9.13.0",
+    "@vueuse/nuxt": "^13.1.0",
-    "nuxt": "^3.3.1",
+    "nuxt": "^3.16.2",
-    "nuxt-icon": "^0.3.3"
+    "nuxt-icon": "^0.6.10"
   },
   "dependencies": {
-    "@capacitor/core": "^4.7.1",
+    "@capacitor/core": "^7.2.0",
-    "@capacitor/device": "^4.1.0",
+    "@capacitor/device": "^7.0.1",
-    "@capacitor/ios": "^4.7.1",
+    "@capacitor/ios": "^7.2.0",
-    "@capacitor/push-notifications": "^4.1.2",
+    "@capacitor/push-notifications": "^7.0.1",
-    "@formkit/nuxt": "^1.0.0-beta.11-c95e605",
+    "@formkit/nuxt": "^1.6.9",
-    "@nuxtjs/robots": "^3.0.0",
+    "@nuxtjs/robots": "^5.2.10",
-    "@pinia/nuxt": "^0.4.7",
+    "@pinia/nuxt": "^0.11.0",
-    "@vueuse/components": "^9.13.0",
+    "@vueuse/components": "^13.1.0",
-    "@vueuse/firebase": "^9.13.0",
+    "@vueuse/firebase": "^13.1.0",
-    "@vueuse/shared": "^9.13.0",
+    "@vueuse/shared": "^13.1.0",
-    "firebase": "^9.18.0",
+    "firebase": "^11.6.0",
-    "firebase-admin": "^11.5.0",
+    "firebase-admin": "^13.3.0",
-    "pinia": "^2.0.33",
+    "pinia": "^3.0.2",
-    "vue-toastification": "^2.0.0-rc.5"
+    "vue-toastification": "^2.0.0-rc.5",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   }
 }

frontend/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
+

package-lock.json

@@ -1,6 +0,0 @@
-{
-  "name": "wrbapp",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

shell.nix

@@ -3,7 +3,7 @@ let
 in
 pkgs.mkShell {
   buildInputs = with pkgs; [
-    nodejs_18
+    nodejs_20
     nodePackages.pnpm
     nodePackages.typescript-language-server
   ];