順暢遷移 PWA 來源：變更網域，使用者不流失

Dibyajyoti Pal
Dibyajyoti Pal
LinkedIn
Dan Murphy
Dan Murphy
X LinkedIn
Marijn Kruisselbrink
Marijn Kruisselbrink
LinkedIn

發布日期：2026 年 6 月 3 日

漸進式網頁應用程式 (PWA) 提供類似應用程式的體驗，徹底改變了網路。不過，他們最大的優勢之一，也一直是一項持續的挑戰：應用程式 ID 與網頁來源緊密連結。

如要重新塑造品牌或重組架構 (例如從 www.example.com/social 移至 social.example.com)，您會面臨痛苦的兩難局面。因為無法「移動」已安裝的 PWA，使用者必須手動解除安裝舊版應用程式，然後尋找新版應用程式的安裝按鈕。

我們很高興在 Chrome 150 中推出 PWA 來源遷移功能。這項新平台功能可讓您將已安裝的 PWA 順利遷移至新的同網站來源，盡量減少對使用者的干擾，同時充分告知使用者相關資訊。

來源遷移功能

您可以修改網站架構，同時兼顧使用者體驗：

  • 技術架構自由度：變更應用程式的子網域或路徑。
  • 修正分割應用程式狀態：解決變更 start_url 時，因沒有穩定 ID 而意外建立重複應用程式安裝的問題。

使用者可以透過簡單的更新對話方塊遷移應用程式。系統會以標準應用程式更新的類似方式，通知使用者遷移作業。只要按一下，系統就會解除安裝舊應用程式，並安裝及啟動新應用程式。

如何遷移 PWA

如要遷移 PWA，請按照下列步驟操作。這篇貼文的其餘內容會詳細說明：

  1. 部署握手程序：
    • 將 migrate_from 新增至新應用程式。
    • 在舊來源的 /.well-known/web-app-origin-association 檔案中加入 allow_migration 欄位。
  2. 選擇行為： suggest (或空白) 可避免打斷使用者，在初步推出時可能很有幫助。force 會封鎖使用者，並要求遷移，如果使用者無法繼續使用舊網址。
  3. 讓舊版應用程式保持在最新狀態：如果舊網站會重新導向至新網站，請在 migrate_from 區塊中使用 install_url 屬性，確保瀏覽器仍可找到舊版資訊清單，以便進行潛在更新。
  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：處理重新導向 (選用)

除了使用 migrate_to 欄位，您也可以將舊版應用程式網址重新導向至新版應用程式，並依賴 scope_extensions，讓舊版應用程式不顯示超出範圍的橫幅，藉此表示遷移。這表示系統永遠不會看到舊版應用程式的資訊清單，因此也永遠無法更新。如要讓舊版應用程式在遷移前繼續更新，請在 migrate_from 內設定 install_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"
    }
  ]
}

大功告成！使用者體驗與應用程式更新類似，使用者會在應用程式視窗的右上角收到通知：

應用程式視窗顯示有可用的應用程式更新。下拉式選單包含「查看應用程式更新」的連結。

按一下「查看應用程式更新」，會顯示下列使用者體驗 (視資訊清單中的變更而定)：

對話方塊會要求使用者查看標誌、名稱和網址更新。

控管使用者體驗

您可以使用 behavior 標記，選擇遷移的積極程度：

  1. 建議 (預設)：使用者會收到被動通知 (例如在應用程式選單中)。他們可以選擇更新或解除安裝應用程式，也可以啟動對話方塊來忽略遷移作業。
  2. 強制：使用者下次啟動應用程式時，系統會顯示封鎖對話方塊。他們必須更新至新來源或解除安裝應用程式 (請參閱以下螢幕截圖)。

以下範例說明如何設定這項選擇：

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

對話方塊會告知使用者必須更新應用程式。

結論

開發人員可透過 PWA 遷移功能，持續建構現代化且彈性的網路架構，同時兼顧使用者體驗。