Eindeutige Identifikation von PWAs mit der Manifest-ID-Eigenschaft der Web-App

Pete LePage

Wenn der Nutzer Ihre PWA installiert, muss der Browser die PWA eindeutig identifizieren können. Bis vor Kurzem wurde in der Manifestspezifikation für Web-Apps jedoch nicht explizit definiert, wie eine PWA eindeutig identifiziert werden kann. Die Entscheidung wurde den Browsern überlassen, was zu unterschiedlichen Implementierungen führte. In einigen Browsern wird start_url verwendet, in anderen der Pfad zur Manifestdatei. Dadurch ist es nicht möglich, eines dieser Felder zu aktualisieren.

Um dieses Problem zu beheben, gibt es in der Manifestspezifikation der Web-App eine neue optionale id-Eigenschaft, mit der Sie die für Ihre PWA verwendete Kennung explizit definieren können. Wenn Sie dem Manifest das Attribut id hinzufügen, wird die Abhängigkeit von start_url oder dem Speicherort des Manifests aufgehoben und es kann in Zukunft aktualisiert werden.

Wozu dient das Attribut id?

Die Property id stellt die Identität der PWA für den Browser dar. Wenn der Browser ein Manifest erkennt, das keine Identität hat, die mit einer bereits installierten PWA übereinstimmt, behandelt er es als neue PWA, auch wenn es über dieselbe URL wie eine andere PWA bereitgestellt wird. Wenn jedoch ein Manifest mit einer Identität gefunden wird, die mit der bereits installierten PWA übereinstimmt, wird diese als installierte PWA behandelt.

Unterstützte Browser

Die Unterstützung der Property id wurde in Chrome 96 eingeführt.

Was soll ich tun, wenn ich eine App ohne id habe?

Sie müssen nichts tun. Wenn Sie Ihrem Webanwendungs-Manifest kein id hinzufügen, funktioniert nichts. Solange start_url und der Manifestpfad unverändert bleiben. Damit Ihre PWA zukunftsfähig ist, können Sie Ihrem Web-App-Manifest eine id-Property hinzufügen.

Wie ermittele und lege ich meine id fest?

Die sicherste und genaueste Methode, um den id für eine PWA zu ermitteln, ist die Überprüfung des von Chrome berechneten Werts.

  1. Wenn du Chrome 96 oder höher verwendest, öffne in den Entwicklertools im Bereich Anwendung den Bereich Manifest.
  2. Unter dem Attribut Computed App Id wird ein Hinweis angezeigt, wenn id nicht in der Manifestdatei der Web-App angegeben ist.
  3. Kopieren Sie den Wert für id aus der Notiz (siehe Screenshot unten).
  4. Fügen Sie dem Web-App-Manifest die id-Eigenschaft mit dem in der Anmerkung angegebenen id-Wert hinzu.

„Berechnete App-ID“ im Bereich „Anwendung“ der Entwicklertools

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

Was ist, wenn ich keinen id festlege?

Keine Sorge, Sie können nichts kaputt machen. Ab Chrome 96 generiert der Browser eine id, wenn im Manifest keine vorhanden ist, basierend auf der start_url im Manifest der Webanwendung.

Wenn Sie dem Web-App-Manifest eine id hinzufügen, können Sie die start_url und den Manifestpfad ändern, aber nur, wenn der Ursprung gleich bleibt. Der Browser identifiziert die PWA nämlich anhand der angegebenen id, nicht anhand der start_url oder des Manifestpfads.

Wie kann ich das testen?

So testen Sie das Verhalten:

  1. Installieren Sie die PWA.
  2. Öffnen Sie about://web-app-internals/ und prüfen Sie die Properties manifest_id und start_url auf die installierte PWA.
  3. Fügen Sie Ihrem Web-App-Manifest eine id-Property hinzu. Folgen Sie dazu der Anleitung oben unter Wie ermittele und lege ich meine id fest?.
  4. Starten Sie den Browser mit chrome://restart neu, starten Sie die PWA über about://apps und schließen Sie dann die PWA, um die Aktualisierung der Manifestdatei zu erzwingen.
  5. Öffnen Sie about://web-app-internals/ und prüfen Sie in der Property manifest_id, ob sich die installierte PWA nicht geändert hat.
  6. Ändern Sie das start_url im Manifest der Webanwendung.
  7. Starten Sie den Browser mit chrome://restart neu, starten Sie die PWA über about://apps und schließen Sie dann die PWA, um die Aktualisierung der Manifestdatei zu erzwingen.
  8. Öffnen Sie about://web-app-internals/ und prüfen Sie in der Property start_url, ob die installierte PWA wie erwartet aktualisiert wurde.

Zusätzliche Ressourcen