Instalación

Una vez que el usuario instale tu AWP, hará lo siguiente:

  • Tener un ícono en el selector, la pantalla principal, el menú de inicio o el panel de lanzamiento
  • Aparecen como un resultado cuando un usuario busca la app en su dispositivo.
  • Tener una ventana independiente en el sistema operativo
  • Se brinda asistencia para capacidades específicas.

Criterios de instalación

Cada navegador tiene un criterio que marca cuándo un sitio web o una app web es una app web progresiva y se pueden instalar para una experiencia independiente. Los metadatos de tu AWP se configuran mediante un archivo basado en JSON conocido como manifiesto de apps web, que abordaremos en detalle en el próximo módulo.

Como requisito mínimo para la instalación, la mayoría de los navegadores compatibles usan el archivo de manifiesto de apps web y ciertas propiedades, como el nombre de la app y la configuración de la experiencia instalada. Una excepción a esto es Safari para macOS, que no admite la instalación.

Los requisitos para permitir la instalación difieren entre los distintos navegadores. En este artículo, se detallan los criterios para Google Chrome y se incluyen vínculos a los requisitos para otros navegadores.

Dado que la prueba de que una AWP cumple con los requisitos de instalación puede tardar varios segundos, es posible que la instalación en sí no esté disponible en cuanto se reciba una respuesta de URL.

Instalación en computadoras de escritorio

Actualmente, Google Chrome y Microsoft Edge admiten la instalación de AWP de escritorio en Linux, Windows, macOS y Chromebooks. Estos navegadores mostrarán un pin de instalación (ícono) en la barra de URL (consulta la imagen a continuación) para indicar que el sitio actual se puede instalar.

Chrome y Edge para computadoras de escritorio con la insignia de instalación en la barra de URL

Cuando un usuario interactúa con un sitio, es posible que vea una ventana emergente como la que se muestra a continuación con una invitación para que lo instalen como una aplicación.

Ayuda integrada en el producto de Google Chrome para sugerir la instalación de la AWP.

El menú desplegable del navegador también incluye el elemento "Instalar " que el usuario puede utilizar:

Elementos de menú de Chrome y Edge para la instalación de AWP.

Solo se admiten los modos de visualización de IU mínima y independiente en los sistemas operativos de computadoras.

AWP instaladas en computadoras de escritorio:

  • Coloca un ícono en el menú o la pantalla de inicio en PCs con Windows, en el conector o en la computadora de escritorio en las GUI de Linux, en el Launchpad de macOS o en el selector de aplicaciones de una Chromebook.
  • Tener un ícono en los cargadores de apps y en los en los conector cuando la app esté activa, se usó recientemente o se abra en segundo plano
  • Aparecen en la búsqueda de apps, por ejemplo, busca en Windows o Spotlight en macOS.
  • Puede establecer un número de insignia en sus íconos para indicar nuevas notificaciones. Para ello, usa la API de Badging.
  • Puedes establecer un menú contextual para el ícono con Accesos directos a aplicaciones.
  • No se puede instalar dos veces con el mismo navegador.

Después de instalar una app en el escritorio, los usuarios pueden navegar a about:apps, hacer clic con el botón derecho en una AWP y seleccionar "Start app when you sign in" si desean que la app se abra automáticamente al iniciarse.

Instalación en iOS y iPadOS

En iOS y iPadOS, no existe un mensaje del navegador para instalar la AWP. En estas plataformas, las AWP también se conocen como aplicaciones web de pantalla principal. Estas aplicaciones se deben agregar manualmente a la pantalla principal a través de un menú que solo está disponible en Safari. Se recomienda que agregues la etiqueta apple-touch-icon a tu código HTML. Para definir el ícono, incluye la ruta de acceso al ícono en tu sección HTML <head>, de la siguiente manera:

<link rel="apple-touch-icon" href="/icons/ios.png">

Safari utilizará esa información para crear el acceso directo y, si no proporcionas un ícono específico para los dispositivos Apple, el ícono de la pantalla principal será una captura de pantalla de tu AWP cuando el usuario la instale.

Es importante comprender que la instalación de la AWP solo está disponible si el usuario explora tu sitio web desde Safari. Otros navegadores disponibles en App Store, como Google Chrome, Firefox, Opera o Microsoft Edge, no pueden instalar una AWP en la pantalla principal.

Para agregar apps a la pantalla principal, sigue estos pasos:

  1. Abre el menú Compartir, disponible en la parte inferior o superior del navegador.
  2. Haz clic en Agregar a la pantalla principal.
  3. Confirma el nombre de la app (el usuario puede editarlo).
  4. Haz clic en Agregar. En iOS y iPadOS, los favoritos de los sitios web y las AWP se ven iguales en la pantalla principal.

En iOS y iPadOS, solo se admite el modo de visualización independiente. Por lo tanto, si usas el modo de IU mínimo, recurrirá a un acceso directo del navegador. Si usas la pantalla completa, volverá a ser independiente.

AWP instaladas en iOS y iPadOS:

  • Aparecen en la pantalla principal, en la búsqueda de Spotlight, en Sugerencias de Siri y en la búsqueda de la Biblioteca de aplicaciones.
  • No aparecen en las carpetas de categorías de la Galería de aplicaciones.
  • No admiten funciones como insignias y accesos directos a aplicaciones.

Por cierto, Safari utiliza una tecnología nativa conocida como Clips web para crear los íconos de las AWP en el sistema operativo. Solo son archivos en formato XML en formato de lista de propiedades de Apple almacenados en el sistema de archivos.

Instalación de Android

En Android, los mensajes de instalación de la AWP varían según el dispositivo y el navegador. Es posible que los usuarios vean lo siguiente:

  • Las variaciones en la redacción del elemento de menú para instalar, como Instalar o Agregar a la pantalla principal
  • Diálogos de instalación detallados

En la siguiente imagen, puedes ver dos versiones diferentes de un diálogo de instalación: una simple barra de información (izquierda) y un diálogo de instalación detallado (derecha).

Minibarra de información y diálogos de instalación en Android

Según el dispositivo y el navegador, la AWP se instalará como WebAPK, acceso directo o QuickApp.

WebAPKs

Un WebAPK es un paquete de Android (APK) creado por un proveedor de confianza del dispositivo del usuario, generalmente en la nube, en un servidor de creación de WebAPK. Google Chrome usa este método en los dispositivos que tienen instalados los Servicios de Google para dispositivos móviles (GMS) y en el navegador de Internet Samsung, pero solo en los dispositivos fabricados por Samsung, como un teléfono o una tablet Galaxy. En conjunto, esto representa a la mayoría de los usuarios de Android.

Cuando un usuario instala una AWP de Google Chrome y se usa un WebAPK, el servidor de creación "genera" (paquetes) y firma un APK para la AWP. Ese proceso lleva tiempo, pero cuando el APK está listo, el navegador instala esa app de manera silenciosa en el dispositivo del usuario. Como los proveedores de confianza (Play Services o Samsung) firmaron el APK, el teléfono lo instala sin inhabilitar la seguridad, como sucede con cualquier app de la tienda. No es necesario transferir la app.

AWP instaladas a través de WebAPK:

Combinaciones de teclas

Si bien los WebAPK proporcionan la mejor experiencia para los usuarios de Android, no siempre se pueden crear. Cuando no pueden hacerlo, los navegadores recurren a crear un acceso directo a sitios web. Como Firefox, Microsoft Edge, Opera, Brave y Samsung Internet (en dispositivos que no son Samsung) no tienen servidores de creación en los que confíen, crearán accesos directos. Google Chrome también lo hará si el servicio de creación no está disponible o si tu AWP no cumple con los requisitos de instalación.

AWPs instaladas con combinaciones de teclas:

  • Coloca un ícono con la insignia del navegador en la pantalla principal (consulta los siguientes ejemplos).
  • No tiene un ícono en el Selector ni en Configuración > Apps.
  • No puede usar ninguna función que requiera instalación.
  • No pueden actualizar los íconos ni los metadatos de la app.
  • Se pueden instalar muchas veces, incluso con el mismo navegador. Cuando esto suceda, todas apuntarán a la misma instancia y usarán el mismo almacenamiento.

Una AWP instalada con diferentes navegadores en el mismo dispositivo

QuickApps

Algunos fabricantes, como Huawei y ZTE, ofrecen una plataforma conocida como QuickApps para crear aplicaciones web livianas similares a las AWP, pero con un componente tecnológico diferente. Algunos navegadores en estos dispositivos, como Huawei, pueden instalar AWP que se empaquetan como QuickApp, incluso si no estás usando la pila QuickApp.

Cuando tu AWP se instala como una app rápida, los usuarios tendrán una experiencia similar a la que tendrían con los accesos directos, pero con un ícono con la insignia del ícono de QuickApps (una imagen relámpago). La app también estará disponible para iniciarse desde QuickApp Center.

QuickApps en una pantalla principal de Huawei o ZTE

Solicitar la instalación

En los navegadores basados en Chromium para computadoras de escritorio y dispositivos Android, es posible activar el diálogo de instalación del navegador desde tu AWP. En el capítulo Solicitud de instalación, se abordarán los patrones para hacerlo y la manera de implementarlos.

Tiendas y catálogos de aplicaciones

Tu AWP también puede aparecer en catálogos y tiendas de aplicaciones para aumentar su alcance y permitir que los usuarios la encuentren en el mismo lugar en el que encuentran otras aplicaciones. La mayoría de los catálogos y tiendas de aplicaciones admiten tecnologías que te permiten publicar un paquete que no incluye la aplicación web completa (como tus elementos HTML y recursos). Estas tecnologías te permiten crear solo un selector en un motor de renderización web independiente que cargará la app y permitirá que el service worker almacene en caché los elementos necesarios.

Los catálogos y tiendas de aplicaciones que admiten la publicación de una AWP son los siguientes:

Si quieres obtener más información para publicar una AWP en catálogos y tiendas de apps, consulta la CLI de BurbbleWrap y el Creador de AWP.

Recursos