rckrdmrd/michangarrito-frontend-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[MCH-FE] feat: Add PWA support with Vite plugin

Browse Source 
- Install and configure vite-plugin-pwa
- Add manifest configuration for MiChangarrito
- Create SVG icons (192x192, 512x512) with MCH branding
- Add apple-touch-icon and favicon
- Update index.html with PWA meta tags
- Enable service worker with workbox for offline caching

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
rckrdmrd 2026-01-20 02:26:58 -06:00
parent ad4ab40389
commit b1e75b8618
8 changed files with 4432 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -1,10 +1,13 @@
<!doctype html>
<html lang="en">
<html lang="es">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title>
<meta name="theme-color" content="#f97316" />
<meta name="description" content="MiChangarrito - Sistema POS para changarritos" />
<title>MiChangarrito</title>
</head>
<body>
<div id="root"></div>

4426
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -43,6 +43,7 @@
"tailwindcss": "^4.1.18",
"typescript": "~5.9.3",
"typescript-eslint": "^8.46.4",
"vite": "^7.2.4"
"vite": "^7.2.4",
"vite-plugin-pwa": "^1.2.0"
}
}

4
public/apple-touch-icon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width="180" height="180">
<rect width="180" height="180" fill="#f97316" rx="22"/>
<text x="90" y="112" font-family="Arial, sans-serif" font-size="68" font-weight="bold" fill="white" text-anchor="middle">MCH</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 287 B

4
public/favicon.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
<rect width="32" height="32" fill="#f97316" rx="4"/>
<text x="16" y="22" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="white" text-anchor="middle">M</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 277 B

4
public/pwa-192x192.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" width="192" height="192">
<rect width="192" height="192" fill="#f97316" rx="24"/>
<text x="96" y="120" font-family="Arial, sans-serif" font-size="72" font-weight="bold" fill="white" text-anchor="middle">MCH</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 287 B

4
public/pwa-512x512.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
<rect width="512" height="512" fill="#f97316" rx="64"/>
<text x="256" y="320" font-family="Arial, sans-serif" font-size="192" font-weight="bold" fill="white" text-anchor="middle">MCH</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 289 B

38
vite.config.ts
View File

@ -1,9 +1,45 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
plugins: [
react(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['favicon.svg', 'robots.txt', 'apple-touch-icon.svg'],
manifest: {
name: 'MiChangarrito',
short_name: 'Changarrito',
description: 'Sistema POS para changarritos',
theme_color: '#f97316',
background_color: '#ffffff',
display: 'standalone',
icons: [
{
src: 'pwa-192x192.svg',
sizes: '192x192',
type: 'image/svg+xml'
},
{
src: 'pwa-512x512.svg',
sizes: '512x512',
type: 'image/svg+xml'
},
{
src: 'pwa-512x512.svg',
sizes: '512x512',
type: 'image/svg+xml',
purpose: 'any maskable'
}
]
},
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}']
}
})
],
server: {
port: 3140,
proxy: {