Nahtlose Migration des PWA-Ursprungs: Domains ändern, ohne Nutzer zu verlieren

Dibyajyoti Pal

Dan Murphy

Marijn Kruisselbrink

Veröffentlicht am 3. Juni 2026

Progressive Web-Apps (PWAs) haben das Web revolutioniert, indem sie app-ähnliche Nutzererlebnisse bieten. Eine ihrer größten Stärken war jedoch auch eine ständige Herausforderung: Die App-Identität ist eng mit dem Webursprung verknüpft.

Wenn Sie Ihre Marke neu ausrichten oder Ihre Architektur umstrukturieren wollten (z. B. von www.example.com/social zu social.example.com wechseln), standen Sie vor einem schwierigen Dilemma. Es gab keine Möglichkeit, eine installierte PWA zu „verschieben“. Nutzer mussten die alte App manuell deinstallieren und den Installationsbutton für die neue App suchen.

Das PWA-Team freut sich, PWA-Ursprungsmigration in Chrome 150 einzuführen. Mit dieser neuen Plattformfunktion können Sie installierte PWAs nahtlos zu einem neuen Ursprung derselben Website migrieren, ohne dass Nutzer dadurch beeinträchtigt werden. Gleichzeitig werden sie aber ausreichend informiert.

Was die Ursprungsmigration ermöglicht

Sie können die Architektur Ihrer Website ändern, ohne die Nutzerfreundlichkeit zu beeinträchtigen:

• Freie technische Architektur:Sie können die Subdomain oder den Pfad Ihrer Anwendung ändern.
• Status von aufgeteilten Apps korrigieren:Das Problem wurde behoben, bei dem durch das Ändern eines start_url ohne stabile ID versehentlich doppelte App-Installationen erstellt wurden.

Nutzer können ihre Apps über ein einfaches Update-Dialogfeld migrieren. Sie werden auf ähnliche Weise wie bei einem standardmäßigen App-Update über die Migration informiert. Mit einem einzigen Klick wird die alte App deinstalliert und die neue App installiert und gestartet.

PWA migrieren

So migrieren Sie eine PWA: Im restlichen Beitrag werden die einzelnen Punkte genauer erläutert:

1. Handshake bereitstellen:
   • Fügen Sie der neuen App migrate_from hinzu.
   • Fügen Sie das Feld allow_migration der Datei /.well-known/web-app-origin-association am alten Ursprung hinzu.
2. Verhalten auswählen:suggest (oder leer) verhindert, dass der Nutzer unterbrochen wird. Das ist wahrscheinlich bei der ersten Einführung hilfreich. force blockiert den Nutzer und erfordert die Migration, wenn der Nutzer die alten URLs nicht mehr verwenden kann.
3. Alte App auf dem neuesten Stand halten:Wenn die alte Website zur neuen Website weiterleitet, verwenden Sie das Attribut install_url im Block migrate_from, damit der Browser das alte Manifest für potenzielle Updates weiterhin finden kann.
4. id im Ziel-App-Manifest implementieren:In Chrome muss das Manifest der Ziel-App das Feld id enthalten. So wird verhindert, dass die App den häufigen Fehler macht, aufgeteilte Apps zu erstellen, indem die start_url ohne festgelegte id geändert wird.

Der bidirektionale Handshake: So funktioniert er

Um die Sicherheit zu gewährleisten und feindliche Übernahmen zu verhindern, ist für die Migration ein sicherer Handshake zwischen dem alten und dem neuen Ursprung erforderlich. Dieser Handshake sorgt dafür, dass beide Websites von derselben Organisation kontrolliert werden.

Schritt 1: In der neuen App wird die Vorgänger-App deklariert (erforderlich)

Fügen Sie dem Web-App-Manifest der neuen Anwendung das Feld migrate_from hinzu.

// Manifest at https://fileman.google.com/manifest.json
{
  "name": "File Manager",
  "id": "/files/",
  "start_url": "/files/index.html",
  ....
  "migrate_from": [
    "https://drive.google.com/"
  ]
}

Schritt 2: Das alte Original bestätigt die Migration (erforderlich)

Damit eine neue Website nicht einseitig eine alte App übernehmen kann, muss der alte Ursprung die Migration explizit autorisieren. Dazu wird eine Konfigurationsdatei namens .well-known verwendet.

// File at https://drive.google.com/.well-known/web-app-origin-association
{
  "https://fileman.google.com/files/": {
    "allow_migration": true
  }
}

Schritt 3: Proaktive Signale (optional)

Wenn Sie das Update auslösen möchten, ohne darauf zu warten, dass der Nutzer die neue Website aufruft, aktualisieren Sie das Manifest der alten App, sodass es auf die neue verweist.

// Manifest at https://drive.google.com/manifest.json
{
  "name": "Drive",
  "start_url": "/",
  "migrate_to": {
    "id": "https://fileman.google.com/files/",
    "install_url": "https://fileman.google.com/drive/installwebapp?usp=migrate"
  }
}

Schritt 4: Weiterleitungen verarbeiten (optional)

Alternativ zur Verwendung des Felds migrate_to können Sie die Migration signalisieren, indem Sie die alten App-URLs zur neuen App weiterleiten und darauf vertrauen, dass das scope_extensions dafür sorgt, dass das Banner „Nicht im Umfang enthalten“ nicht in der alten App angezeigt wird. Das Manifest der alten App wird also nie aufgerufen und kann daher auch nie aktualisiert werden. Damit die alte App vor der App-Migration weiterhin aktualisiert werden kann, legen Sie install_url in migrate_from fest, um den Browser über eine URL zu informieren, die abgerufen werden soll und an die das alte Manifest ohne Weiterleitung angehängt ist.

// Manifest at https://fileman.google.com/manifest.json
{
  "name": "File Manager",
  "id": "/files/",
  "start_url": "/files/index.html",
  ....
  "migrate_from": [
    {
      "id": "https://drive.google.com/",
      "install_url": "https://drive.google.com/drive/installwebapp?usp=migrate"
    }
  ]
}

Geschafft! Die Benutzeroberfläche ähnelt der für App-Updates. Der Nutzer wird rechts oben im App-Fenster benachrichtigt:

Wenn Sie auf App-Update überprüfen klicken, wird die folgende Benutzeroberfläche angezeigt (je nachdem, was sich im Manifest geändert hat):

Nutzererfahrung steuern

Mit dem Flag behavior können Sie festlegen, wie aggressiv die Migration sein soll:

1. Vorschlagen (Standard): Der Nutzer erhält eine passive Benachrichtigung, z. B. im App-Menü. Sie können ihre App aktualisieren oder deinstallieren oder die Migration ignorieren, indem sie das Dialogfeld schließen.
2. Erzwingen:Beim nächsten Start der App wird dem Nutzer ein blockierendes Dialogfeld angezeigt. Sie müssen entweder auf den neuen Ursprung aktualisieren oder die App deinstallieren (siehe folgenden Screenshot).

Das folgende Beispiel zeigt, wie diese Auswahl festgelegt wird:

"migrate_from": [
  { 
    "id": "https://example.com/social/",
    "behavior": "force" // or suggest
  }
]

Fazit

Mit der Funktion zur PWA-Migration können Entwickler moderne, flexible Webarchitekturen erstellen, ohne Nutzer zurückzulassen.