La index.html de Vaadin Fusion resultará en un offline-stub.
Soy un traductor de español que traduce documentos de IT. Traduzca lo siguiente al español. No traduzca el código y la salida en markdown.
Soy nuevo en Jetty y Vaadin. Intento poner en marcha un Jetty que aloje un ejemplo mínimo de Vaadin Fusion.
Sin embargo, en la primera visita a mi archivo index.html vacío, ya obtengo un banner de conexión perdida y un error 404 porque intenta redirigir a un /offline-stub.html que no tengo.
La vista producida:
En la pestaña de red, se puede ver que Vaadin de alguna manera inicializa la redirección:
Mi index.html es muy simple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vaadin Grocery App</title>
<style>
body {
margin: 0;
width: 100vw;
height: 100vh;
}
#outlet {
height: 100%;
}
</style>
<!-- index.ts is included here automatically (either by the dev server or during the build) -->
</head>
<body>
<h1>hello</h1>
</body>
</html>
También hay un archivo index.ts:
import { Router } from '@vaadin/router';
import { routes } from './routes';
import { appStore } from './stores/app-store';
export const router = new Router(document.querySelector('#outlet'));
router.setRoutes(routes);
window.addEventListener('vaadin-router-location-changed', (e) => {
appStore.setLocation((e as CustomEvent).detail.location);
const title = appStore.currentViewTitle;
if (title) {
document.title = title + ' | ' + appStore.applicationName;
} else {
document.title = appStore.applicationName;
}
});
Inicié Jetty de esta manera:
public static void main(String[] args) throws URISyntaxException, IOException {
Log.setLog(new StdErrLog());
System.out.println("Server starting...");
String extForm = webRoot + "/webapp";
System.out.println(extForm);
final ServletContextHandler context = new ServletContextHandler(ServletContextHandler.SESSIONS);
context.setContextPath("/");
final ResourceHandler resHandler = new ResourceHandler();
resHandler.setResourceBase(extForm);
final ContextHandler ctx = new ContextHandler("/");
ctx.setHandler(resHandler);
Server embeddedServer = new Server(8080);
embeddedServer.insertHandler(context); // Rest/Servlets
embeddedServer.insertHandler(resHandler); // HTML Resources
try {
embeddedServer.start();
embeddedServer.join();
} catch (Exception e) {
System.err.println("Server error:\n" + e);
}
System.out.println("Server stopped");
}
Los valores de Webroot y extform son correctos y los archivos están en las ubicaciones especificadas en disco:
davy.ai
Solución para el problema de “conexión perdida” al ejecutar Jetty con Vaadin Fusion
Descripción del problema
El usuario es nuevo en Jetty y Vaadin y quería ejecutar un servidor Jetty para alojar un ejemplo mínimo de Vaadin Fusion. Sin embargo, se encontró con un banner de “conexión perdida” y un error 404 al intentar acceder a un archivo
index.htmlvacío, porque intentaba redirigir a un archivo/offline-stub.htmlque no existía.Solución
El problema aquí está en la implementación del Service Worker. El archivo
offline-stub.htmles una característica del Service Worker y se utiliza para proporcionar soporte sin conexión para una aplicación. De manera predeterminada, los Service Workers están habilitados al crear un nuevo proyecto de Vaadin Fusion.Sin embargo, al ejecutar una aplicación de Vaadin Fusion localmente, la función del Service Worker debe desactivarse, ya que necesita un nombre de dominio totalmente calificado (FQDN) para funcionar correctamente.
Para desactivar la función del Service Worker, agregue el siguiente fragmento de código al principio del archivo
index.ts:`javascript`if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(registrations => {
for (const registration of registrations) {
registration.unregister();
}
});
}
Este fragmento de código anulará cualquier Service Worker existente al iniciar la aplicación.
Conclusión
El problema con el banner de “conexión perdida” y el error 404 al ejecutar un servidor Jetty que aloja una aplicación de Vaadin Fusion es causado por la función del Service Worker. Al desactivar la función del Service Worker, la aplicación puede ejecutarse sin ningún problema localmente.