Naadloze PWA-migratie: verander van domein zonder gebruikers te verliezen.

Dibyajyoti Pal

Dan Murphy

Marijn Kruisselbrink

Gepubliceerd: 3 juni 2026

Progressive Web Apps (PWA's) hebben het web revolutionair veranderd door app-achtige ervaringen te bieden. Een van hun grootste sterke punten is echter tegelijkertijd ook een hardnekkige uitdaging gebleken: de identiteit van de app is sterk verbonden aan de website waarop deze is gebaseerd.

Om je merk te vernieuwen of je architectuur te herstructureren (bijvoorbeeld van www.example.com/social naar social.example.com ), stuitte je op een lastig dilemma. Er was geen manier om een ​​geïnstalleerde PWA te "verplaatsen". Gebruikers moesten de oude app handmatig verwijderen en de installatieknop voor de nieuwe app opzoeken.

Het PWA-team is verheugd om PWA Origin Migration in Chrome 150 te introduceren. Met deze nieuwe platformfunctie kunt u geïnstalleerde PWA's naadloos overzetten naar een nieuwe, identieke origin met minimale onderbreking voor de gebruiker, terwijl de gebruiker toch voldoende op de hoogte blijft.

Wat oorsprongmigratie mogelijk maakt

Je kunt de architectuur van je website aanpassen zonder de gebruikerservaring te beïnvloeden:

• Vrijheid in de technische architectuur: wijzig het subdomein of het pad van uw applicatie.
• Oplossing voor gesplitste app- statussen: Los het probleem op waarbij het wijzigen van een start_url zonder een stabiele ID per ongeluk leidde tot dubbele app-installaties .

Gebruikers kunnen hun apps migreren met een eenvoudig updatevenster. Ze worden op dezelfde manier als bij een standaard app-update op de hoogte gebracht van de migratie. Met één klik wordt de oude app verwijderd en de nieuwe app geïnstalleerd en gestart.

Hoe migreer je een PWA?

Om een ​​PWA te migreren, volg je deze stappen. De rest van dit artikel gaat hier dieper op in:

1. Gebruik de handdruk:
   • Voeg migrate_from toe aan de nieuwe app.
   • Voeg het veld allow_migration toe aan het bestand /.well-known/web-app-origin-association op de oude origin.
2. Kies het gewenste gedrag: suggest (of 'leeg') voorkomt onderbrekingen voor de gebruiker, wat waarschijnlijk handig is tijdens een eerste uitrol. force blokkeert de gebruiker en vereist de migratie als de gebruiker de oude URL's niet langer kan gebruiken.
3. Zorg dat de oude app up-to-date blijft: als de oude site doorverwijst naar de nieuwe site, gebruik dan de eigenschap install_url in het migrate_from blok om ervoor te zorgen dat de browser het oude manifest nog steeds kan vinden voor eventuele updates.
4. Implementeer id in het manifest van de bestemmingsapp: Chrome vereist dat het manifest van de bestemmingsapp een id veld bevat. Dit voorkomt de veelgemaakte fout om gesplitste apps te creëren door de start_url te wijzigen zonder een id in te stellen.

De wederzijdse handdruk: hoe werkt het?

Om de veiligheid te waarborgen en vijandige overnames te voorkomen, vereist de migratie een veilige handshake tussen de oude en nieuwe servers. Deze handshake zorgt ervoor dat beide servers door dezelfde entiteit worden beheerd.

Stap 1: De nieuwe app declareert de voorganger (vereist)

Voeg een migrate_from veld toe aan het web-app-manifest van de nieuwe applicatie.

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

Stap 2: De oude bron bevestigt de migratie (vereist)

Om te voorkomen dat een nieuwe site eenzijdig een oude app overneemt, moet de oude site de migratie expliciet goedkeuren. Dit gebeurt met een .well-known configuratiebestand.

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

Stap 3: Proactieve signalering (optioneel)

Om de update te activeren zonder te wachten tot de gebruiker de nieuwe site bezoekt, moet je het manifest van de oude app bijwerken zodat deze naar de nieuwe verwijst.

// 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"
  }
}

Stap 4: Omleidingen afhandelen (optioneel)

Als alternatief voor het gebruik van het veld migrate_to kunt u de migratie signaleren door de URL's van de oude app door te verwijzen naar de nieuwe app en te vertrouwen op ` scope_extensions om ervoor te zorgen dat de banner 'out of scope' niet wordt weergegeven in de oude app . Dit betekent dat het manifest van de oude app nooit zal worden gezien en dus nooit kan worden bijgewerkt. Om ervoor te zorgen dat de oude app wel kan blijven worden bijgewerkt voordat de app-migratie plaatsvindt, stelt u de install_url in binnen migrate_from om de browser te informeren over een URL die nog steeds het oude manifest bevat zonder omleiding.

// 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"
    }
  ]
}

Dat is alles! De gebruikerservaring is vergelijkbaar met die voor app-updates , waarbij de gebruiker een melding krijgt in de rechterbovenhoek van het app-venster:

Als je op 'App-update controleren' klikt, krijg je de volgende gebruikersinterface te zien (afhankelijk van wat er in het manifest is gewijzigd):

Beheer de gebruikerservaring

Je kunt met behulp van de behavior kiezen hoe agressief de migratie moet zijn:

1. Suggestie (standaard): De gebruiker ontvangt een passieve melding (bijvoorbeeld in het app-menu). Hij of zij kan ervoor kiezen om de app bij te werken, te verwijderen of de migratie te negeren door het dialoogvenster te openen.
2. Gedwongen: Bij de volgende keer dat de app wordt gestart, krijgt de gebruiker een dialoogvenster te zien waarin staat dat de app geblokkeerd wordt. De gebruiker moet ofwel overstappen naar de nieuwe Origin-versie, ofwel de app verwijderen (zie de volgende schermafbeelding).

Het volgende voorbeeld laat zien hoe u deze keuze kunt instellen.

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

Conclusie

De PWA-migratiefunctie stelt ontwikkelaars in staat om moderne, flexibele webarchitecturen te blijven bouwen zonder gebruikers uit het oog te verliezen.