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 resultado cuando un usuario busca la app en su dispositivo.
• Tener una ventana independiente dentro del sistema operativo
• Admite funciones específicas.

Nota: Si bien la instalación varía según el navegador y el sistema operativo, no necesitas crear ningún tipo de paquete o ejecutable para que la AWP se instale desde un navegador.

Criterios de instalación

Todos los navegadores tienen un criterio que marca cuándo un sitio web o una aplicación web es una aplicación web progresiva y se puede instalar para una experiencia independiente. Los metadatos de tu AWP se establecen mediante un archivo basado en JSON conocido como el manifiesto de apps web, que analizaremos en detalle en el siguiente módulo.

Como requisito mínimo para la instalación, la mayoría de los navegadores que lo admiten usan el archivo de manifiesto de la app 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 diferentes navegadores. En este artículo, se detallan los criterios para Google Chrome y se incluyen vínculos a los requisitos para otros navegadores.

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

Nota: El proceso para desinstalar una AWP es diferente en cada combinación de sistema operativo y navegador. En la mayoría de las situaciones, la app se puede desinstalar de la misma manera que cualquier otra app específica de la plataforma. En otras situaciones, la ventana de la AWP ofrece un menú con una opción de desinstalación. Si borras el ícono, es posible que no se borre el almacenamiento que usa la AWP.

Instalación de escritorio

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

Cuando un usuario interactúa con un sitio, puede ver una ventana emergente como la siguiente que invita a los usuarios a instalarlo como una aplicación.

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

Nota: Los navegadores basados en Chromium en computadoras de escritorio te permiten ver todas las AWP instaladas en ese navegador mediante about:apps.

Solo los modos de visualización independientes y con IU mínima son compatibles con los sistemas operativos de escritorio.

AWP instaladas en computadoras de escritorio:

• Tener un ícono en el menú Inicio o la pantalla de inicio en PCs con Windows, en el Dock o en el 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 conmutadores de apps y en las estaciones de carga cuando la app esté activa, se haya usado recientemente o se abra en segundo plano
• Aparece en la búsqueda de apps, por ejemplo, busca en Windows o Spotlight en macOS.
• Puedes establecer un número de insignia en sus íconos para indicar notificaciones nuevas. Esto se hace con la API de insignias.
• Puede establecer un menú contextual para el ícono con Accesos directos a aplicaciones.
• No se puede instalar dos veces con el mismo navegador.

Nota: La instalación puede desbloquear otras funciones que no están disponibles para las AWP que se ejecutan en la pestaña del navegador. Obtén más información sobre esto en el capítulo Funciones.

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 "Iniciar app al acceder" si quieren que tu app se abra automáticamente al inicio.

Instalación de iOS y iPadOS

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

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

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

Es importante comprender que la instalación de AWP solo está disponible si el usuario navega por 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.

Los pasos para agregar apps a la pantalla principal son los siguientes:

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 nombre puede editar el usuario.
4. Haz clic en Agregar. En iOS y iPadOS, los favoritos de los sitios web y las AWP tienen el mismo aspecto en la pantalla principal.

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

Precaución: En los dispositivos Apple, puedes instalar la misma AWP varias veces. Cada instalación tendrá su propio almacenamiento aislado y se tratará como una app diferente.

.

AWP instaladas en iOS y iPadOS:

• Aparece en la pantalla principal, en la búsqueda de Spotlight, en las 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 capacidades como insignias y accesos directos a aplicaciones.

Por cierto, Safari usa una tecnología nativa conocida como Clips web para crear los íconos de la AWP en el sistema operativo. Son solo archivos en formato XML con el formato de Lista de propiedades de Apple almacenados en el sistema de archivos.

Cuando los usuarios usan la AWP, no utilizan una instancia de la app de Safari (es decir, utilizan una instancia de Chrome al hacerlo), utilizan algo conocido como Web.app, por lo que es probable que haya pequeñas diferencias entre la AWP renderizada en Safari y una ventana de AWP. Tanto Safari como Web.app usan el mismo núcleo de WebKit y el mismo tiempo de ejecución de JavaScript, pero se ejecutan en procesos diferentes y pueden tener distintas implementaciones, como almacenamiento aislado.

Instalación de Android

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

• 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).

Según el dispositivo y el navegador, tu AWP se instalará como un WebAPK, un acceso directo o una 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 de Samsung, pero solo en 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 "mentas" (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 (de Servicios de Play o Samsung) firmaron el APK, el teléfono lo instala sin inhabilitar la seguridad, al igual que cualquier app que proviene de la tienda. No es necesario transferir la app.

AWP instaladas mediante WebAPK:

• Tener un ícono en el selector de aplicaciones y en la pantalla principal
• Aparece en Configuración > Apps.
• Puede tener varias funciones, como insignias, accesos directos a aplicaciones y vínculos para capturar dentro del SO.
• Puedes actualizar el ícono y los metadatos de la app.
• No se puede instalar dos veces.

Como desarrollador de AWP, no necesitas compilar ni firmar ningún paquete cuando se usa un WebAPK. Todo se controla de manera transparente entre el navegador, el dispositivo y el servidor de creación.

Accesos directos

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

AWP instaladas con accesos directos:

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

QuickApps

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

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

Solicita la instalación

En los navegadores basados en Chromium en 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 abordan los patrones para hacerlo y cómo implementarlos.

Advertencia: Si proporcionas instrucciones al usuario, recuerda que los elementos del menú los nombres varían según el idioma.

Catálogos y tiendas 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 que encuentran otras apps. La mayoría de las tiendas y catálogos de aplicaciones admiten tecnologías que te permiten publicar un paquete que no incluye toda la aplicación web (como tu código HTML y tus recursos). Estas tecnologías te permiten crear un selector para un motor de renderización web independiente que cargará la app y permitirá que el service worker almacene en caché los recursos necesarios.

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

• Google Play Store para Android y ChromeOS, con una Actividad web de confianza.
• App Store de Apple para iOS, macOS y iPadOS, con WKWebView y dominios vinculados a la app
• Microsoft Store para Windows 10 y 11 con paquetes APPX.
• Samsung Galaxy Store, con el servidor de creación de Samsung WebAPK.
• Huawei AppGallery, con un contenedor de QuickApp para tu aplicación HTML

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

Advertencia: Algunas tiendas y catálogos de apps tienen requisitos técnicos o comerciales que se deben aceptar antes de que se acepte tu AWP para su publicación. Consulta los requisitos de cada tienda antes de comenzar.

Recursos

• Qué se necesita para que un sistema sea instalable
• WebAPK en Android
• Patrones para promover la instalación de AWP
• Cómo usar una AWP en tu app para Android
• Muestra tu app web progresiva en Google Play
• Envía tu AWP a Microsoft Store
• Cómo publicar una AWP en la App Store
• WebKit: Dominios vinculados a la aplicación