aigroup-workflow 2.1.2 → 2.2.0

package/skills/frontend/vue-expert/references/mobile-hybrid.md

@@ -0,0 +1,636 @@
+# Mobile & Hybrid Apps
+
+---
+
+## Quasar Framework
+
+### Project Setup
+
+```bash
+# Create new Quasar project
+npm init quasar
+
+# Add Quasar to existing Vue project
+npm install quasar @quasar/extras
+npm install -D @quasar/vite-plugin
+```
+
+```typescript
+// vite.config.ts - Quasar plugin setup
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: { transformAssetUrls }
+    }),
+    quasar({
+      sassVariables: 'src/quasar-variables.scss'
+    })
+  ]
+})
+```
+
+### Quasar Configuration
+
+```javascript
+// quasar.config.js
+export default configure((ctx) => ({
+  // Build modes: spa, pwa, ssr, capacitor, electron, bex
+  boot: ['axios', 'i18n'],
+
+  css: ['app.scss'],
+
+  extras: [
+    'roboto-font',
+    'material-icons'
+  ],
+
+  framework: {
+    plugins: ['Notify', 'Dialog', 'Loading', 'LocalStorage'],
+    config: {
+      notify: { position: 'top-right' },
+      loading: { spinnerColor: 'primary' }
+    }
+  },
+
+  build: {
+    target: { browser: ['es2022', 'firefox115', 'chrome115', 'safari14'] },
+    vueRouterMode: 'history'
+  }
+}))
+```
+
+### Quasar Components with Composition API
+
+```vue
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+function showNotification() {
+  $q.notify({
+    message: 'Action completed successfully',
+    type: 'positive',
+    position: 'top',
+    timeout: 3000
+  })
+}
+
+function showConfirmDialog() {
+  $q.dialog({
+    title: 'Confirm',
+    message: 'Are you sure you want to proceed?',
+    cancel: true,
+    persistent: true
+  }).onOk(() => {
+    // User confirmed
+  })
+}
+
+async function showLoading() {
+  $q.loading.show({ message: 'Processing...' })
+  await doAsyncWork()
+  $q.loading.hide()
+}
+</script>
+```
+
+### Layout System
+
+```vue
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-btn flat dense round icon="menu" @click="toggleLeftDrawer" />
+        <q-toolbar-title>My App</q-toolbar-title>
+        <q-btn flat round icon="person" />
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
+      <q-list>
+        <q-item clickable v-ripple to="/dashboard">
+          <q-item-section avatar>
+            <q-icon name="dashboard" />
+          </q-item-section>
+          <q-item-section>Dashboard</q-item-section>
+        </q-item>
+      </q-list>
+    </q-drawer>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const leftDrawerOpen = ref(false)
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
+</script>
+```
+
+### Platform Detection
+
+```vue
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+
+const $q = useQuasar()
+
+// Platform detection
+const isMobile = $q.platform.is.mobile
+const isIOS = $q.platform.is.ios
+const isAndroid = $q.platform.is.android
+const isDesktop = $q.platform.is.desktop
+const isCapacitor = $q.platform.is.capacitor
+
+// Screen utilities
+const isSmallScreen = $q.screen.lt.md
+const screenWidth = $q.screen.width
+</script>
+
+<template>
+  <div>
+    <MobileNav v-if="isMobile" />
+    <DesktopNav v-else />
+  </div>
+</template>
+```
+
+---
+
+## Capacitor Integration
+
+### Setup
+
+```bash
+# Add Capacitor to Quasar
+quasar mode add capacitor
+
+# Initialize Capacitor
+cd src-capacitor
+npx cap init "App Name" "com.example.app"
+
+# Add platforms
+npx cap add android
+npx cap add ios
+
+# Sync and run
+npx cap sync
+npx cap open android
+```
+
+### Capacitor Configuration
+
+```typescript
+// capacitor.config.ts
+import type { CapacitorConfig } from '@capacitor/cli'
+
+const config: CapacitorConfig = {
+  appId: 'com.example.myapp',
+  appName: 'My App',
+  webDir: 'dist/spa',
+  server: {
+    androidScheme: 'https',
+    // For development
+    url: 'http://192.168.1.100:9000',
+    cleartext: true
+  },
+  plugins: {
+    SplashScreen: {
+      launchAutoHide: false,
+      showSpinner: true
+    },
+    PushNotifications: {
+      presentationOptions: ['badge', 'sound', 'alert']
+    }
+  }
+}
+
+export default config
+```
+
+### Native Plugins with TypeScript
+
+```typescript
+// composables/useCamera.ts
+import { ref } from 'vue'
+import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'
+
+export function useCamera() {
+  const photo = ref<string | null>(null)
+  const error = ref<string | null>(null)
+
+  async function takePhoto() {
+    try {
+      const image = await Camera.getPhoto({
+        resultType: CameraResultType.Uri,
+        source: CameraSource.Camera,
+        quality: 90
+      })
+      photo.value = image.webPath ?? null
+    } catch (e) {
+      error.value = (e as Error).message
+    }
+  }
+
+  async function pickFromGallery() {
+    try {
+      const image = await Camera.getPhoto({
+        resultType: CameraResultType.Uri,
+        source: CameraSource.Photos,
+        quality: 90
+      })
+      photo.value = image.webPath ?? null
+    } catch (e) {
+      error.value = (e as Error).message
+    }
+  }
+
+  return { photo, error, takePhoto, pickFromGallery }
+}
+```
+
+```typescript
+// composables/useGeolocation.ts
+import { ref, onMounted, onUnmounted } from 'vue'
+import { Geolocation, Position } from '@capacitor/geolocation'
+
+export function useGeolocation() {
+  const position = ref<Position | null>(null)
+  const error = ref<string | null>(null)
+  let watchId: string | null = null
+
+  async function getCurrentPosition() {
+    try {
+      position.value = await Geolocation.getCurrentPosition({
+        enableHighAccuracy: true
+      })
+    } catch (e) {
+      error.value = (e as Error).message
+    }
+  }
+
+  async function watchPosition() {
+    watchId = await Geolocation.watchPosition(
+      { enableHighAccuracy: true },
+      (pos, err) => {
+        if (err) {
+          error.value = err.message
+        } else if (pos) {
+          position.value = pos
+        }
+      }
+    )
+  }
+
+  function stopWatching() {
+    if (watchId) {
+      Geolocation.clearWatch({ id: watchId })
+      watchId = null
+    }
+  }
+
+  onUnmounted(stopWatching)
+
+  return { position, error, getCurrentPosition, watchPosition, stopWatching }
+}
+```
+
+### Push Notifications
+
+```typescript
+// composables/usePushNotifications.ts
+import { ref, onMounted } from 'vue'
+import { PushNotifications, Token, PushNotificationSchema } from '@capacitor/push-notifications'
+import { Capacitor } from '@capacitor/core'
+
+export function usePushNotifications() {
+  const token = ref<string | null>(null)
+  const notifications = ref<PushNotificationSchema[]>([])
+
+  async function register() {
+    if (!Capacitor.isNativePlatform()) return
+
+    const permission = await PushNotifications.requestPermissions()
+    if (permission.receive !== 'granted') return
+
+    await PushNotifications.register()
+  }
+
+  onMounted(() => {
+    if (!Capacitor.isNativePlatform()) return
+
+    PushNotifications.addListener('registration', (t: Token) => {
+      token.value = t.value
+    })
+
+    PushNotifications.addListener('pushNotificationReceived', (notification) => {
+      notifications.value.push(notification)
+    })
+
+    PushNotifications.addListener('pushNotificationActionPerformed', (action) => {
+      // Handle notification tap
+      console.log('Action:', action.actionId)
+    })
+  })
+
+  return { token, notifications, register }
+}
+```
+
+### App Lifecycle
+
+```typescript
+// composables/useAppLifecycle.ts
+import { onMounted, onUnmounted } from 'vue'
+import { App } from '@capacitor/app'
+import { Capacitor } from '@capacitor/core'
+
+export function useAppLifecycle() {
+  onMounted(() => {
+    if (!Capacitor.isNativePlatform()) return
+
+    App.addListener('appStateChange', ({ isActive }) => {
+      if (isActive) {
+        // App came to foreground
+        refreshData()
+      } else {
+        // App went to background
+        saveState()
+      }
+    })
+
+    App.addListener('backButton', ({ canGoBack }) => {
+      if (!canGoBack) {
+        App.exitApp()
+      } else {
+        window.history.back()
+      }
+    })
+  })
+
+  onUnmounted(() => {
+    App.removeAllListeners()
+  })
+}
+```
+
+---
+
+## PWA & Service Workers
+
+### Workbox Configuration
+
+```javascript
+// quasar.config.js
+export default configure((ctx) => ({
+  pwa: {
+    workboxMode: 'GenerateSW', // or 'InjectManifest'
+
+    workboxOptions: {
+      skipWaiting: true,
+      clientsClaim: true,
+      cleanupOutdatedCaches: true,
+
+      // Cache strategies
+      runtimeCaching: [
+        {
+          // Cache API responses
+          urlPattern: /^https:\/\/api\./,
+          handler: 'NetworkFirst',
+          options: {
+            cacheName: 'api-cache',
+            networkTimeoutSeconds: 10,
+            expiration: {
+              maxEntries: 100,
+              maxAgeSeconds: 60 * 60 * 24 // 24 hours
+            }
+          }
+        },
+        {
+          // Cache images
+          urlPattern: /\.(?:png|jpg|jpeg|svg|gif|webp)$/,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'image-cache',
+            expiration: {
+              maxEntries: 50,
+              maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+            }
+          }
+        },
+        {
+          // Cache fonts
+          urlPattern: /\.(?:woff|woff2|ttf|eot)$/,
+          handler: 'CacheFirst',
+          options: {
+            cacheName: 'font-cache',
+            expiration: {
+              maxAgeSeconds: 60 * 60 * 24 * 365 // 1 year
+            }
+          }
+        }
+      ]
+    }
+  }
+}))
+```
+
+### Web App Manifest
+
+```javascript
+// quasar.config.js
+export default configure((ctx) => ({
+  pwa: {
+    manifest: {
+      name: 'My Progressive App',
+      short_name: 'MyApp',
+      description: 'A Progressive Web Application',
+      display: 'standalone',
+      orientation: 'portrait',
+      background_color: '#ffffff',
+      theme_color: '#1976D2',
+      start_url: '/',
+      icons: [
+        {
+          src: 'icons/icon-128x128.png',
+          sizes: '128x128',
+          type: 'image/png'
+        },
+        {
+          src: 'icons/icon-512x512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        }
+      ]
+    }
+  }
+}))
+```
+
+### Install Prompt Handling
+
+```typescript
+// composables/usePWAInstall.ts
+import { ref, onMounted } from 'vue'
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt(): Promise<void>
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
+}
+
+export function usePWAInstall() {
+  const canInstall = ref(false)
+  const isInstalled = ref(false)
+  let deferredPrompt: BeforeInstallPromptEvent | null = null
+
+  onMounted(() => {
+    // Check if already installed
+    isInstalled.value = window.matchMedia('(display-mode: standalone)').matches
+
+    window.addEventListener('beforeinstallprompt', (e) => {
+      e.preventDefault()
+      deferredPrompt = e as BeforeInstallPromptEvent
+      canInstall.value = true
+    })
+
+    window.addEventListener('appinstalled', () => {
+      isInstalled.value = true
+      canInstall.value = false
+      deferredPrompt = null
+    })
+  })
+
+  async function install() {
+    if (!deferredPrompt) return false
+
+    await deferredPrompt.prompt()
+    const { outcome } = await deferredPrompt.userChoice
+
+    deferredPrompt = null
+    canInstall.value = false
+
+    return outcome === 'accepted'
+  }
+
+  return { canInstall, isInstalled, install }
+}
+```
+
+### PWA Update Flow
+
+```typescript
+// composables/usePWAUpdate.ts
+import { ref, onMounted } from 'vue'
+import { useQuasar } from 'quasar'
+
+export function usePWAUpdate() {
+  const $q = useQuasar()
+  const needsUpdate = ref(false)
+  let registration: ServiceWorkerRegistration | null = null
+
+  onMounted(() => {
+    if (!('serviceWorker' in navigator)) return
+
+    navigator.serviceWorker.ready.then((reg) => {
+      registration = reg
+
+      reg.addEventListener('updatefound', () => {
+        const newWorker = reg.installing
+        if (!newWorker) return
+
+        newWorker.addEventListener('statechange', () => {
+          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+            needsUpdate.value = true
+            promptUpdate()
+          }
+        })
+      })
+    })
+  })
+
+  function promptUpdate() {
+    $q.notify({
+      message: 'A new version is available',
+      timeout: 0,
+      actions: [
+        {
+          label: 'Update',
+          color: 'white',
+          handler: updateApp
+        },
+        {
+          label: 'Later',
+          color: 'white'
+        }
+      ]
+    })
+  }
+
+  function updateApp() {
+    if (registration?.waiting) {
+      registration.waiting.postMessage({ type: 'SKIP_WAITING' })
+    }
+    window.location.reload()
+  }
+
+  return { needsUpdate, updateApp }
+}
+```
+
+### Offline Detection
+
+```typescript
+// composables/useOnlineStatus.ts
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useOnlineStatus() {
+  const isOnline = ref(navigator.onLine)
+
+  function updateOnlineStatus() {
+    isOnline.value = navigator.onLine
+  }
+
+  onMounted(() => {
+    window.addEventListener('online', updateOnlineStatus)
+    window.addEventListener('offline', updateOnlineStatus)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('online', updateOnlineStatus)
+    window.removeEventListener('offline', updateOnlineStatus)
+  })
+
+  return { isOnline }
+}
+```
+
+---
+
+## Quick Reference
+
+| Pattern | Use Case |
+|---------|----------|
+| `useQuasar()` | Access Quasar plugins ($q) |
+| `$q.platform.is.*` | Platform detection |
+| `$q.notify()` | Toast notifications |
+| `$q.dialog()` | Modal dialogs |
+| `@capacitor/camera` | Native camera access |
+| `@capacitor/geolocation` | GPS location |
+| `@capacitor/push-notifications` | Push notifications |
+| `workboxMode: 'GenerateSW'` | Auto-generate service worker |
+| `runtimeCaching` | Workbox cache strategies |
+| `beforeinstallprompt` | PWA install prompt |
+| `navigator.serviceWorker.ready` | Service worker lifecycle |