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. Allerdings wurde in der Manifestspezifikation für die Web-App bis vor Kurzem nicht explizit eine Möglichkeit zur eindeutigen Identifizierung einer PWA definiert, sodass die Browser entscheiden mussten, was zu unterschiedlichen Implementierungen führte. In einigen Browsern wird der start_url verwendet, während in anderen der Pfad zur Manifestdatei verwendet wird. Dadurch ist es nicht möglich, eines dieser Felder zu aktualisieren.

Um dieses Problem zu lösen, gibt es in der Spezifikation des Web-App-Manifests eine neue optionale id-Eigenschaft, mit der Sie die für Ihre PWA verwendete ID explizit definieren können. Wenn Sie dem Manifest das Attribut id hinzufügen, ist die Abhängigkeit von start_url oder dem Speicherort des Manifests entfernt, sodass es später aktualisiert werden kann.

Welche Aufgabe hat die Property id?

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

Unterstützte Browser

Unterstützung für die Property id ist jetzt in Chrome 96 verfügbar.

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

Sie müssen nichts tun und nichts funktioniert, wenn Sie Ihrem Web-App-Manifest kein id hinzufügen (sofern start_url und der Manifestpfad gleich bleiben). Wenn Sie Ihre PWA zukunftssicher machen möchten, können Sie dem Manifest Ihrer Web-App ein id-Attribut hinzufügen.

Wie ermittle ich meine id und lege sie fest?

Die sicherste und genaueste Methode zum Ermitteln des id für eine PWA besteht darin, den von Chrome berechneten Wert zu prüfen.

  1. Öffnen Sie in Chrome 96 oder höher in den Entwicklertools den Bereich Manifest des Bereichs Anwendung.
  2. Bewegen Sie den Mauszeiger auf das Symbol (!) neben der Property App-ID. Das Kurzinfosymbol (!) wird nur angezeigt, wenn id in der Manifestdatei der Web-App nicht angegeben ist.
  3. Notieren Sie sich den in der Kurzinfo angezeigten Wert id (siehe Screenshot unten).
  4. Fügen Sie dem Manifest der Web-App mit dem in der Kurzinfo angezeigten Wert id ein id-Attribut hinzu.

Kurzinfo zum Wert des Felds „ID“.

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

Was ist, wenn ich keinen id festlege?

Keine Sorge, nichts funktioniert kaputt. Ab Chrome 96 generiert der Browser basierend auf start_url im Manifest der Web-App eine id, wenn im Manifest keines vorhanden ist.

Wenn Sie dem Manifest der Web-App ein id hinzufügen, können Sie start_url und den Manifestpfad ändern – und zwar nur dann, wenn ihr bestimmter Ursprung gleich bleibt. Der Browser identifiziert die PWA anhand des angegebenen id und nicht anhand des start_url- oder Manifestpfads.

Wie teste ich das?

So testen Sie das Verhalten:

  1. Installieren Sie die PWA.
  2. Öffnen Sie about://web-app-internals/ und prüfen Sie die Attribute unhashed_app_id und start_url für die installierte PWA.
  3. Fügen Sie Ihrem Web-App-Manifest ein id-Attribut hinzu. Folgen Sie dazu den Schritten unter Wie lege ich meine id fest und lege sie fest?.
  4. Starte den Browser mit chrome://restart neu, starte die PWA über about://apps und schließe sie dann, um das Aktualisieren der Manifestdatei zu erzwingen.
  5. Öffnen Sie about://web-app-internals/ und prüfen Sie, ob das Attribut manifest_id für die installierte PWA geändert wurde.
  6. start_url im Web-App-Manifest ändern
  7. Starte den Browser mit chrome://restart neu, starte die PWA über about://apps und schließe sie dann, um das Aktualisieren der Manifestdatei zu erzwingen.
  8. Öffnen Sie about://web-app-internals/ und prüfen Sie das Attribut start_url für die installierte PWA, um festzustellen, ob sie wie erwartet aktualisiert wurde.

Zusätzliche Ressourcen