Cómo trabajar en más de un documento a la vez con pestañas en tu app web progresiva
En el mundo de la informática, la metáfora de escritorio es una metáfora de interfaz que es un conjunto de conceptos unificadores que usan 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 de la computadora de escritorio, las pestañas de la GUI se basan en las pestañas de tarjetas tradicionales que se insertan en libros, archivos en papel o índices de tarjetas. Una interfaz de documentos con pestañas (TDI) o pestaña es un elemento de control gráfico que permite que varios documentos o paneles se contengan en una sola ventana, con pestañas como un widget de navegación para cambiar 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. A través de la propiedad "display_override", los desarrolladores pueden especificar su propia cadena de resguardo si es necesario.
¿Qué es el modo de aplicación con pestañas?
Hasta el momento, a la plataforma le faltaba una forma de permitir que los desarrolladores de AWP ofrezcan a sus usuarios una interfaz de documentos con pestañas, por ejemplo, para permitir 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
Estos son algunos ejemplos de sitios que pueden usar 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 al usuario tener 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 documentos en pestañas de navegador separadas incluye el aislamiento de recursos de forma gratuita, lo que no es posible con la Web en la actualidad. Las pestañas creadas por el desarrollador no se escalarían de manera aceptable a cientos de pestañas, como lo hacen las pestañas del navegador. Las indicaciones 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 actualmente.
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 agente de usuario (p.ej., en una pestaña del navegador o en una ventana nueva).
Si bien los navegadores pueden hacer lo que quieran con respecto a la IU, sería una subversión bastante grande de las expectativas de los desarrolladores si "display": "browser" de repente significara "ejecutarse en una ventana específica de la aplicación sin indicaciones del navegador, pero con una interfaz de documentos con pestañas".
La configuración de "display": "browser" es la forma en que inhabilitas que se te dirija a una ventana de la aplicación.
Estado actual
| Paso | Estado |
|---|---|
| 1. Crear explicación | Completo |
| 2. Crea el borrador inicial de la especificación | Sin iniciar |
| 3. Recopila comentarios y itera en el diseño | En curso |
| 4. Prueba de origen | En curso |
| 5. Lanzamiento | Sin iniciar |
Cómo 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 configurando un valor de modo "display_override" específico en el manifiesto de la app web.
{
"display": "standalone",
"display_override": ["tabbed"]
}
A continuación, la propiedad "tab_strip" se puede usar de forma opcional para ajustar el comportamiento de la pestaña. Tiene dos subpropiedades permitidas, "home_tab" y "new_tab_button". Si no está presente la propiedad "tab_strip", se usan los valores "auto" de las propiedades particulares. El navegador determina qué valores usar para "auto".
Pestaña Principal
La pestaña principal es una pestaña fija que, si está habilitada para una app, siempre debe estar presente cuando esta está abierta. Esta pestaña nunca debe navegar. Los vínculos en los que se haga clic desde esta pestaña se deberían abrir en una pestaña nueva de la app. Las apps pueden personalizar la URL a la que está bloqueada esta pestaña y el ícono que se muestra 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 principal.- Un objeto con dos subpropiedades:
"url"por los valores permitidos de"auto"o una URL a la que se 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 Nueva pestaña
Si está presente, el botón de pestaña nueva debe 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 controlar el arrastre de 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 el botón de una pestaña nueva.- Un objeto con dos subpropiedades:
"url"con los valores permitidos de"auto"o una URL dentro del alcance para abrir nuevas pestañas"icons"con los valores permitidos de"auto"o un array de íconos como en la propiedad"icons"principal.
Ejemplo completo
A continuación, se incluye un ejemplo completo para configurar el 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"
}
]
}
}
}
Cómo detectar el modo de aplicación con pestañas
Las apps pueden detectar si se ejecutan en el modo de aplicación con pestañas verificando la función de contenido multimedia display-mode de CSS 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 las apps a las ventanas existentes para evitar que se abran ventanas duplicadas. Cuando una app con pestañas establece "client_mode": "navigate-new", los inicios de la app abrirán una pestaña nueva en una ventana de la app existente.
Demostración
Para probar el modo de aplicación con pestañas, establece una marca del navegador:
- Establece la marca
#enable-desktop-pwas-tab-strip. - Instala la app tabbed-application-mode.glitch.me (código fuente).
- Haz clic en los diferentes vínculos de las diferentes pestañas.
Comentarios
El equipo de Chrome quiere conocer tus experiencias con el modo de aplicación con pestañas.
Cuéntanos sobre el diseño de la API
¿Hay algo en el modo de aplicación con pestañas que no funciona como esperabas? Haz comentarios sobre el problema del manifiesto de la app web que creamos.
Denuncia 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 la mayor cantidad de detalles posible, así como instrucciones simples para la reproducción, y, luego, ingresa UI>Browser>WebAppInstalls en el cuadro Componentes.
Glitch es ideal para compartir casos de reproducción rápidos y fáciles.
Cómo mostrar 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 les muestra a otros proveedores de navegadores la importancia de admitirlas.
Envía un tuit a @ChromiumDev con el hashtag #TabbedApplicationMode y cuéntanos dónde y cómo lo usas.
Vínculos útiles
- Explicaciones
- Problema con las especificaciones del manifiesto de la app web
- Error de Chromium
- Componente Blink:
UI>Browser>WebAppInstalls
Agradecimientos
Matt Giuca exploró el modo de aplicación con pestañas. La implementación experimental en Chrome fue obra de Alan Cutter. Joe Medley revisó este artículo. Imagen hero de Till Niermann en Wikimedia Commons.
