Cómo maneja Chrome las actualizaciones del manifiesto de la app web

Qué se necesita para cambiar los íconos, los accesos directos, los colores y otros metadatos de tu APW

Adriana Jara
François Beaufort
François Beaufort
GitHub
Pete LePage

Cuando se instala una AWP, el navegador usa la información del manifiesto de la app web para el nombre de la app, los íconos que debe usar la app y la URL que se debe abrir cuando se inicia la app. Pero ¿qué sucede si necesitas actualizar los accesos directos de la app o probar un nuevo color de tema? ¿Cuándo y cómo se reflejan esos cambios en el navegador?

En la mayoría de los casos, los cambios deberían reflejarse en uno o dos días después del lanzamiento de la PWA, una vez que se haya actualizado el manifiesto.

Actualizaciones en Chrome para computadoras

Cuando se inicia la PWA o se abre en una pestaña del navegador, Chrome determina la última vez que se verificaron cambios en el manifiesto local. Si no se verificó el manifiesto desde el último inicio del navegador o en las últimas 24 horas, Chrome realizará una solicitud de red para obtener el manifiesto y, luego, lo comparará con la copia local.

Si cambiaron las propiedades seleccionadas en el manifiesto (consulta la lista a continuación), Chrome pone en cola el manifiesto nuevo y, después de que se cierran todas las ventanas, lo instala. Una vez instalado, se actualizarán todos los campos del manifiesto nuevo, excepto icons.

¿Qué propiedades activarán una actualización?

  • name
  • short_name
  • display (consulta a continuación)
  • scope
  • shortcuts
  • start_url Precaución: Los cambios en start_url requieren que se establezca el manifiesto id. Obtén más información.
  • theme_color
  • file_handlers

¿Qué sucede cuando se actualiza el campo display?

Si actualizas el modo de visualización de tu app de browser a standalone, las apps de tus usuarios existentes no se abrirán en una ventana después de la actualización. Hay dos parámetros de configuración de pantalla para una app web: el del manifiesto (que controlas) y el de la ventana y la pestaña del navegador, que controla el usuario. Siempre se respeta la preferencia del usuario.

Cómo probar las actualizaciones del manifiesto

La página chrome://web-app-internals (disponible en Chrome 85 o versiones posteriores) incluye información detallada sobre todas las PWA instaladas en el dispositivo y puede ayudarte a comprender cuándo se actualizó el manifiesto por última vez, con qué frecuencia se actualiza y mucho más.

Para forzar manualmente a Chrome a buscar un manifiesto actualizado, puedes iniciar Chrome con la marca de línea de comandos --disable-manifest-update-throttle o reiniciar Chrome (usa about://restart). Esto restablece el temporizador para que Chrome busque un manifiesto actualizado la próxima vez que se inicie la AWP. Luego, inicia la PWA. Después de cerrar la AWP, esta debería actualizarse con las nuevas propiedades del manifiesto.

Referencias

Actualizaciones en Chrome para Android

Cuando se inicia la PWA, Chrome determina la última vez que se verificaron cambios en el manifiesto local. Si el manifiesto no se verificó en las últimas 24 horas, Chrome programará una solicitud de red para el manifiesto y, luego, lo comparará con la copia local.

Si cambiaron algunas propiedades del manifiesto (consulta la lista a continuación), Chrome pone en cola el manifiesto nuevo y, después de que se cierran todas las ventanas de la PWA, el dispositivo se conecta a Wi-Fi y se enchufa, Chrome solicita un WebAPK actualizado del servidor. Una vez que se actualiza, se usan todos los campos del manifiesto nuevo.

¿Qué propiedades activan una actualización?

  • name
  • short_name
  • icons
  • background_color
  • display
  • orientation
  • scope
  • shortcuts
  • start_url
  • theme_color
  • web_share_target

Si Chrome no puede obtener un manifiesto actualizado del servidor, es posible que aumente el tiempo entre las verificaciones a 30 días.

Cómo probar las actualizaciones del manifiesto

La página about://webapks incluye información detallada sobre todas las APW instaladas en el dispositivo y puede indicarte cuándo se actualizó el manifiesto por última vez, con qué frecuencia se actualiza y mucho más.

Para programar manualmente una actualización del manifiesto y anular el temporizador y el manifiesto local, haz lo siguiente:

  1. Enchufa el dispositivo y asegúrate de que esté conectado a una red Wi-Fi.
  2. Usa el administrador de tareas de Android para cerrar la AWP y, luego, usa el panel de apps en la configuración de Android para forzar la detención de la AWP.
  3. En Chrome, abre about://webapks y haz clic en el botón "Actualizar" de la PWA. El estado de actualización debería cambiar a "Pendiente".
  4. Inicia la PWA y verifica que se cargue correctamente.
  5. Usa el administrador de tareas de Android para cerrar la AWP y, luego, usa el panel de apps en la configuración de Android para forzar la detención de la AWP.

Por lo general, la PWA se actualiza en unos minutos. Una vez que se complete la actualización, el "Estado de actualización" debería cambiar a "Correcto".

Referencias