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

Pete LePage

Wanneer de gebruiker je PWA installeert, moet de browser de PWA op een unieke manier kunnen identificeren. Maar tot voor kort definieerde de manifestspecificatie voor webapps geen expliciete manier om een ​​PWA op unieke wijze te identificeren. Dit liet browsers zelf beslissen, wat leidde tot verschillende implementaties. In sommige browsers wordt de start_url gebruikt, terwijl in andere het pad naar het manifestbestand wordt gebruikt, waardoor het onmogelijk is om een ​​van deze velden bij te werken.

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

Wat doet de id eigenschap?

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, behandelt deze dit als een nieuwe PWA, zelfs als deze wordt aangeboden vanaf dezelfde URL als een andere PWA. Als de browser echter een manifest ziet met een identiteit die overeenkomt met de reeds geïnstalleerde PWA, behandelt deze dat als de geïnstalleerde PWA.

Browserondersteuning

Ondersteuning voor de id eigenschap is beschikbaar in Chrome 96.

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

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

Hoe bepaal en stel ik mijn id in?

De veiligste en nauwkeurigste manier om de id van een PWA te bepalen, is door de waarde te controleren die Chrome heeft berekend.

  1. Open in Chrome 96 of hoger het Manifest- paneel van het Application- paneel in DevTools.
  2. Wanneer de id niet is opgegeven in het manifestbestand van de web-app, wordt er een opmerking onder de eigenschap Berekende app-id weergegeven.
  3. Kopieer de id waarde die in de notitie wordt weergegeven (zie onderstaande schermafbeelding).
  4. Voeg een id eigenschap toe aan het web-appmanifest met behulp van de id waarde die in de notitie wordt weergegeven.

Berekende app-ID in het DevTools-toepassingspaneel.

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

Wat als ik geen id instel?

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

Door een id toe te voegen aan het manifest van de web-app, is het mogelijk om de start_url en het manifestpad te wijzigen (als en alleen als hun specifieke oorsprong hetzelfde blijft!). De browser identificeert de PWA dan op basis van de opgegeven id , in plaats van de start_url of het manifestpad.

Hoe test ik dit?

Om het gedrag te testen, volgt u deze stappen:

  1. Installeer de PWA.
  2. Open about://web-app-internals/ en controleer de eigenschappen manifest_id en start_url voor de geïnstalleerde PWA.
  3. Voeg een id eigenschap toe aan uw web-appmanifest door de stappen in Hoe bepaal en stel ik mijn id in hierboven te volgen.
  4. Start de browser opnieuw op via chrome://restart , start de PWA via about://apps en sluit vervolgens de PWA om het manifestbestand te vernieuwen.
  5. Open about://web-app-internals/ en controleer de eigenschap manifest_id voor de geïnstalleerde PWA om te verifiëren of deze niet is gewijzigd.
  6. Wijzig de start_url in het webappmanifest.
  7. Start de browser opnieuw op via chrome://restart , start de PWA via about://apps en sluit vervolgens de PWA om het manifestbestand te vernieuwen.
  8. Open about://web-app-internals/ en controleer de eigenschap start_url voor de geïnstalleerde PWA om te verifiëren of deze zoals verwacht is bijgewerkt.

Aanvullende bronnen