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 pouvoir identifier de façon unique la PWA. Mais jusqu'à récemment, les spécifications du fichier manifeste d'application Web n'étaient pas explicitement définissent un moyen d'identifier une PWA de façon unique, laissant les navigateurs décider et ce qui entraîne des implémentations différentes. Dans certains navigateurs, le start_url tandis que dans d'autres, le chemin d'accès au fichier manifeste est utilisé, ce qui impossible de mettre à jour l'un ou l'autre de ces champs.

Pour résoudre ce problème, une nouvelle propriété id facultative est disponible dans l'application Web. du fichier manifeste, qui 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 à le start_url ou l'emplacement du fichier manifeste, et permet à afin qu'ils soient mis à jour ultérieurement.

À quoi sert la propriété id ?

La propriété id représente l'identité de la PWA pour le navigateur. Quand ? le navigateur voit un fichier manifeste dont l'identité ne correspond pas à déjà installée, elle la traitera comme une nouvelle PWA, même si elle est diffusée à partir de la même URL qu'une autre PWA. Mais s'il voit un fichier manifeste avec une identité qui correspond à la PWA déjà installée, il la traitera comme la PWA installée.

Prise en charge des navigateurs

La propriété id est disponible depuis Chrome 96.

Que dois-je faire si l'une de mes applications n'a pas de id ?

Vous n'avez rien à faire, et rien ne fonctionnera si vous n'ajoutez pas de id au fichier manifeste de votre application Web (tant que les éléments start_url et le chemin d'accès au fichier manifeste reste le même). 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 mon id ?

La méthode la plus sûre et la plus précise pour déterminer l'id d'une PWA est de vérifier la valeur calculée par Chrome.

  1. Si vous utilisez Chrome 96 ou une version ultérieure, ouvrez le Volet Manifest (Fichier manifeste) du panneau Application dans les outils de développement
  2. Passez la souris sur l'icône (!) à côté de la propriété App Id (ID de l'application). La 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 l'identifiant .

{
  ...
  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 changera. À partir de Chrome 96, le navigateur génère une id s'il n'y en a pas dans le fichier manifeste. en fonction de start_url dans le fichier manifeste de l'application Web.

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

Comment puis-je vérifier ?

Pour tester le comportement, procédez comme suit : procédez comme suit:

  1. Installez la PWA.
  2. Ouvrez about://web-app-internals/, puis vérifiez les unhashed_app_id et start_url de la PWA installée.
  3. Ajoutez une propriété id au fichier manifeste de votre application Web en suivant les étapes décrites dans la section Comment déterminer et définir mon id ci-dessus.
  4. Redémarrez le navigateur avec chrome://restart, lancez la PWA depuis 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 pour 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 avec chrome://restart, lancez la PWA depuis 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 pour la PWA installée pour vérifier qu'elle a été mise à jour comme prévu.

Ressources supplémentaires