Instala apps web con el nuevo elemento de instalación HTML

Patrick Brosset
Patrick Brosset
Página principal

Publicado el 12 de mayo de 2026

La instalación de apps web siempre requirió JavaScript. Cuando usas el evento beforeinstallprompt, el flujo de instalación reside por completo en la secuencia de comandos. El nuevo <install> elemento cambia eso: coloca un solo elemento HTML en tu página y el navegador renderiza un botón de instalación de confianza para ti, sin necesidad de JavaScript requerido.

imagen

El equipo de Microsoft Edge, en colaboración con el equipo de Chrome, implementó el <install> elemento en Chromium. Ahora está disponible para que lo pruebes detrás de una marca en Chrome o Edge desde la versión 148, y como una prueba de origen que puedes usar en ambos navegadores a partir de la versión 148 y hasta la 153.

Pruébalo y descubre cómo se compara con la API de Web Install imperativa (navigator.install()), que tiene su propia prueba de origen.

El problema

La instalación de apps web está fragmentada. Cada navegador tiene su propio conjunto de puntos de entrada, por ejemplo, íconos de la barra de direcciones, elementos de menú y mensajes. Los desarrolladores tienen un control limitado sobre cuándo y cómo se muestra el flujo de instalación.

Crear una experiencia similar a la de una tienda de aplicaciones que permita a los usuarios instalar otras apps desde tu sitio es más difícil, ya que la instalación se restringió históricamente a la página actual.

El elemento <install>

El navegador controla el contenido y la presentación del nuevo elemento HTML <install>. Al igual que otros elementos de permisos, como <geolocation>, el control del navegador sobre el texto de la etiqueta, el idioma y la apariencia del botón significa que puede confiar en el clic del usuario como un indicador genuino de intención.

Es poco probable que un usuario que haga clic en un botón con la etiqueta "Instalar aplicación maravillosa" se sorprenda cuando aparezca un mensaje de instalación.

Como el navegador renderiza el botón, obtienes una indicación visual de instalación de confianza con un código mínimo y sin necesidad de organizar la ceremonia beforeinstallprompt en JavaScript.

Instala la app actual

Si la página actual vincula a un manifiesto que tiene un id campo, solo necesitas un elemento:

<install></install>

El navegador renderiza el botón con texto e iconografía estandarizados y, cuando el usuario hace clic en él, se activa el flujo de instalación normal del navegador.

Instala una app diferente

Para instalar una app web que se encuentre en un origen diferente al de la página actual, usa el atributo installurl para dirigir a la otra app web:

<install installurl="https://awesome-app.com/"></install>

Si la página en https://awesome-app.com vincula a un manifiesto que define un campo id, eso es todo lo que debes hacer.

Si no existe un campo id, usa el atributo manifestid para proporcionar un manifiesto calculado id:

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

Para obtener el id de manifiesto calculado, haz lo siguiente:

  1. Abre las Herramientas para desarrolladores.
  2. Ve a la pestaña Application.
  3. En la sección Identity, copia el valor de Computed App ID.

El uso del botón <install> para instalar apps de otro origen significa que puedes crear una página de catálogo que permita a los usuarios instalar varias apps, cada una con su propio <install> botón.

Proporciona contenido de resguardo

Si el navegador no admite el elemento <install>, se muestra el HTML que coloques dentro del elemento:

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

Detecta la compatibilidad

Si el contenido de resguardo no es suficiente para tu caso de uso y prefieres implementar una experiencia del usuario diferente en navegadores que no admiten el <install> elemento, usa JavaScript para detectar la compatibilidad:

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

Cómo controlar eventos

El elemento <install> activa eventos que puedes escuchar para obtener errores de éxito, descarte, y validación:

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

Probar hoy mismo

Para probar el elemento <install> hoy, tienes dos opciones:

  • Prueba el elemento de forma local solo en tu dispositivo.
  • Prueba el elemento en condiciones reales, con tus usuarios, registrándote en la prueba de origen.

Realiza pruebas locales

Para probar el elemento en tu propio dispositivo hoy, haz lo siguiente:

  1. Usa Chrome o Edge versión 148 o posterior.
  2. Ve a about://flags/#web-app-install-element en una pestaña nueva.
  3. Configura Web App Install Element como Enabled.
  4. Reinicia el navegador.

Prueba en tu sitio publicado con la prueba de origen

La prueba de origen permite que los usuarios reales de tu sitio de producción usen la función sin tener que habilitar la marca primero.

  1. Abre la página de registro de la prueba de origen del elemento <install> origin trial registration page.
  2. Accede.
  3. Haz clic en Registrar.
  4. Ingresa el origen de tu sitio y completa el resto del formulario.
  5. Una vez que se envía el formulario, obtienes una cadena de token.
  6. Agrega el token a las páginas de tu sitio con una etiqueta <meta>:
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

Como alternativa, puedes enviar el token como un encabezado de respuesta HTTP:

Origin-Trial: YOUR_TOKEN_HERE

La prueba de origen está disponible para Chrome y Edge en las versiones 148 a 153, y el mismo token funcionará en ambos navegadores. Para obtener más información sobre las pruebas de origen, consulta lo siguiente:

Observa cómo funciona

Consulta la demostración de la tienda de elementos <install> Element Store demo, un catálogo de PWA que usa el elemento <install> para permitirte instalar varias apps de muestra.

Comparación con la API de Web Install

El elemento <install> no es la única forma en que experimentamos cómo mejorar las instalaciones de apps en la Web.

Anteriormente, experimentamos con la API de Web Install (navigator.install()), que es una API de JavaScript imperativa que también permite que tu sitio active la instalación de apps web del mismo origen o de distintos orígenes. Para obtener más información, consulta La API de Web Install está lista para probarse.

La API de Web Install también tiene su propia prueba de origen.

Esta es una comparación entre los dos enfoques:

elemento API de navigator.install()
Enfoque HTML declarativo JavaScript imperativo
Código requerido Un solo elemento HTML JavaScript para llamar a navigator.install() y controlar la promesa que se muestra
Confianza del navegador Alta: El navegador controla el contenido y la apariencia del botón, de forma similar a los elementos de permisos. Baja: Requiere una activación del usuario (clic o toque) como indicador de confianza.
Instalación de distintos orígenes Sí, con installurl Sí, pasando una URL a navigator.install()
Personalización Mínima: El navegador decide cómo se ve el botón. Completa: Diseñas tu propia IU y llamas a la API desde cualquier interacción.
Fallback Integrado: El contenido secundario se renderiza si el elemento no es compatible. Escribes tu propia detección de funciones y lógica de resguardo.
Ideal para Botones de instalación desplegables con código mínimo; situaciones en las que es deseable una IU de confianza del navegador Flujos de instalación personalizados, IUs de catálogo dinámicas, integración en interfaces existentes con mucho JavaScript

Envíanos tu opinión

Buscamos activamente comentarios sobre ambos enfoques. Según tus necesidades, podríamos agregar compatibilidad con el elemento <install>, la API de navigator.install() o ambos.

Para compartir comentarios sobre el elemento <install>, abre un problema en el repositorio de WICG dedicado a esta propuesta.

Para compartir comentarios sobre la API de navigator.install(), agrega un comentario al problema Developer Feedback: navigator.install versus <install> element.

Recursos