feat: make it PWA

This commit is contained in:
2025-12-10 12:56:58 -03:00
parent 39ce9e4684
commit 6b36bf0e19
9 changed files with 5290 additions and 45 deletions
+5
View File
@@ -3,3 +3,8 @@ dist/
.env .env
senha.txt senha.txt
.vscode/ .vscode/
# PWA
dist/sw.js
dist/workbox-*.js
dev-dist/
Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

-41
View File
@@ -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"
}
]
}
+5 -1
View File
@@ -20,10 +20,14 @@
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png"> <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="96x96" href="/assets/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.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-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/assets/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/assets/ms-icon-144x144.png">
<meta name="theme-color" content="#121212"> <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> </head>
<body> <body>
<!-- Authentication Header --> <!-- Authentication Header -->
+5188 -1
View File
File diff suppressed because it is too large Load Diff
+3 -1
View File
@@ -13,7 +13,9 @@
"description": "", "description": "",
"devDependencies": { "devDependencies": {
"typescript": "^5.9.3", "typescript": "^5.9.3",
"vite": "^7.2.7" "vite": "^7.2.7",
"vite-plugin-pwa": "^1.2.0",
"workbox-window": "^7.4.0"
}, },
"dependencies": { "dependencies": {
"@anthropic-ai/sdk": "^0.71.2", "@anthropic-ai/sdk": "^0.71.2",
+24
View File
@@ -8,6 +8,30 @@ import { showAuthForms, toggleAuthForms, showRegisterForm, showLoginForm, hideAu
import { appState } from "./state"; import { appState } from "./state";
import { getNutritionInfo, NutritionInfo, clearNutritionCache, getCacheStats } from './claudeService'; 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 // App state
let selectedDate = new Date(); let selectedDate = new Date();
let currentViewDate = new Date(); let currentViewDate = new Date();
+3
View File
@@ -1,3 +1,6 @@
/// <reference types="vite/client" />
/// <reference types="vite-plugin-pwa/client" />
interface ImportMetaEnv { interface ImportMetaEnv {
readonly VITE_APPWRITE_PROJECT_ID: string; readonly VITE_APPWRITE_PROJECT_ID: string;
readonly VITE_APPWRITE_ENDPOINT: string; readonly VITE_APPWRITE_ENDPOINT: string;
+62 -1
View File
@@ -1,6 +1,67 @@
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({ export default defineConfig({
base: '/calories-tracker/', 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'
}
})
]
}) })