Unieke identificatie van PWA's met de manifest-id-eigenschap van de web-app

Piet LePage

Wanneer de gebruiker uw PWA installeert, heeft de browser een manier nodig om de PWA op unieke wijze te identificeren. Maar tot voor kort definieerde de manifestspecificatie van de webapp niet expliciet een manier om een ​​PWA uniek te identificeren, waardoor browsers de beslissing namen en tot verschillende implementaties leidden. In sommige browsers wordt de start_url gebruikt, terwijl in andere het pad naar het manifestbestand wordt gebruikt, waardoor het onmogelijk wordt om een ​​van deze velden bij te werken.

Om dit probleem op te lossen, is er een nieuwe optionele id eigenschap in de manifestspecificatie van de web-app, waarmee u expliciet de ID kunt definiëren die voor uw PWA wordt gebruikt. Door de eigenschap id aan het manifest toe te voegen, wordt de afhankelijkheid van de start_url of de locatie van het manifest opgeheven, en wordt het mogelijk dat deze in de toekomst worden bijgewerkt.

Wat doet de eigenschap id ?

De id eigenschap vertegenwoordigt de identiteit van de PWA voor de browser. Wanneer de browser een manifest ziet dat geen identiteit heeft die overeenkomt met een reeds geïnstalleerde PWA, zal hij dit behandelen als een nieuwe PWA, zelfs als het wordt aangeboden vanaf dezelfde URL als een andere PWA. Maar als het een manifest ziet met een identiteit die overeenkomt met de reeds geïnstalleerde PWA, zal het dat behandelen als de geïnstalleerde PWA.

Browser-ondersteuning

Ondersteuning voor de id eigenschap is in Chrome 96 terechtgekomen.

Wat moet ik doen als ik een app zonder id heb?

U hoeft niets te doen en er gaat niets kapot als u geen id toevoegt aan uw webapp-manifest (zolang de start_url en het manifestpad hetzelfde blijven). Om uw PWA toekomstbestendig te maken, kunt u een id eigenschap toevoegen aan uw web-app-manifest.

Hoe bepaal en stel ik mijn id in?

De veiligste en meest nauwkeurige manier om de id voor een PWA te bepalen, is door de door Chrome berekende waarde te controleren.

  1. Als u Chrome 96 of hoger gebruikt, opent u het paneel Manifest van het paneel Applicaties in DevTools.
  2. Beweeg uw muis over het (!) pictogram naast de eigenschap App-ID . Het (!) tooltippictogram verschijnt alleen als de id niet is opgegeven in het manifestbestand van de webapp.
  3. Let op de id waarde die wordt weergegeven in de tooltip (zie onderstaande schermafbeelding).
  4. Voeg een id eigenschap toe aan het web-app-manifest met behulp van de id waarde die wordt weergegeven in de tooltip.

Tooltip met de 'id'-waarde.

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

Wat moet ik doen als ik geen id instel?

Maak je geen zorgen, er zal niets kapot gaan . Vanaf Chrome 96 genereert de browser een id als er geen in het manifest staat, op basis van de start_url in het manifest van de webapp.

Het toevoegen van een id aan het manifest van de webapp maakt het mogelijk om de start_url en het manifestpad te wijzigen (als en alleen als hun specifieke oorsprong hetzelfde blijft!), omdat de browser de PWA zal identificeren op basis van de opgegeven id , in plaats van de start_url of manifest pad.

Hoe test ik dit?

Volg deze stappen om het gedrag te testen:

  1. Installeer de PWA.
  2. Open about://web-app-internals/ en controleer de eigenschap unhashed_app_id en start_url voor de geïnstalleerde PWA.
  3. Voeg een id eigenschap toe aan uw web-app-manifest door de stappen te volgen in Hoe bepaal ik mijn id hierboven en stel deze in .
  4. Start de browser opnieuw met chrome://restart , start de PWA vanaf about://apps en sluit vervolgens de PWA om het manifestbestand te dwingen te vernieuwen.
  5. Open about://web-app-internals/ en controleer de eigenschap manifest_id voor de geïnstalleerde PWA om te controleren of deze niet is gewijzigd.
  6. Wijzig de start_url in het web-app-manifest.
  7. Start de browser opnieuw met chrome://restart , start de PWA vanaf about://apps en sluit vervolgens de PWA om te forceren dat het manifestbestand wordt vernieuwd.
  8. Open about://web-app-internals/ en controleer de eigenschap start_url voor de geïnstalleerde PWA om te controleren of deze zoals verwacht is bijgewerkt.

Aanvullende bronnen