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 del escritorio es una metáfora de la 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 del escritorio, las pestañas de la GUI se basan en pestañas de tarjetas tradicionales que se insertan en libros, archivos impresos o índices de tarjetas. Una pestaña o tabulador de un documento (TDI) es un elemento de control gráfico que permite paneles que se encuentren dentro de una sola ventana, con pestañas como widget de navegación para cambiar entre conjuntos de documentos.

Las Progressive Web Apps pueden ejecutarse en varios modos de visualización determinados por la display en el manifiesto de app web. Algunos ejemplos son fullscreen, standalone, minimal-ui, y browser. Estos modos de visualización siguen un cadena de resguardo bien definida ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Si un navegador no admite un elemento determinado, recurre al siguiente modo de visualización de la cadena. A través de la "display_override", los desarrolladores pueden especificar su propia cadena de resguardo si es necesario.

¿Qué es el modo de aplicación con pestañas?

Algo que ha estado omitido en la plataforma hasta ahora es una forma de permitir que los desarrolladores de AWP ofrezcan a sus a los usuarios una interfaz de documento con pestañas, por ejemplo, para permitir la edición de diferentes archivos en la misma AWP en la ventana modal. El modo de aplicación con pestañas cierra esta brecha.

Casos de uso sugeridos para el modo de aplicación con pestañas

Entre los ejemplos de sitios que pueden utilizar el modo de aplicación con pestañas se incluyen:

  • Apps de productividad que permiten que el usuario edite más de un documento (o archivo) a la vez
  • Apps de comunicación que permiten al usuario mantener conversaciones en diferentes salas por pestaña
  • Apps de lectura que abren vínculos de artículos en nuevas pestañas integradas en la app

Diferencias con las pestañas creadas por el desarrollador

Tener documentos en pestañas del navegador separadas viene con aislamiento de recursos gratis, que no es posible usando la Web hoy en día. Las pestañas creadas por el desarrollador no escalarían aceptablemente 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" o "transmitir", esta pestaña" o "Abre esta página en un navegador web" se aplicaría a la pestaña creada por el desarrollador de la interfaz de usuario, pero no 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 usando la convención específica de la plataforma para abrir hipervínculos en la usuario-agente (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, claramente sería una subversión bastante grande. de las expectativas de los desarrolladores si "display": "browser" de repente quiso decir "ejecutar en un ventana específica de la aplicación sin opciones de navegador, pero interfaz de documento con pestañas”.

Configurar "display": "browser" es efectivamente la forma en que inhabilitas la publicación de contenido en una aplicación. en la ventana modal.

Estado actual

Paso Estado
1. Crear explicación Completo
2. Crea el borrador inicial de la especificación Sin iniciar
3. Recopila comentarios y iterar 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 estableciendo una configuración El valor del modo "display_override" 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 las subpropiedades permitidas, "home_tab" y "new_tab_button". Si la propiedad "tab_strip" no es presente, las propiedades particulares Se usan valores "auto". El navegador determina qué valores usar para "auto".

Pestaña Principal

La pestaña Inicio es una pestaña fija que, si está habilitada para una aplicación, debe estar siempre presente cuando la aplicación esté abiertos. Esta pestaña nunca debe navegar. Los vínculos en los que hagas clic desde esta pestaña deberían abrirse en una pestaña nueva de la app. Aplicaciones puedes elegir personalizar la URL a la que está bloqueada esta pestaña y el ícono que aparece 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 la página 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" por los valores permitidos de "auto" o un array de íconos, como en el elemento principal Propiedad "icons".

Botón Nueva pestaña

El botón de nueva pestaña, si está presente, debe abrir una nueva pestaña en una URL que esté dentro del alcance de la aplicación. La app puede establecer una URL y un ícono personalizados para este botón. Los navegadores pueden decidir cómo manejar arrastrando estas pestañas para crear nuevas ventanas 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" por los valores permitidos de "auto" o un array de íconos, como en el elemento principal Propiedad "icons".

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"
        }
      ]
    }
  }
}

Detecta el modo de aplicación con pestañas

Las apps pueden detectar si se están ejecutando en el modo de aplicación con pestañas revisando la display-mode Función de medios 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 a los sitios redireccionar la app se inicia en las ventanas de aplicaciones existentes para evitar que se abran ventanas duplicadas. Cuando un elemento conjuntos de apps con pestañas "client_mode": "navigate-new", los lanzamientos de apps abrirán una nueva pestaña en una la ventana de la app existente.

Demostración

Puedes probar el modo de aplicación con pestañas si configuras una marca del navegador:

  1. Establece la marca #enable-desktop-pwas-tab-strip.
  2. Instala la app tabbed-application-mode.glitch.me. (código fuente).
  3. Haz clic en los diferentes vínculos de las distintas pestañas.

Captura de pantalla de la demostración del modo de aplicación con pestañas en tabbed-application-mode.glitch.me.

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 en el modo de aplicación con pestañas que no funcione como esperabas? Comentar en el problema con el manifiesto de la app 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, ya que instrucciones de reproducción y, luego, ingresa UI>Browser>WebAppInstalls en el cuadro Componentes. Glitch funciona muy bien para compartir casos de reproducción de forma rápida y sencilla.

Demuestra compatibilidad con la API

¿Piensas usar el modo de aplicación con pestañas? Tu asistencia pública ayuda al equipo de Chrome prioriza funciones y muestra a otros proveedores de navegadores la importancia de admitirlas.

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

Agradecimientos

Matt Giuca exploró el modo de aplicación con pestañas. El experimento en Chrome fue obra de Alan Ctter. Este artículo fue revisado por Joe Medley. Hero image de Till Niermann, en Wikimedia Commons.