Trabaja en más de un documento a la vez con pestañas en tu Progressive Web App
En el mundo de la informática, la metáfora de escritorio es una metáfora de la interfaz que es un conjunto de conceptos unificadores que utilizan las interfaces gráficas de usuario (GUI) para ayudar a los usuarios a interactuar más fácilmente con la computadora. De acuerdo con la metáfora del escritorio, las pestañas de la GUI se modelan a partir de las pestañas de tarjetas tradicionales insertadas en libros, archivos impresos o índices de tarjetas. Una interfaz de documento con pestañas (TDI) o pestaña es un elemento de control gráfico que permite que varios documentos o paneles se encuentren en una sola ventana, mediante las pestañas como widget de navegación para alternar entre conjuntos de documentos.
Las apps web progresivas se pueden ejecutar en varios modos de visualización determinados por la propiedad display en el manifiesto de la app web. Algunos ejemplos son fullscreen, standalone, minimal-ui y browser. Estos modos de visualización siguen una cadena de resguardo bien definida ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Si un navegador no admite un modo determinado, recurre al siguiente modo de visualización de la cadena. Mediante la propiedad "display_override", los desarrolladores pueden especificar su propia cadena de resguardo si lo necesitan.
Qué es el modo de aplicación con pestañas
Algo que faltaba en la plataforma hasta ahora es una forma de permitir que los desarrolladores de AWP ofrezcan a sus usuarios una interfaz de documentos con pestañas, por ejemplo, para habilitar la edición de diferentes archivos en la misma ventana de la AWP. El modo de aplicación con pestañas cierra esta brecha.
Casos de uso sugeridos para el modo de aplicación con pestañas
Ejemplos de sitios que pueden utilizar el modo de aplicación con pestañas:
- Apps de productividad que permiten al usuario editar más de un documento (o archivo) al mismo tiempo
- Apps de comunicación que permiten a los usuarios mantener conversaciones en diferentes salas por pestaña
- Apps de lectura que abren vínculos de artículos en pestañas nuevas de la app
Diferencias con las pestañas creadas por desarrolladores
Tener los documentos en pestañas separadas del navegador incluye aislamiento de recursos de forma gratuita, lo que no es posible en la actualidad. Las pestañas creadas por el desarrollador no se escalarían de forma aceptable a cientos de pestañas, al igual que las pestañas del navegador. Las opciones del navegador, como el historial de navegación, "Copiar la URL de esta página", "Transmitir esta pestaña" o "Abrir esta página en un navegador web", se aplicarían a la página de la interfaz con pestañas creada por el desarrollador, pero no a la página del documento seleccionada.
Diferencias con "display": "browser"
El "display": "browser" actual ya tiene un significado específico:
Abre la aplicación web con la convención específica de la plataforma para abrir hipervínculos en el usuario-agente (p.ej., en una pestaña del navegador o una ventana nueva).
Si bien los navegadores pueden hacer lo que quieran con respecto a la IU, claramente sería una subversión bastante grande de las expectativas de los desarrolladores si "display": "browser", de repente, significara "ejecutar en una ventana separada específica de la aplicación sin posibilidades de navegador, sino con una interfaz de documento con pestañas".
La configuración de "display": "browser" es la manera de inhabilitar que se lo coloque en una ventana de
aplicación.
Estado actual
| Step | Estado |
|---|---|
| 1. Crear explicación | Completo |
| 2. Crea el borrador inicial de la especificación | No iniciada |
| 3. Recopila comentarios e itera en el diseño | En curso |
| 4. Prueba de origen | En curso |
| 5. Lanzamiento | No iniciada |
Usar el modo de aplicación con pestañas
Para usar el modo de aplicación con pestañas, los desarrolladores deben habilitar sus apps estableciendo un valor de modo "display_override" específico en el manifiesto de la aplicación web.
{
"display": "standalone",
"display_override": ["tabbed"]
}
A continuación, la propiedad "tab_strip" se puede usar de manera opcional para ajustar el comportamiento de la pestaña. Tiene dos subpropiedades permitidas: "home_tab" y "new_tab_button". Si la propiedad "tab_strip" no está presente, se usan los valores "auto" de las propiedades particulares. El navegador determina qué valores usar para "auto".
Pestaña Principal
La pestaña de la página principal es una pestaña fija que, si se habilita para una app, siempre debe estar presente cuando esta esté abierta. Esta pestaña nunca debe navegar. Los vínculos en los que se haya hecho clic desde esta pestaña deberían abrirse en una nueva pestaña de la app. Las apps pueden personalizar la URL a la que está bloqueada esta pestaña y el ícono que se mostrará en ella.
Los valores permitidos para "home_tab" son los siguientes:
"auto"para permitir que el navegador determine qué hacer."absent"para indicarle al navegador que no muestre una pestaña de página principal.- Un objeto con dos subpropiedades:
"url"con los valores permitidos de"auto"o una URL para bloquear la pestaña de la página principal"icons"con los valores permitidos de"auto"o un array de íconos, como en la propiedad"icons"principal
Botón de pestaña nueva
Si está presente el botón de nueva pestaña, esta debería abrir una pestaña nueva en una URL que esté dentro del alcance de la app. La app puede establecer una URL y un ícono personalizados para este botón. Los navegadores pueden decidir cómo deben arrastrar estas pestañas para crear ventanas nuevas o combinarlas con pestañas del navegador.
Los valores permitidos para "new_tab_button" son los siguientes:
"auto"para permitir que el navegador determine qué hacer."absent"para indicarle al navegador que no muestre un botón de pestaña nueva- Un objeto con dos subpropiedades:
"url"con los valores permitidos de"auto"o una URL dentro del alcance para abrir pestañas nuevas"icons"con los valores permitidos de"auto"o un array de íconos, como en la propiedad"icons"principal
Ejemplo completo
A continuación, se muestra un ejemplo completo de configuración del comportamiento de una app con una interfaz con pestañas:
{
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"url": "./home/",
"icons": [
{
"src": "./home.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
},
"new_tab_button": {
"url": "./new-tab/",
"icons": [
{
"src": "./new-tab.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}
}
}
Detecta el modo de aplicación con pestañas
Para detectar si las apps se ejecutan en el modo de aplicación con pestañas, verifica la función de medios de CSS display-mode en CSS o JavaScript:
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
Interacción con la API de Launch Handler
La API de Launch Handler permite que los sitios redireccionen los inicios de apps a ventanas de apps existentes para evitar que se abran ventanas duplicadas. Cuando una app con pestañas configura "client_mode": "navigate-new", cuando se inicia la app, se abre una pestaña nueva en una ventana existente de la app.
Demostración
Para probar el modo de aplicación con pestañas, configura una marca del navegador:
- Establece la marca
#enable-desktop-pwas-tab-strip. - Instala la aplicación tabbed-application-mode.glitch.me (código fuente).
- Haz clic en los vínculos diferentes en las distintas pestañas.
Comentarios
El equipo de Chrome quiere conocer tu experiencia con el modo de aplicación con pestañas.
Cuéntanos sobre el diseño de la API
¿Hay algo sobre el modo de aplicación con pestañas que no funciona como esperabas? Realiza comentarios sobre el problema con el manifiesto de la aplicación web que creamos.
Informar un problema con la implementación
¿Encontraste un error en la implementación de Chrome? Informa un error en new.crbug.com. Asegúrate de incluir tantos detalles como puedas, instrucciones simples para reproducir el contenido y, luego, ingresa UI>Browser>WebAppInstalls en el cuadro Componentes.
Glitch funciona muy bien para compartir casos de reproducción rápidos y fáciles.
Muestra compatibilidad con la API
¿Planeas usar el modo de aplicación con pestañas? Tu asistencia pública ayuda al equipo de Chrome a priorizar funciones y le muestra a otros proveedores de navegadores la importancia de brindar compatibilidad.
Envía un tweet a @ChromiumDev con el hashtag #TabbedApplicationMode y cuéntanos dónde y cómo lo usas.
Vínculos útiles
- Explicación
- Problema de especificaciones del manifiesto de la app web
- Error de Chromium
- Componente de Blink:
UI>Browser>WebAppInstalls
Agradecimientos
Matt Giuca exploró el modo de aplicación con pestañas. La implementación experimental en Chrome fue trabajo de Alan Cutter. Joe Medley revisó este artículo. Imagen hero de Till Niermann en Wikimedia Commons.
