feat: make it PWA

2025-12-10 12:56:58 -03:00
parent 39ce9e4684
commit 6b36bf0e19
9 changed files with 5290 additions and 45 deletions
@@ -3,3 +3,8 @@ dist/
 .env
 senha.txt
 .vscode/
+
+# PWA
+dist/sw.js
+dist/workbox-*.js
+dev-dist/
@@ -1,41 +0,0 @@
-{
- "name": "App",
- "icons": [
-  {
-   "src": "/assets/android-icon-36x36.png",
-   "sizes": "36x36",
-   "type": "image/png",
-   "density": "0.75"
-  },
-  {
-   "src": "/assets/android-icon-48x48.png",
-   "sizes": "48x48",
-   "type": "image/png",
-   "density": "1.0"
-  },
-  {
-   "src": "/assets/android-icon-72x72.png",
-   "sizes": "72x72",
-   "type": "image/png",
-   "density": "1.5"
-  },
-  {
-   "src": "/assets/android-icon-96x96.png",
-   "sizes": "96x96",
-   "type": "image/png",
-   "density": "2.0"
-  },
-  {
-   "src": "/assets/android-icon-144x144.png",
-   "sizes": "144x144",
-   "type": "image/png",
-   "density": "3.0"
-  },
-  {
-   "src": "/assets/android-icon-192x192.png",
-   "sizes": "192x192",
-   "type": "image/png",
-   "density": "4.0"
-  }
- ]
-}
@@ -20,10 +20,14 @@
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
-    <link rel="manifest" href="/assets/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/assets/ms-icon-144x144.png">
    <meta name="theme-color" content="#121212">
+    <!-- PWA Meta Tags -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Food Tracker">
+    <meta name="mobile-web-app-capable" content="yes">
 </head>
 <body>
    <!-- Authentication Header -->
@@ -13,7 +13,9 @@
  "description": "",
  "devDependencies": {
    "typescript": "^5.9.3",
-    "vite": "^7.2.7"
+    "vite": "^7.2.7",
+    "vite-plugin-pwa": "^1.2.0",
+    "workbox-window": "^7.4.0"
  },
  "dependencies": {
    "@anthropic-ai/sdk": "^0.71.2",
@@ -8,6 +8,30 @@ import { showAuthForms, toggleAuthForms, showRegisterForm, showLoginForm, hideAu
 import { appState } from "./state";
 import { getNutritionInfo, NutritionInfo, clearNutritionCache, getCacheStats } from './claudeService';

+// PWA Service Worker Registration
+import { registerSW } from 'virtual:pwa-register'
+
+const updateSW = registerSW({
+  onNeedRefresh() {
+    swal({
+      title: 'Update Available',
+      text: 'New content is available. Reload to update?',
+      icon: 'info',
+      buttons: {
+        cancel: 'Later',
+        confirm: 'Update Now'
+      }
+    }).then((willUpdate) => {
+      if (willUpdate) {
+        updateSW(true)
+      }
+    })
+  },
+  onOfflineReady() {
+    console.log('App ready to work offline')
+  },
+})
+
 // App state
 let selectedDate = new Date();
 let currentViewDate = new Date();
@@ -1,3 +1,6 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-pwa/client" />
+
 interface ImportMetaEnv {
  readonly VITE_APPWRITE_PROJECT_ID: string;
  readonly VITE_APPWRITE_ENDPOINT: string;
@@ -1,6 +1,67 @@
 import { defineConfig } from 'vite'
+import { VitePWA } from 'vite-plugin-pwa'

 export default defineConfig({
  base: '/calories-tracker/',
-  include: ['src', 'vite-end.d.ts']
+  include: ['src', 'vite-end.d.ts'],
+
+  plugins: [
+    VitePWA({
+      registerType: 'prompt',
+      includeAssets: ['assets/*.png', 'assets/*.ico', 'assets/*.xml'],
+
+      manifest: {
+        name: 'Food Tracker - Daily Calorie Tracker',
+        short_name: 'Food Tracker',
+        description: 'Track your nutrition, transform your health. Monitor calories, protein, fat, carbs, and fiber for every meal.',
+        theme_color: '#121212',
+        background_color: '#121212',
+        display: 'standalone', // CRITICAL: Enables fullscreen
+        orientation: 'portrait',
+        scope: '/calories-tracker/',
+        start_url: '/calories-tracker/',
+
+        icons: [
+          {
+            src: '/calories-tracker/assets/android-icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+            purpose: 'any maskable'
+          },
+          {
+            src: '/calories-tracker/assets/icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable'
+          }
+        ]
+      },
+
+      workbox: {
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/fonts\.googleapis\.com\/.*/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'google-fonts-cache',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 365
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          }
+        ],
+        cleanupOutdatedCaches: true,
+        globPatterns: ['**/*.{js,css,html,ico,png,svg}']
+      },
+
+      devOptions: {
+        enabled: false, // Disable in dev to avoid warnings; test with preview mode
+        type: 'module'
+      }
+    })
+  ]
 })