Identifier de manière unique les PWA avec la propriété d'ID du fichier manifeste d'application Web

Pete LePage

Lorsque l'utilisateur installe votre PWA, le navigateur doit l'identifier de manière unique. Mais jusqu'à récemment, la spécification du fichier manifeste d'application Web ne définissait pas explicitement un moyen d'identifier de manière unique une PWA, ce qui laissait les navigateurs décider et conduisait à différentes implémentations. Dans certains navigateurs, le start_url est utilisé, tandis que dans d'autres, le chemin d'accès au fichier manifeste est utilisé. Il est donc impossible de mettre à jour l'un ou l'autre de ces champs.

Pour résoudre ce problème, il existe une nouvelle propriété id facultative dans la spécification du fichier manifeste d'application Web. Elle vous permet de définir explicitement l'identifiant utilisé pour votre PWA. L'ajout de la propriété id au fichier manifeste supprime la dépendance à start_url ou à l'emplacement du fichier manifeste, et permet leur mise à jour ultérieure.

À quoi sert la propriété id ?

La propriété id représente l'identité de la PWA auprès du navigateur. Lorsque le navigateur voit un fichier manifeste dont l'identité ne correspond pas à une PWA déjà installée, il le traite comme une nouvelle PWA, même s'il est diffusé à partir de la même URL qu'une autre PWA. Toutefois, s'il voit un fichier manifeste avec une identité correspondant à la PWA déjà installée, il le considérera comme la PWA installée.

Prise en charge des navigateurs

Prise en charge de la propriété id dans Chrome 96.

Que dois-je faire si j'ai une application sans id ?

Vous n'avez rien à faire, et rien ne cessera de fonctionner si vous n'ajoutez pas de id au fichier manifeste de votre application Web (tant que start_url et le chemin d'accès au fichier manifeste restent identiques). Pour pérenniser votre PWA, vous pouvez ajouter une propriété id au fichier manifeste de votre application Web.

Comment déterminer et définir ma id ?

Le moyen le plus sûr et le plus précis de déterminer l'id d'une PWA consiste à vérifier la valeur calculée par Chrome.

  1. À l'aide de Chrome 96 ou d'une version ultérieure, ouvrez le volet Manifest (Manifeste) du panneau Application (Application) dans les outils de développement.
  2. Pointez sur l'icône (!) à côté de la propriété App Id (ID de l'application). L'icône d'info-bulle (!) ne s'affiche que si id n'est pas spécifié dans le fichier manifeste de l'application Web.
  3. Notez la valeur id indiquée dans l'info-bulle (voir la capture d'écran ci-dessous).
  4. Ajoutez une propriété id au fichier manifeste de l'application Web à l'aide de la valeur id indiquée dans l'info-bulle.

Info-bulle affichant la valeur "id".

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

Que se passe-t-il si je ne définis pas de id ?

Ne vous inquiétez pas, rien ne va se casser. À partir de Chrome 96, le navigateur générera une id s'il n'y en a pas dans le fichier manifeste en fonction de l'start_url dans le fichier manifeste de l'application Web.

L'ajout d'un id au fichier manifeste de l'application Web permet de modifier le start_url et le chemin du fichier manifeste (si et seulement si leur origine particulière reste la même), car le navigateur identifiera la PWA en fonction de l'id spécifié, plutôt que du start_url ou du chemin du fichier manifeste.

Comment tester cela ?

Pour tester le comportement, procédez comme suit:

  1. Installez la PWA.
  2. Ouvrez about://web-app-internals/, puis vérifiez les propriétés unhashed_app_id et start_url pour la PWA installée.
  3. Ajoutez une propriété id au fichier manifeste de votre application Web en suivant les étapes de la section Comment déterminer et définir mon id ci-dessus.
  4. Redémarrez le navigateur à l'aide de chrome://restart, lancez la PWA à partir de about://apps, puis fermez la PWA pour forcer l'actualisation du fichier manifeste.
  5. Ouvrez about://web-app-internals/ et vérifiez la propriété manifest_id de la PWA installée pour vérifier qu'elle n'a pas changé.
  6. Modifiez start_url dans le fichier manifeste de l'application Web.
  7. Redémarrez le navigateur à l'aide de chrome://restart, lancez la PWA à partir de about://apps, puis fermez la PWA pour forcer l'actualisation du fichier manifeste.
  8. Ouvrez about://web-app-internals/ et vérifiez la propriété start_url de la PWA installée pour vous assurer qu'elle a été mise à jour comme prévu.

Ressources supplémentaires