Fabric | STAGE MANAGER MUELLE — Frontend PWA inicial

Stage Manager Muelle

STAGE MANAGER MUELLE — Frontend PWA inicial

offline

Estado

Prototipo frontend estático, preparado para probar localmente y publicar como sitio estático en Netlify. Los datos de este prototipo se guardan en el navegador (localStorage); aún no conecta con el backend Fastify/PostgreSQL, no sincroniza datos entre dispositivos y no está desplegado.

Archivos

Crea una carpeta stage-manager-muelle-web y guarda estos cuatro archivos en ella.

`index.html`




  
  
  
  
  
  
  



  STAGE MANAGER MUELLE
Festival piloto · Operación de muelle
● Guardado en este dispositivo
  
    
  
  
    
      Panel del evento
Resumen de actividad y operación.
      Tráileres
0
Cases registrados
0
Incidencias abiertas
0
Próxima llegada
—
      Próximos tráileres
Estado del sistema
La información se guarda localmente en este navegador. Para compartirla entre equipos, falta conectar la API y configurar sincronización.
Modo prototipo
    
    Plan de muelle
Vista sencilla de ventanas previstas por tráiler.

    Tráileres
Registrados
Añadir tráiler
    Escaneo de material
Registrar lectura
Prototipo: introduce el código manualmente. La cámara QR se añadirá en una siguiente iteración.
Últimos movimientos

    Incidencias
Abiertas
Registrar incidencia
  
Prototipo de interfaz. No usar para decisiones de seguridad ni como sistema operativo de producción.

`manifest.webmanifest`

{
  "name": "Stage Manager Muelle",
  "short_name": "Muelle",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0b1020",
  "theme_color": "#111827",
  "description": "Panel de operación de muelle para eventos"
}

`sw.js`

const CACHE='smm-shell-v1';
const FILES=['/','/index.html','/manifest.webmanifest'];
self.addEventListener('install',event=>event.waitUntil(caches.open(CACHE).then(cache=>cache.addAll(FILES))));
self.addEventListener('activate',event=>event.waitUntil(self.clients.claim()));
self.addEventListener('fetch',event=>{
  if(event.request.method!=='GET')return;
  event.respondWith(caches.match(event.request).then(cached=>cached||fetch(event.request).then(response=>{
    const copy=response.clone();caches.open(CACHE).then(cache=>cache.put(event.request,copy));return response;
  }).catch(()=>caches.match('/index.html'))));
});

`netlify.toml`

[build]
  publish = "."

[[headers]]
  for = "/sw.js"
  [headers.values]
    Cache-Control = "no-cache"

Probar y publicar

Guarda los archivos en la misma carpeta.

Para probar, abre index.html en un navegador. Para que funcione el service worker/offline, sírvelo desde localhost (por ejemplo, con npx serve .).

Para Netlify, arrastra la carpeta del sitio a Netlify Drop o súbela a un repositorio y conecta ese repositorio. Configura el directorio de publicación como . y deja el comando de build vacío.

Los datos de este demo quedan en el navegador usado. No hay cuenta de usuario ni almacenamiento compartido en servidor.

Siguiente incremento

Conectar la interfaz a la API Fastify, añadir autenticación, slots reales con detección de solapamientos, lectura QR por cámara y sincronización offline segura. El prototipo no valida carga, estructura ni procedimientos PRL.