Cómo identificar de forma única las AWP con la propiedad de ID del manifiesto de la aplicación web

Pete LePage

Cuando el usuario instala tu AWP, el navegador necesita una forma de identificarla de manera única. Sin embargo, hasta hace poco, la especificación del manifiesto de la aplicación web no definía de forma explícita una forma de identificar de forma única una AWP, lo que dejaba que los navegadores decidan y, lo que generaría diferentes implementaciones. En algunos navegadores, se usa start_url, mientras que en otros, se usa la ruta de acceso al archivo de manifiesto, lo que hace que sea imposible actualizar cualquiera de esos campos.

Para resolver este problema, hay una nueva propiedad id opcional en la especificación del manifiesto de la app web que te permite definir de forma explícita el identificador que se usa para tu AWP. Si agregas la propiedad id al manifiesto, se quitará la dependencia de start_url o de la ubicación del manifiesto, y podrás actualizarlas en el futuro.

¿Para qué sirve la propiedad id?

La propiedad id representa la identidad de la AWP para el navegador. Cuando el navegador detecte un manifiesto que no tiene una identidad que coincida con una AWP ya instalada, lo tratará como una AWP nueva, incluso si se entrega desde la misma URL que otra AWP. Sin embargo, si ve un manifiesto con una identidad que coincide con la AWP ya instalada, lo considerará como la AWP instalada.

Navegadores compatibles

La compatibilidad con la propiedad id llegó en Chrome 96.

¿Qué debo hacer si tengo una app sin id?

No debes realizar ninguna acción y no se producirá ningún error si no agregas un id al manifiesto de tu app web (siempre y cuando la start_url y la ruta del manifiesto sigan siendo las mismas). Para preparar tu AWP para el futuro, puedes agregar una propiedad id al manifiesto de la app web.

¿Cómo puedo determinar y configurar mi id?

La forma más segura y precisa de determinar el id de una AWP es comprobar el valor que calculó Chrome.

  1. En Chrome 96 o versiones posteriores, abre el panel Manifiesto del panel Aplicación en Herramientas para desarrolladores.
  2. Coloca el cursor sobre el ícono (!) junto a la propiedad ID de la app. El ícono de información sobre (!) solo aparecerá cuando no se especifique el id en el archivo de manifiesto de la app web.
  3. Observa el valor de id que se muestra en la sugerencia de la herramienta (consulta la captura de pantalla a continuación).
  4. Agrega una propiedad id al manifiesto de la app web con el valor id que se muestra en la información sobre la herramienta.

Cuadro de información en el que se muestra el valor "id".

{
  ...
  id: "/?homescreen=1",
  start_url: "/?homescreen=1",
  ...
}

¿Qué sucede si no configuro un id?

No te preocupes, nada se dañará. A partir de Chrome 96, el navegador generará un id si no hay uno en el manifiesto basado en start_url en el manifiesto de la app web.

Agregar una id al manifiesto de la aplicación web permite cambiar el start_url y la ruta de acceso al manifiesto (solo si su origen particular sigue siendo el mismo), ya que el navegador identificará la AWP en función del id especificado, en lugar de start_url o la ruta del manifiesto.

¿Cómo lo pruebo?

Para probar el comportamiento, sigue estos pasos:

  1. Instala la AWP.
  2. Abre about://web-app-internals/ y revisa las propiedades unhashed_app_id y start_url de la AWP instalada.
  3. Para agregar una propiedad id al manifiesto de tu aplicación web, sigue los pasos detallados en la sección ¿Cómo puedo determinar y configurar mi id más arriba?
  4. Reinicia el navegador con chrome://restart, inicia la AWP desde about://apps y, luego, cierra la AWP para forzar la actualización del archivo de manifiesto.
  5. Abre about://web-app-internals/ y revisa la propiedad manifest_id de la AWP instalada para verificar que no haya cambiado.
  6. Cambia el elemento start_url en el manifiesto de la app web.
  7. Reinicia el navegador con chrome://restart, inicia la AWP desde about://apps y, luego, cierra la AWP para forzar la actualización del archivo de manifiesto.
  8. Abre about://web-app-internals/ y verifica la propiedad start_url de la AWP instalada para verificar que se haya actualizado como se espera.

Recursos adicionales