nucleo000/printerCentral
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Corregir configuración PWA y agregar logo en header
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 36s
Details

Browse Source 
- Agregar app.head con meta tags para PWA (theme-color, apple-mobile-web-app-capable)
- Configurar manifest.webmanifest con id, launch_handler, client.installPrompt
- Agregar nitro.routeRules para headers correctos del manifest y sw.js
- Agregar logo en TopBar del frontend
- Crear apple-touch-icon.png
- Eliminar carpeta pwa/ antigua (ahora se genera con @vite-pwa/nuxt)
This commit is contained in:
josedario87
2025-11-25 15:06:02 -06:00
parent 1514109e85
commit ad461d87e6
14 changed files with 63 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
nuxt.config.ts
View File

@@ -16,6 +16,39 @@ export default defineNuxtConfig({
fallback: 'dark' fallback: 'dark'
}, },
app: {
head: {
link: [
{ rel: 'icon', type: 'image/png', href: '/icons/icon-192.png' },
{ rel: 'apple-touch-icon', sizes: '192x192', href: '/apple-touch-icon.png' },
{ rel: 'manifest', href: '/manifest.webmanifest' }
],
meta: [
{ name: 'theme-color', content: '#3f75d2' },
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
{ name: 'mobile-web-app-capable', content: 'yes' },
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }
]
}
},
nitro: {
routeRules: {
'/manifest.webmanifest': {
headers: {
'Content-Type': 'application/manifest+json',
'Cache-Control': 'public, max-age=3600'
}
},
'/sw.js': {
headers: {
'Service-Worker-Allowed': '/',
'Cache-Control': 'public, max-age=0'
}
}
}
},
runtimeConfig: { runtimeConfig: {
// Variables privadas del servidor (no expuestas al cliente) // Variables privadas del servidor (no expuestas al cliente)
printerHost: process.env.PRINTER_HOST || '192.168.87.147', printerHost: process.env.PRINTER_HOST || '192.168.87.147',
@@ -31,17 +64,28 @@ export default defineNuxtConfig({
pwa: { pwa: {
registerType: 'autoUpdate', registerType: 'autoUpdate',
includeAssets: ['favicon.ico', 'icon.png', 'icons/*.png'], strategies: 'generateSW',
manifestFilename: 'manifest.webmanifest',
includeAssets: [
'favicon.ico',
'icon.png',
'apple-touch-icon.png',
'icons/*.png'
],
manifest: { manifest: {
id: '/?app=printercentral',
name: 'Printer Central', name: 'Printer Central',
short_name: 'Printer', short_name: 'Printer',
description: 'Administra tus impresoras de forma facil y rapida.', description: 'Administra tus impresoras de forma facil y rapida.',
theme_color: '#3f75d2', theme_color: '#3f75d2',
background_color: '#ffffff', background_color: '#1a1a2e',
display: 'standalone', display: 'standalone',
orientation: 'portrait', orientation: 'portrait',
scope: '/', scope: '/',
start_url: '/', start_url: '/',
launch_handler: {
client_mode: 'navigate-existing'
},
icons: [ icons: [
{ {
src: '/icons/icon-72.png', src: '/icons/icon-72.png',
@@ -90,8 +134,9 @@ export default defineNuxtConfig({
workbox: { workbox: {
navigateFallback: '/', navigateFallback: '/',
navigateFallbackDenylist: [/^\/api\//], navigateFallbackDenylist: [/^\/api\//],
globPatterns: ['**/*.{js,css,html,png,svg,ico,json,jpeg}'], globPatterns: ['**/*.{js,css,html,png,svg,ico,json,jpeg,webp,woff2}'],
cleanupOutdatedCaches: true, cleanupOutdatedCaches: true,
maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
runtimeCaching: [ runtimeCaching: [
{ {
// API calls siempre van a la red // API calls siempre van a la red
@@ -136,8 +181,12 @@ export default defineNuxtConfig({
} }
] ]
}, },
client: {
installPrompt: true,
periodicSyncForUpdates: 3600
},
devOptions: { devOptions: {
enabled: true, enabled: process.env.NODE_ENV === 'development',
type: 'module' type: 'module'
} }
} }

0
pwa/icons/icon-192.png → public/apple-touch-icon.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
pwa/icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 403 KiB

BIN
pwa/icons/icon-128.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 18 KiB

BIN
pwa/icons/icon-144.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
pwa/icons/icon-152.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
pwa/icons/icon-384.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 142 KiB

BIN
pwa/icons/icon-512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 252 KiB

BIN
pwa/icons/icon-72.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
pwa/icons/icon-96.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

37
pwa/index.html
View File

@@ -1,37 +0,0 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printer Central</title>
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" href="icons/icon-192.png">
<meta name="theme-color" content="#3f75d2">
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f2f2f2; }
.container { text-align: center; }
.logo { width: 200px; height: 200px; }
button { padding: 10px 20px; margin-top: 20px; font-size: 16px; cursor: pointer; background-color: #3f75d2; color: #fff; border: none; border-radius: 5px; }
</style>
</head>
<body>
<div class="container">
<img src="icon.png" alt="Printer Central Logo" class="logo">
<h1>Bienvenido a Printer Central</h1>
<p>Administra tus impresoras de forma fácil y rápida.</p>
<button onclick="alert('PWA Funcionando!')">Probar</button>
</div>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('sw.js').then(function(registration) {
console.log('ServiceWorker registrado con éxito', registration.scope);
}, function(err) {
console.log('ServiceWorker fallo en registrarse: ', err);
});
});
}
</script>
</body>
</html>

51
pwa/manifest.json
View File

@@ -1,51 +0,0 @@
{
"name": "Printer Central",
"short_name": "Printer",
"description": "Manage your printers from one central app.",
"start_url": "index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#3f75d2",
"icons": [
{
"src": "icons/icon-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "icons/icon-96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "icons/icon-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "icons/icon-144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "icons/icon-152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

49
pwa/sw.js
View File

@@ -1,49 +0,0 @@
const CACHE_NAME = 'printer-central-cache-v1';
const urlsToCache = [
'index.html',
'manifest.json',
'icon.png',
'icons/icon-72.png',
'icons/icon-96.png',
'icons/icon-128.png',
'icons/icon-144.png',
'icons/icon-152.png',
'icons/icon-192.png',
'icons/icon-384.png',
'icons/icon-512.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
})
);
});
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(keyList => {
return Promise.all(keyList.map(key => {
if (cacheWhitelist.indexOf(key) === -1) {
return caches.delete(key);
}
}));
})
);
});

12
src/client/components/TopBar.vue
View File

@@ -1,7 +1,12 @@
<template> <template>
<header class="top glass card"> <header class="top glass card">
<h1>Printer Central</h1> <div class="header-content">
<p class="subtle">Construí tu formato concatenando comandos de impresión</p> <img src="/icon.png" alt="Printer Central" class="logo" />
<div class="header-text">
<h1>Printer Central</h1>
<p class="subtle">Construí tu formato concatenando comandos de impresión</p>
</div>
</div>
</header> </header>
</template> </template>
@@ -12,6 +17,9 @@
.top { grid-area: header; } .top { grid-area: header; }
.glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 14px; } .glass { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 14px; }
.card { padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05); } .card { padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05); }
.header-content { display: flex; align-items: center; gap: 16px; }
.logo { width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0; }
.header-text { flex: 1; min-width: 0; }
h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: 0.2px; } h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: 0.2px; }
.subtle { color: var(--muted); margin: 0; } .subtle { color: var(--muted); margin: 0; }
</style> </style>