Compilación de PWA para la barra lateral en Microsoft Edge

  • Artículo

Las aplicaciones web progresivas (PWA) pueden optar por anclarse a la barra lateral de Microsoft Edge.

La barra lateral de Microsoft Edge permite a los usuarios acceder fácilmente a sitios web y utilidades populares junto con las pestañas del explorador. El contenido de la barra lateral aumenta la tarea principal del usuario al habilitar la exploración en paralelo y minimizar la necesidad de cambiar contextos entre las pestañas del explorador.

Al indicar la intención de anclarse a la barra lateral, la PWA obtiene las siguientes ventajas:

  • La PWA se puede promocionar en el almacén de la barra lateral de Microsoft Edge.
  • El PWA puede detectar si se está ejecutando en la barra lateral de Microsoft Edge o no.
  • Su PWA define su propio estilo y diseño para proporcionar una experiencia de barra lateral fácil de usar.

Habilitación de la compatibilidad con la barra lateral en la PWA

Para preparar la PWA para anclar a la barra lateral de Microsoft Edge, use el miembro del edge_side_panel manifiesto:

  1. Asegúrese de que la PWA tenga un archivo de manifiesto de aplicación web que contenga al menos los namemiembros , short_name, descriptiony icons . Para obtener más información, consulte Uso de un manifiesto de aplicación web para integrar un PWA en el sistema operativo.

  2. Agregue el edge_side_panel miembro al manifiesto de la aplicación web. Por ejemplo:

    {
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {}
}

Adaptar la aplicación al ancho mínimo de la barra lateral

La barra lateral de Microsoft Edge tiene un ancho mínimo predeterminado de 376 píxeles y los usuarios pueden cambiar el tamaño. Por lo tanto, el diseño de la aplicación debe admitir el ancho mínimo de 376 píxeles y debe tener capacidad de respuesta.

Al compilar la aplicación, puede probar si el diseño de la aplicación es utilizable cuando es estrecho y asegurarse de que el diseño responde a diferentes anchos mediante la herramienta Emulación de dispositivos en Microsoft Edge DevTools. Para más información, consulte Comprobación de que el diseño de la página web es utilizable cuando es estrecho.

Si el diseño de la aplicación no admite el ancho mínimo de 376 píxeles, puedes definir el ancho que prefieras mediante la preferred_width propiedad del manifiesto de la aplicación web. Por ejemplo:

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "standalone",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

Al definir un ancho preferido en el manifiesto de la aplicación, ocurre lo siguiente:

  • Cuando la aplicación se abre en la barra lateral, la barra lateral cambia automáticamente de tamaño a su ancho preferido.

  • Los usuarios pueden cambiar el tamaño de la barra lateral para que sea mayor que el ancho preferido, o más pequeño, hasta el ancho mínimo de 376 píxeles.

Compilación de una aplicación de solo barra lateral

Una de las ventajas más importantes de crear una aplicación como PWA es que, desde una base de código, la aplicación se adapta a todos los dispositivos y sistemas operativos, independientemente de sus capacidades y tamaños de pantalla.

El edge_side_panel miembro del manifiesto hace que la aplicación se pueda instalar como una aplicación independiente y permite que la aplicación se ancle a la barra lateral de Microsoft Edge.

Sin embargo, si prefiere compilar una aplicación que solo se puede anclar a la barra lateral pero que no se puede instalar como una aplicación independiente, establezca el valor del display miembro en , como se muestra a browsercontinuación (o bien omita el display miembro del manifiesto de la aplicación web):

{
  "name": "PWAmp music player",
  "lang": "en-US",
  "start_url": "/",
  "short_name": "PWAmp",
  "description": "A skinnable music player app to play your favorite mp3 files",
  "display": "browser",
  "icons": [
    {
      "src": "./favicon-256.png",
      "sizes": "256x256"
    }
  ],
  "edge_side_panel": {
    "preferred_width": 480
  }
}

Detección del uso en la barra lateral

Detectar cuándo se ejecuta la aplicación en la barra lateral puede ser útil para proporcionar a los usuarios la mejor experiencia posible cuando la aplicación se ejecuta en este panel del explorador.

Puede detectar cuándo se ejecuta la aplicación en la barra lateral mediante User-Agent sugerencias de cliente. Para obtener más información sobre User-Agent sugerencias de cliente, consulte Detección de Microsoft Edge desde su sitio web.

Para detectar cuándo se ejecuta la aplicación en la barra lateral, haga lo siguiente:

  • En el servidor web, lea el encabezado de Sec-CH-UA solicitud HTTPS y busque la Edge Side Panel marca. Por ejemplo:

    Sec-CH-UA: "Microsoft Edge";v="112", "Edge Side Panel";v="1", "Placeholder;Browser Brand";v="99"

  • O bien, en el explorador, use la navigator.userAgentData API de JavaScript y lea el valor de la brands propiedad . Por ejemplo:

    const brands = navigator.userAgentData.brands;
const sidebarBrandInfo = brands.find(b => b.brand === "Edge Side Panel");
if (sidebarBrandInfo) {
  console.log(sidebarBrandInfo); // { brand: "Edge Side Panel", version: "1" }
} else {
  console.log("App is not running in the Microsoft Edge sidebar");
}

Para detectar si la aplicación se ejecuta en la barra lateral, también puede usar la cadena Agente de usuario.

Nota: Se recomienda encarecidamente usar sugerencias de cliente del Agente de usuario en lugar de la cadena agente de usuario. La cadena del Agente de usuario es un mecanismo obsoleto para realizar la detección del explorador y tiene problemas de compatibilidad con el sitio web.

Si no puede usar sugerencias de cliente del Agente de usuario en la aplicación, busque Edge Side Panel en la cadena Agente de usuario. Estos son algunos ejemplos de cadenas del Agente de usuario que contienen el Edge Side Panel valor:

User-Agent: ... (Edge Side Panel)...
User-Agent: ... (..., Edge Side Panel)...
User-Agent: ... (Edge Side Panel, ...)...

Relación con la aplicación móvil

Supongamos que crea una variante de escritorio de la aplicación y una variante móvil de la aplicación. En este escenario, la variante de escritorio se usa cuando la aplicación está anclada a la barra lateral. De forma predeterminada, las aplicaciones de la barra lateral que usan el miembro de edge_side_panel manifiesto reciben la sugerencia de cliente del Agente de usuario del escritorio de Microsoft Edge:

Sec-CH-UA-Mobile: ?0

Como se explica en Adaptar la aplicación al ancho mínimo de la barra lateral, se recomienda hacer que el diseño de la aplicación responda para que pueda adaptarse a varios factores de forma mediante una base de código única.

Sin embargo, puede usar la Edge Side Panel marca sugerencia de cliente del Agente de usuario para reutilizar la variante móvil de la aplicación en la barra lateral de Microsoft Edge.

Siga estas recomendaciones al usar una variante móvil de la aplicación en la barra lateral:

  • Quite todos los mensajes "Abrir en la aplicación" que indican a los usuarios que descarguen la aplicación desde una tienda de aplicaciones.

  • Prueba la accesibilidad y facilidad de uso de la aplicación con todos los métodos de entrada: mouse, teclado y toque. Para obtener información sobre cómo probar la accesibilidad de la aplicación, consulte Características de pruebas de accesibilidad.

Aplicación de demostración

PWAmp es una aplicación de demostración de PWA de reproductor de música que se puede anclar a la barra lateral de Microsoft Edge. Para probar PWAmp como una aplicación de barra lateral:

  1. Abra Microsoft Edge y asegúrese de que se muestra la barra lateral. Si no se muestra la barra lateral, vaya a edge://settings/sidebar y active el botón de alternancia Mostrar siempre barra lateral :

    La página Configuración perimetral con la opción

  2. Vaya a PWAmp en una nueva ventana o pestaña. No es necesario instalar la aplicación.

  3. Abra la barra lateral, haga clic en Personalizary, a continuación, haga clic en Abrir en la barra lateral:

    Panel

    La aplicación de reproductor de música PWAmp aparece en la barra lateral.

  4. Haga clic en el icono de PWAmp en la barra lateral para abrir la aplicación y usarla junto con las demás pestañas:

    Microsoft Edge con una pestaña abierta en una aplicación de lista TODO y PWAmp en la barra lateral

El código fuente de la aplicación de demostración PWAmp tiene lo siguiente, para admitir la barra lateral de Microsoft Edge:

  • Miembro edge_side_panel del archivo manifest.json .

  • Variable isSidebarPWA , que usa la navigator.userAgentData API de JavaScript en el archivo app.js .

Puede encontrar todo el código fuente de demostración de PWAmp en MicrosoftEdge / Demos > pwamp. Para descargar el código fuente localmente, vea Descargar o clonar el repositorio de demostraciones en Código de ejemplo para DevTools.

Enviar comentarios

El equipo de Microsoft Edge agradece sus comentarios sobre esta característica. Lea el explicador del panel lateral en el repositorio de explicación de la plataforma web de Microsoft Edge y deje sus comentarios creando un nuevo problema en el repositorio o buscando problemas existentes y uniéndose a las conversaciones existentes.