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

Pete LePage

Wenn ein Nutzer Ihre PWA installiert, benötigt der Browser eine Methode, um der PWA. Bis vor Kurzem wurde in der Manifestspezifikation der Web-App aber nicht explizit darauf hingewiesen, eine Methode definieren, mit der eine PWA eindeutig identifiziert werden kann, sodass der Browser entscheiden kann, was zu unterschiedlichen Implementierungen führt. In einigen Browsern zeigt der start_url während in anderen der Pfad zur Manifestdatei verwendet wird, keines dieser Felder aktualisiert werden kann.

Um dieses Problem zu lösen, gibt es in der Web-App eine neue optionale id-Property. Manifest-Spezifikation, mit der Sie die für die Anzeige verwendete ID explizit definieren können, Ihre PWA. Durch Hinzufügen des Attributs id zum Manifest wird die Abhängigkeit von das start_url oder den Speicherort des Manifests und ermöglicht in Zukunft aktualisiert werden.

Was bewirkt die Eigenschaft id?

Das Attribut id stellt die Identität der PWA für den Browser dar. Wann? erkennt der Browser ein Manifest, das keine Identität besitzt, die mit einer eine bereits installierte PWA verwendet, wird sie als neue PWA behandelt, auch wenn sie bereitgestellt wird. über dieselbe URL wie eine andere PWA. Aber wenn es ein Manifest mit einer Identität sieht, die mit der bereits installierten PWA übereinstimmt, wird sie als installierte PWA behandelt.

Unterstützte Browser

Die Property „id“ wird jetzt in Chrome 96 unterstützt.

Was mache ich, wenn ich eine App ohne id habe?

Sie müssen nichts tun und nichts geht kaputt, wenn Sie Füge deinem Web-App-Manifest kein id hinzu, solange start_url und bleibt der Manifestpfad unverändert). Um Ihre PWA zukunftssicher zu machen, können Sie eine id-Property in dein Web-App-Manifest ein.

Wie lege ich mein id fest und lege es fest?

Die sicherste und genaueste Methode, um die id für eine PWA zu ermitteln den von Chrome berechneten Wert.

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

Kurzinfo zur ID Wert.

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

Was ist, wenn ich keinen id festlege?

Keine Sorge, nichts geht kaputt. Ab Chrome 96 werden die Der Browser generiert ein id, falls im Manifest keines angegeben ist. basierend auf dem start_url im Web-App-Manifest.

Wenn du dem Web-App-Manifest ein id hinzufügst, um die start_url und den Manifestpfad zu ändern (wenn und nur origin bleibt gleich!), weil der Browser die PWA basierend auf dem angegebenen id und nicht anhand des start_url- oder Manifest-Pfad.

Wie kann ich das testen?

So testen Sie das Verhalten: diese Schritte:

  1. Installieren Sie die PWA.
  2. Öffne about://web-app-internals/ und prüfe unhashed_app_id und start_url für die installierte PWA.
  3. Fügen Sie Ihrem Web-App-Manifest eine id-Property hinzu. Folgen Sie dazu den Schritten in Wie ermittle und lege ich meine id fest oben?
  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. Öffne about://web-app-internals/ und prüfe das Attribut manifest_id auf um zu prüfen, ob sie sich nicht geändert hat.
  6. Ändere den start_url im Manifest der Web-App.
  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. Öffne about://web-app-internals/ und prüfe das Attribut start_url auf um zu prüfen, ob sie wie erwartet aktualisiert wurde.

Zusätzliche Ressourcen