Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

シームレスな PWA オリジン移行: ユーザーを失うことなくドメインを変更する

Dibyajyoti Pal

Dan Murphy

Marijn Kruisselbrink

公開日: 2026 年 6 月 3 日

プログレッシブウェブアプリ（PWA）は、アプリのようなエクスペリエンスを提供することでウェブに革命をもたらしました。しかし、その最大の強みの一つが、アプリの ID がウェブオリジンに密接に結び付いているという、解決が難しい課題でもありました。

ブランドの変更やアーキテクチャの再構築（たとえば、www.example.com/social から social.example.com への移行）を行う場合、難しい選択を迫られました。インストール済みの PWA を「移動」する方法がなかったため、ユーザーは古いアプリを手動でアンインストールし、新しいアプリのインストールボタンを見つける必要がありました。

PWA チームは、Chrome 150 で PWA オリジン移行 を導入できることを嬉しく思っています。この新しいプラットフォーム機能を使用すると、インストール済みの PWA を新しい同一サイトのオリジンにシームレスに移行できます。ユーザーへの影響を最小限に抑えながら、ユーザーに十分な情報を提供できます。

オリジン移行でできること

ユーザーエクスペリエンスを損なうことなく、サイトのアーキテクチャを変更できます。

技術アーキテクチャの自由度: アプリケーションのサブドメインまたはパスを変更できます。
アプリの分割状態を修正: 安定した ID がない状態で start_urlを変更すると、アプリのインストールが重複してしまう問題を解決しました。

ユーザーは、簡単な更新ダイアログでアプリを移行できます。移行は、標準のアプリアップデートと同様の方法で通知されます。ワンクリックで古いアプリがアンインストールされ、新しいアプリがインストールされて起動します。

PWA を移行する方法

PWA を移行する手順は次のとおりです。以降で詳しく説明します。

ハンドシェイクをデプロイする:
- 新しいアプリに migrate_from を追加します。
- 古いオリジンの /.well-known/web-app-origin-association ファイルに allow_migration フィールドを追加します。
動作を選択する: suggest（または空）にすると、ユーザーに中断を促すことなく、最初のロールアウト時に役立ちます。ユーザーが古い URL を使用し続けられない場合は、force を使用するとユーザーがブロックされ、移行が必要になります。
古いアプリを最新の状態に保つ: 古いサイトから新しいサイトにリダイレクトする場合は、migrate_from ブロックの install_url プロパティを使用して、ブラウザが潜在的な更新の古いマニフェストを見つけられるようにします。
宛先アプリマニフェストに 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: リダイレクトを処理する（省略可）

migrate_to フィールドを使用する代わりに、古いアプリの URL を新しいアプリにリダイレクトして移行を通知し、scope_extensions を使用して、範囲外のバナーが古いアプリに表示されないようにすることができます。つまり、古いアプリのマニフェストは表示されないため、更新できません。アプリの移行が行われる前に古いアプリの更新を続行できるようにするには、migrate_from 内に install_url を設定して、リダイレクトなしで古いマニフェストが添付された URL を取得するようにブラウザに通知します。

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

これで完了です。UX はアプリの更新に使用されるものと似ており、アプリウィンドウの右上隅に通知が表示されます。

アプリウィンドウに、アプリアップデートが利用可能であることが表示されます。プルダウンには、[アプリアップデートを確認] へのリンクが含まれています。

[アプリアップデートを確認] をクリックすると、次の UX が表示されます（マニフェストの変更内容によって異なります）。

ダイアログで、ロゴ、名前、URL の更新内容を確認するようユーザーに求められます。

ユーザーエクスペリエンスを制御する

behavior フラグを使用して、移行の積極性を選択できます。

提案（デフォルト）: ユーザーにパッシブ通知（アプリメニューなど）が表示されます。ダイアログを起動して、更新、アプリのアンインストール、移行の無視を選択できます。
強制: 次回アプリを起動すると、ユーザーにブロックダイアログが表示されます。新しいオリジンに更新するか、アプリをアンインストールする必要があります（次のスクリーンショットをご覧ください）。

この選択を設定する方法の例を次に示します。

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

ダイアログには、アプリの新しいバージョンが必要であることが表示されます。

まとめ

PWA 移行機能を使用すると、デベロッパーはユーザーを置き去りにすることなく、最新の柔軟なウェブアーキテクチャを構築できます。