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

Cuando el usuario instala tu AWP, el navegador necesita una forma de identificarse de manera única la AWP. Pero, hasta hace poco, la especificación del manifiesto de la aplicación web no definen una manera de identificar de manera inequívoca a una AWP y dejar que los navegadores decidan lo que genera diferentes implementaciones. En algunos navegadores, start_url mientras que, en otros, se usa la ruta de acceso al archivo de manifiesto, es imposible actualizar cualquiera de esos campos.

Para resolver este problema, hay una nueva propiedad opcional id en la app web. del manifiesto de la aplicación, que permite definir explícitamente el identificador utilizado para tu AWP. Si agregas la propiedad id al manifiesto, se quitará la dependencia de el start_url o la ubicación del manifiesto, y hace posible que para actualizarlas en el futuro.

¿Qué hace la propiedad id?

La propiedad id representa la identidad de la AWP con el navegador. Cuándo el navegador ve un manifiesto que no tiene una identidad que coincida con un AWP ya instalada, la tratará como una AWP nueva, incluso si se entrega desde la misma URL que otra AWP. Pero si ve un manifiesto con una identidad coincide con la AWP ya instalada, la tratará como la AWP instalada.

Navegadores compatibles

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

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

No hay nada que hacer y nada se romperá si No agregues un id al manifiesto de tu app web (siempre y cuando start_url y la ruta de acceso del manifiesto sigue siendo la misma). Para preparar tu AWP para el futuro, puedes agregar Una propiedad id en el manifiesto de tu app web

¿Cómo determino y configuro mi id?

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

  1. En Chrome 96 o versiones posteriores, abre la Panel Manifest del panel Application en Herramientas para desarrolladores.
  2. Coloca el cursor sobre el ícono (!) junto a la propiedad App Id. El El ícono de información sobre la (!) solo aparecerá cuando la id no se especifique en el archivo de manifiesto de la aplicación web.
  3. Ten en cuenta el valor de id que se muestra en la sugerencia de herramientas (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 cuadro de información.

Información sobre el atributo 'id' [id] valor.

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

¿Qué sucede si no configuro un id?

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

Si agregas un id al manifiesto de la app web, podrás hacer lo siguiente: para cambiar el objeto start_url y la ruta del manifiesto (siempre y cuando origin sigue siendo el mismo). porque el navegador identificar la AWP en función del id especificado, en lugar del start_url o ruta de acceso del manifiesto.

¿Cómo puedo probarlo?

Para probar el comportamiento, sigue estos pasos:

  1. Instala la AWP.
  2. Abre about://web-app-internals/ y revisa unhashed_app_id y start_url para la AWP instalada.
  3. Agrega una propiedad id al manifiesto de tu app web siguiendo los pasos que se indican en ¿Cómo determino y configuro 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 para la AWP instalada para verificar que no haya cambiado.
  6. Cambia el 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 revisa la propiedad start_url para la AWP instalada para verificar que se haya actualizado según lo esperado.

Recursos adicionales