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.
- À 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.
- 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 siid
n'est pas spécifié dans le fichier manifeste de l'application Web. - Notez la valeur
id
indiquée dans l'info-bulle (voir la capture d'écran ci-dessous). - Ajoutez une propriété
id
au fichier manifeste de l'application Web à l'aide de la valeurid
indiquée dans l'info-bulle.
{
...
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:
- Installez la PWA.
- Ouvrez
about://web-app-internals/
, puis vérifiez les propriétésunhashed_app_id
etstart_url
pour la PWA installée. - 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 monid
ci-dessus. - Redémarrez le navigateur à l'aide de
chrome://restart
, lancez la PWA à partir deabout://apps
, puis fermez la PWA pour forcer l'actualisation du fichier manifeste. - 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é. - Modifiez
start_url
dans le fichier manifeste de l'application Web. - Redémarrez le navigateur à l'aide de
chrome://restart
, lancez la PWA à partir deabout://apps
, puis fermez la PWA pour forcer l'actualisation du fichier manifeste. - 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.