fix: Corregir configuración PWA y agregar logo en header
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 36s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 36s
- 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:
@@ -16,6 +16,39 @@ export default defineNuxtConfig({
|
||||
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: {
|
||||
// Variables privadas del servidor (no expuestas al cliente)
|
||||
printerHost: process.env.PRINTER_HOST || '192.168.87.147',
|
||||
@@ -31,17 +64,28 @@ export default defineNuxtConfig({
|
||||
|
||||
pwa: {
|
||||
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: {
|
||||
id: '/?app=printercentral',
|
||||
name: 'Printer Central',
|
||||
short_name: 'Printer',
|
||||
description: 'Administra tus impresoras de forma facil y rapida.',
|
||||
theme_color: '#3f75d2',
|
||||
background_color: '#ffffff',
|
||||
background_color: '#1a1a2e',
|
||||
display: 'standalone',
|
||||
orientation: 'portrait',
|
||||
scope: '/',
|
||||
start_url: '/',
|
||||
launch_handler: {
|
||||
client_mode: 'navigate-existing'
|
||||
},
|
||||
icons: [
|
||||
{
|
||||
src: '/icons/icon-72.png',
|
||||
@@ -90,8 +134,9 @@ export default defineNuxtConfig({
|
||||
workbox: {
|
||||
navigateFallback: '/',
|
||||
navigateFallbackDenylist: [/^\/api\//],
|
||||
globPatterns: ['**/*.{js,css,html,png,svg,ico,json,jpeg}'],
|
||||
globPatterns: ['**/*.{js,css,html,png,svg,ico,json,jpeg,webp,woff2}'],
|
||||
cleanupOutdatedCaches: true,
|
||||
maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,
|
||||
runtimeCaching: [
|
||||
{
|
||||
// API calls siempre van a la red
|
||||
@@ -136,8 +181,12 @@ export default defineNuxtConfig({
|
||||
}
|
||||
]
|
||||
},
|
||||
client: {
|
||||
installPrompt: true,
|
||||
periodicSyncForUpdates: 3600
|
||||
},
|
||||
devOptions: {
|
||||
enabled: true,
|
||||
enabled: process.env.NODE_ENV === 'development',
|
||||
type: 'module'
|
||||
}
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
BIN
pwa/icon.png
BIN
pwa/icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 403 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
@@ -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>
|
||||
@@ -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
49
pwa/sw.js
@@ -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);
|
||||
}
|
||||
}));
|
||||
})
|
||||
);
|
||||
});
|
||||
@@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<header class="top glass card">
|
||||
<h1>Printer Central</h1>
|
||||
<p class="subtle">Construí tu formato concatenando comandos de impresión</p>
|
||||
<div class="header-content">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@@ -12,6 +17,9 @@
|
||||
.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; }
|
||||
.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; }
|
||||
.subtle { color: var(--muted); margin: 0; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user