Preguntas frecuentes de web

No todas las páginas web tienen sentido en Flutter, pero creemos que Flutter es especialmente adecuado para experiencias centradas en aplicaciones:

• Aplicaciones Web Progresivas (PWAs)
• Aplicaciones de una sola página
• Aplicaciones móviles de Flutter existentes

En este momento, Flutter no es adecuado para sitios web estáticos con contenido basado en flujo y rico en texto. Por ejemplo, los artículos de blog se benefician del modelo centrado en documentos en el que se basa la web, en lugar de los servicios centrados en aplicaciones que puede ofrecer un framework de UI como Flutter. Sin embargo, puedes usar Flutter para incrustar experiencias interactivas en estos sitios web.

Para obtener más información sobre cómo puedes usar Flutter en la web, consulta Soporte web para Flutter.

En general, Flutter está orientado a experiencias de aplicaciones dinámicas. El soporte web de Flutter no es la excepción. Flutter web prioriza el rendimiento, la fidelidad y la consistencia. Esto significa que la salida de la aplicación no se alinea con lo que los motores de búsqueda necesitan para indexarla correctamente.

Sin embargo, un paquete de Dart lanzado por la comunidad, Jaspr, sí es compatible con sitios web estáticos. De hecho, los sitios web de la documentación de Dart, la documentación de Flutter y el sitio de marketing de Flutter se migraron para utilizar el paquete Jaspr.

En resumen, para contenido web que sea estático o similar a un documento, recomendamos usar cualquiera de las siguientes opciones:

1. Jaspr, si quieres usar Dart pero deseas un sitio web tradicional basado en DOM. Ten en cuenta también que Jaspr hace que el SEO funcione de la misma manera que lo haría en un sitio web tradicional.
2. HTML: en este caso, considera separar tu experiencia de aplicación principal (creada en Flutter) de tu página de destino (landing page), contenido de marketing y contenido de ayuda (creados con HTML optimizado para motores de búsqueda).

¡Sí! Para obtener más información, consulta Hot Reload en la web.

Las aplicaciones web de Flutter pueden ejecutarse en los siguientes navegadores:

• Chrome (móvil y escritorio)
• Safari (móvil y escritorio)
• Edge (móvil y escritorio)
• Firefox (móvil y escritorio)

Durante el desarrollo, Chrome (en macOS, Windows y Linux) y Edge (en Windows) son compatibles como los navegadores predeterminados para depurar tu aplicación.

Puedes seleccionar Chrome o Edge como dispositivo de destino en Android Studio/IntelliJ and VS Code.

El menú desplegable de dispositivos ahora debería incluir la opción Chrome (web) para todos los canales.

Consulta Crear aplicaciones adaptables.

No. El sistema de archivos no es accesible desde el navegador. Para la funcionalidad de red, usa el paquete http. Ten en cuenta que la seguridad funciona de manera algo diferente porque el navegador (y no la aplicación) controla las cabeceras en una solicitud HTTP.

Algunos plugins requieren importaciones específicas de la plataforma, particularmente si usan el sistema de archivos, al cual no se puede acceder desde el navegador. Para usar estos plugins en tu aplicación, consulta la documentación sobre importaciones condicionales en dart.dev.

El soporte de concurrencia de Dart que usa isolates no está admitido actualmente en Flutter web.

Las aplicaciones web de Flutter pueden potencialmente solucionar esto usando web workers, aunque dicho soporte no está integrado.

Consulta Preparar una aplicación web para el lanzamiento.

No. Aunque técnicamente puedes importar dart:io al compilar para la web, llamar a cualquier método Platform.isXYZ arroja un UnsupportedError. Además, importar dart:io en un paquete (excepto a través de importaciones condicionales) hace que pub.dev puntúe el paquete como no compatible con la web.

• Si estás desarrollando una aplicación de Flutter, considera usar kIsWeb.
• Si estás desarrollando un paquete (especialmente uno sin una dependencia de Flutter), considera usar el paquete os_detect .

Es posible que necesites configurar el encabezado Cache-Control devuelto por tu servidor web. Por ejemplo, si este encabezado se establece en 3600, entonces el navegador y la CDN almacenarán en caché el recurso durante 1 hora, y tus usuarios podrían ver una versión desactualizada de tu aplicación hasta 1 hora después de que despliegues una nueva versión. Para obtener más información sobre el almacenamiento en caché en la web, consulta Prevenir solicitudes de red innecesarias con la caché HTTP.

Es una buena idea ser consciente de este comportamiento para evitar una experiencia de usuario no deseada. Después de desplegar tu aplicación, los usuarios podrían utilizar una versión en caché de tu aplicación (guardada en caché por el navegador o la CDN) durante el tiempo definido por las cabeceras de caché. Esto puede llevar a usar una versión de tu aplicación que sea incompatible con los cambios que se han desplegado en los servicios backend.

Si deseas anular estas cabeceras de caché después de cada despliegue, una técnica común es añadir algún tipo de ID de compilación a los enlaces de tus recursos estáticos, o actualizar los nombres de archivo mismos. Por ejemplo, logo.png podría convertirse en logo.v123.png.

<!-- Option 1, append build ID as a query parameter in your links -->
<script src="flutter_bootstrap.js?v=123" async></script>
​
<!-- Option 2, update the filename and update your links -->
<script src="flutter_bootstrap.v123.js" async></script>

Actualmente, Flutter no admite la adición automática de IDs de compilación a los recursos.

Si usas Firebase Hosting, la caché compartida (CDN) se invalida cuando despliegas una nueva versión de tu aplicación. Sin embargo, para asegurarte de que el navegador no guarde en caché los scripts de la aplicación pero la caché compartida sí lo haga, puedes configurar tus cabeceras de caché de la siguiente manera:

{
  "hosting": {
    "headers": [
      {
        "source":
          "**/*.@(jpg|jpeg|gif|png|svg|webp|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=3600,s-maxage=604800"
          }
        ]
      },
      {
        "source":
          "**/*.@(mjs|js|wasm|json)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=0,s-maxage=604800"
          }
        ]
      }
    ]
  }
}

Flutter ya no genera ni gestiona un service worker de forma predeterminada.

Si tu aplicación requiere soporte sin conexión o almacenamiento en caché avanzado, debes configurar un service worker tú mismo utilizando herramientas web estándar o soluciones de terceros como Workbox.

Para obtener más información sobre la creación de service workers personalizados, consulta Usar service workers.

Si tu service worker no se está actualizando, configura tu CDN y la caché del navegador configurando la cabecera Cache-Control a un valor pequeño como 0 o 60 segundos.