Беспроблемная миграция исходного домена PWA: смена домена без потери пользователей.

Dibyajyoti Pal

Dan Murphy

Marijn Kruisselbrink

Опубликовано: 3 июня 2026 г.

Прогрессивные веб-приложения (PWA) произвели революцию в веб-технологиях, предлагая возможности, схожие с приложениями. Однако одним из их главных преимуществ остается и постоянная проблема: идентичность приложения тесно связана с веб-источником.

To rebrand or restructure your architecture (for example, moving from www.example.com/social to social.example.com ), you faced a painful dilemma. There was no way to "move" an installed PWA. Users were forced to manually uninstall the old app and find the install button for the new one.

Команда разработчиков PWA рада представить функцию миграции PWA Origin Migration в Chrome 150. Эта новая функция платформы позволяет плавно переносить установленные PWA на новый сайт с минимальными неудобствами для пользователя, при этом обеспечивая достаточное информирование пользователя.

Что позволяет миграция из первоисточника

Вы можете изменить архитектуру своего сайта, не нарушая пользовательский опыт:

• Свобода технической архитектуры: изменение поддомена или пути вашего приложения.
• Исправлена ​​ошибка разделения состояний приложения : устранена проблема, из-за которой изменение start_url без стабильного ID приводило к случайной установке дубликатов приложений .

Пользователи могут перенести свои приложения с помощью простого диалога обновления. Информация о переносе предоставляется аналогично стандартному обновлению приложения . Одним щелчком мыши старое приложение удаляется, а новое устанавливается и запускается.

Как перенести PWA

Для миграции PWA выполните следующие шаги. В остальной части статьи это описано более подробно:

1. Выполните рукопожатие:
   • Добавьте migrate_from в новое приложение.
   • Добавьте поле allow_migration в файл /.well-known/web-app-origin-association на старом сервере.
2. Выберите режим работы: suggest (или «пусто») позволяет избежать прерывания работы пользователя, что, вероятно, полезно на начальном этапе внедрения. force блокирует пользователя и требует миграции, если пользователь не может продолжать использовать старые URL-адреса.
3. Поддерживайте старое приложение в актуальном состоянии: если старый сайт перенаправляет на новый, используйте свойство install_url в блоке migrate_from чтобы убедиться, что браузер по-прежнему может найти старый манифест для потенциальных обновлений.
4. Добавьте id в манифест целевого приложения: Chrome требует, чтобы манифест целевого приложения содержал поле id . Это гарантирует, что приложение не допустит распространенной ошибки, когда создается разделенное приложение путем изменения start_url без указания поля id .

Двустороннее рукопожатие: как это работает

Для обеспечения безопасности и предотвращения враждебных поглощений миграция требует надежного взаимодействия между старым и новым источниками. Это взаимодействие гарантирует, что оба сайта контролируются одной и той же организацией.

Шаг 1: Новое приложение объявляет предшественника (обязательно)

Добавьте поле ` migrate_from в манифест веб-приложения нового приложения.

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

Шаг 2: Старый источник подтверждает миграцию (обязательно)

Чтобы предотвратить односторонний захват старого приложения новым сайтом, старый источник должен явно разрешить миграцию. Это делается с помощью конфигурационного файла .well-known .

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

Шаг 3: Проактивная подача сигналов (необязательно)

Чтобы запустить обновление, не дожидаясь посещения пользователем нового сайта, обновите манифест старого приложения, указав в нем ссылку на новый.

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

Шаг 4: Обработка перенаправлений (необязательно)

As an alternative to using the migrate_to field, you can signal the migration by redirecting the old app URLs to new app, and relying on the scope_extensions to have the out of scope banner not display in the old app . This means the old app's manifest will never be seen, and thus it can never be updated. To allow the old app to continue to update before the app migration occurs, set the install_url inside migrate_from to inform the browser of a URL to fetch that still has the old manifest attached without redirection.

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

Вот и всё! Пользовательский интерфейс похож на тот, что используется для обновления приложений , где пользователь получает уведомление в правом верхнем углу окна приложения:

При нажатии кнопки «Проверить обновление приложения» отображается следующий пользовательский интерфейс (в зависимости от изменений в манифесте):

Управление пользовательским опытом

Вы можете выбрать интенсивность миграции с помощью флага behavior :

1. Предложение (по умолчанию): Пользователь получает пассивное уведомление (например, в меню приложения). Он может выбрать обновление, удаление приложения или игнорирование миграции, открыв соответствующее диалоговое окно.
2. Принудительное обновление: При следующем запуске приложения пользователю будет показано блокирующее диалоговое окно. Ему необходимо либо обновить приложение до новой версии Origin, либо удалить его (см. скриншот ниже).

В следующем примере показано, как установить этот параметр.

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

Заключение

Функция миграции PWA позволяет разработчикам продолжать создавать современные, гибкие веб-архитектуры, не оставляя пользователей без поддержки.