Modo de aplicación con pestañas para AWP

Trabaja en más de un documento a la vez con pestañas en tu app web progresiva

Thomas Steiner

En el mundo de la computación, la metáfora de escritorio es una metáfora de interfaz que consiste en un conjunto de conceptos unificadores que utilizan las interfaces gráficas de usuario (GUI) para ayudar a los usuarios a interactuar de forma más intuitiva con la computadora. En consonancia con la metáfora de escritorio, las pestañas de la GUI se modelan según las pestañas de tarjetas clásicas que se insertan en libros, archivos de 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 incluyan en una sola ventana, con pestañas como widget de navegación para cambiar entre conjuntos de documentos.

Las apps web progresivas pueden ejecutarse en varios modos de visualización determinados por la propiedad display en el manifiesto de la app web. Las opciones 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. Con 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?

Hasta ahora, faltaba en la plataforma una forma de permitir que los desarrolladores de AWP ofrecieran 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 del 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 a artículos en pestañas nuevas dentro de la app

Diferencias con las pestañas creadas por desarrolladores

Tener documentos en pestañas separadas del navegador permite el aislamiento de recursos, lo que no es posible en la Web actual. Las pestañas creadas por desarrolladores no se adaptarían de forma aceptable a cientos de pestañas, como lo hacen las pestañas del navegador. Las funciones 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 seleccionado.

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 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 "ejecutar en una ventana separada específica de la aplicación sin recursos del navegador, pero con una interfaz de documentos con pestañas".

Configurar "display": "browser" es, en efecto, la forma de inhabilitar la colocación en una ventana de aplicación.

Estado actual

Paso Estado
1. Crea una explicación Completo
2. Crea el borrador inicial de la especificación Completo
3. Recopila comentarios y realiza iteraciones en el diseño Completado
4. Prueba de origen Completado
5. Lanzamiento Completado (ChromeOS)

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 estableciendo un valor de modo "display_override" específico en el manifiesto de la app web.

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

A continuación, se puede usar la propiedad "tab_strip" de forma 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 usará el siguiente objeto de forma predeterminada:

"tab_strip": {
  "new_tab_button": {
    "url": <start_url>,
  },
}

Pestaña Principal

La pestaña principal es una pestaña fijada que, si está habilitada para una app, siempre debe estar presente cuando la app esté abierta. Esta pestaña nunca debería navegar. Los vínculos en los que se haga 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 se bloquea esta pestaña y el ícono que se muestra en ella.

El miembro "home_tab" del objeto "tab_strip" contiene información sobre una "pestaña principal" especial que está diseñada para funcionar como el menú de nivel superior de la aplicación. Contiene el siguiente miembro:

  • "scope_patterns": El miembro "scope_patterns" es una lista de patrones de URL que definen el alcance de la pestaña principal en relación con la URL del manifiesto.

Botón de pestaña nueva

El miembro "new_tab_button" del objeto "tab_strip" describe el comportamiento de una ayuda visual de la IU (como un botón) que, cuando se hace clic en ella o se activa, abre un nuevo contexto de la aplicación dentro de la ventana de la aplicación. Tiene el siguiente miembro:

  • "url": El miembro "url" es una cadena que representa una URL relativa a la URL del manifiesto que se encuentra dentro del alcance de un manifiesto procesado.

Una aplicación tiene un botón de pestaña nueva si el miembro "url" de new_tab_button del manifiesto procesado está fuera del alcance de la pestaña principal. Si la aplicación no tiene un botón de pestaña nueva, el navegador no pone a disposición del usuario la opción de "pestaña nueva".

Ejemplo completo

Un ejemplo completo para configurar el comportamiento de una app con una interfaz de pestañas podría verse de la siguiente manera:

{
  "name": "Tabbed App Example",
  "start_url": "/",
  "display": "standalone",
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "scope_patterns": [
        {"pathname": "/"},
        {"pathname": "/index.html"}
      ]
    },
    "new_tab_button": {
      "url": "/create"
    }
  }
}

Detecta 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 medios 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 establece "client_mode": "navigate-new", los inicios de la app abrirán una pestaña nueva en una ventana existente de la app.

Demostración

Puedes probar la aplicación con pestañas en ChromeOS:

  1. Instala la app Tabbed Application Mode (código fuente).
  2. Haz clic en los diferentes vínculos de las distintas pestañas.

Demostración del modo de aplicación con 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? Comenta el problema del manifiesto de la app web que creamos.

Informa un problema con la implementación

¿Encontraste un error en la implementación de Chrome? Presenta un error en new.crbug.com. Asegúrate de incluir tantos detalles como sea posible, instrucciones para reproducir el error y, luego, ingresa UI>Browser>WebAppInstalls en el cuadro Components.

Cómo mostrar compatibilidad con la API

¿Planeas usar el modo de aplicación con pestañas? Tu apoyo público ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es admitirlas.

Envía un tuit a @ChromiumDev con el hashtag #TabbedApplicationMode y cuéntanos dónde y cómo lo usas.

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 documento. Imagen hero de Till Niermann en Wikimedia Commons.