pwa compatible
@@ -3,11 +3,13 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>RADIUS Dashboard</title>
|
||||
<title>radiusNucleo</title>
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
BIN
frontend/public/icons/icon-192-black.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
frontend/public/icons/icon-192-maskable.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
frontend/public/icons/icon-192.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
frontend/public/icons/icon-512-black.png
Normal file
|
After Width: | Height: | Size: 110 KiB |
BIN
frontend/public/icons/icon-512-maskable.png
Normal file
|
After Width: | Height: | Size: 106 KiB |
BIN
frontend/public/icons/icon-512.png
Normal file
|
After Width: | Height: | Size: 106 KiB |
57
frontend/public/manifest.json
Normal file
@@ -0,0 +1,57 @@
|
||||
{
|
||||
"name": "RADIUS Nucleo",
|
||||
"short_name": "RADIUS",
|
||||
"description": "Aplicación PWA para administrar usuarios y dispositivos usando FreeRADIUS.",
|
||||
"start_url": "/index.html",
|
||||
"display": "standalone",
|
||||
"background_color": "#000000",
|
||||
"theme_color": "#000000",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icons/icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-192-maskable.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-512-maskable.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-192-black.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icons/icon-512-black.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"screenshots": [
|
||||
{
|
||||
"src": "screenshots/screenshot-desktop.png",
|
||||
"sizes": "2048x1229",
|
||||
"type": "image/png",
|
||||
"form_factor": "wide"
|
||||
},
|
||||
{
|
||||
"src": "screenshots/screenshot-mobile.png",
|
||||
"sizes": "797x1220",
|
||||
"type": "image/png",
|
||||
"form_factor": "narrow"
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
frontend/public/screenshots/screenshot-desktop.png
Normal file
|
After Width: | Height: | Size: 394 KiB |
BIN
frontend/public/screenshots/screenshot-mobile.png
Normal file
|
After Width: | Height: | Size: 155 KiB |
39
frontend/public/sw.js
Normal file
@@ -0,0 +1,39 @@
|
||||
// Nombre del caché para la aplicación
|
||||
const CACHE_NAME = 'radius-nucleo-cache-v1';
|
||||
|
||||
// Archivos que se almacenarán en caché durante la instalación
|
||||
const URLS_TO_CACHE = [
|
||||
'/',
|
||||
'/index.html',
|
||||
'/manifest.json',
|
||||
'/sw.js',
|
||||
// Iconos
|
||||
'/icons/icon-192.png',
|
||||
'/icons/icon-512.png',
|
||||
'/icons/icon-192-maskable.png',
|
||||
'/icons/icon-512-maskable.png',
|
||||
'/icons/icon-192-black.png',
|
||||
'/icons/icon-512-black.png',
|
||||
// Capturas de pantalla
|
||||
'/screenshots/screenshot-desktop.png',
|
||||
'/screenshots/screenshot-mobile.png'
|
||||
];
|
||||
|
||||
// Evento de instalación: almacena los archivos definidos en la caché
|
||||
self.addEventListener('install', (event) => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME)
|
||||
.then((cache) => cache.addAll(URLS_TO_CACHE))
|
||||
);
|
||||
});
|
||||
|
||||
// Evento de recuperación (fetch): responde desde la caché si existe, si no, recupera de la red
|
||||
self.addEventListener('fetch', (event) => {
|
||||
event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then((response) => {
|
||||
// Devuelve la respuesta en caché o realiza la solicitud a la red
|
||||
return response || fetch(event.request);
|
||||
})
|
||||
);
|
||||
});
|
||||
@@ -4,3 +4,10 @@ import './styles.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.mount('#app');
|
||||
|
||||
// Register Service Worker for PWA (in production)
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/sw.js').catch(() => {});
|
||||
});
|
||||
}
|
||||
|
||||