使用新的 HTML 安裝元素安裝網頁應用程式

Patrick Brosset

發布日期：2026 年 5 月 12 日

安裝網頁應用程式一律需要 JavaScript。使用 beforeinstallprompt 事件時，安裝流程完全位於指令碼中。新的 <install> 元素會改變這種情況：只要在網頁中放置單一 HTML 元素，瀏覽器就會為您轉譯可信任的安裝按鈕，完全不需要 JavaScript。

Microsoft Edge 團隊與 Chrome 團隊合作，在 Chromium 中實作了 <install> 元素。您現在可以在 Chrome 或 Edge 148 以上版本中，透過旗標測試這項功能，也可以透過來源試用在兩個瀏覽器中測試這項功能 (148 至 153 版)。

請試用這項功能，並瞭解它與命令式 Web 安裝 API (navigator.install()) 的比較結果，後者有自己的原始碼試用。

問題

網頁應用程式安裝作業不完整。每個瀏覽器都有一組專屬的進入點，例如網址列圖示、選單項目和提示。開發人員對安裝流程的顯示時間和方式，只有有限的控制權。

建立類似應用程式商店的體驗，讓使用者從網站安裝其他應用程式，難度較高，因為安裝程序過去僅限於目前網頁。

<install> 元素

新 <install> HTML 元素的內容和呈現方式由瀏覽器控管。與 <geolocation> 等其他權限元素類似，瀏覽器可控管按鈕的標籤文字、語言和外觀，因此可將使用者點選按鈕的動作視為真正的意圖信號。

如果使用者點選標示為「安裝 Wonderful Application」的按鈕，當系統顯示安裝提示時，他們應該不會感到意外。

由於瀏覽器會算繪按鈕，因此您只需極少的程式碼，即可取得可信的安裝功能提示，且不需要在 JavaScript 中協調 beforeinstallprompt 程序。

安裝目前的應用程式

如果目前頁面連結至含有 id 欄位的資訊清單，您只需要一個元素：

<install></install>

瀏覽器會以標準化文字和圖示呈現按鈕，使用者點按按鈕時，瀏覽器會啟動正常的安裝流程。

安裝其他應用程式

如要安裝與目前網頁來源不同的網頁應用程式，請使用 installurl 屬性指向其他網頁應用程式：

<install installurl="https://awesome-app.com/"></install>

如果 https://awesome-app.com 上的網頁連結至定義 id 欄位的資訊清單，您就完成了所有必要步驟。

如果沒有 id 欄位，請使用 manifestid 屬性提供計算出的資訊清單 id：

<install installurl="https://awesome-app.com/"
  manifestid="https://awesome-app.com/?source=pwa">
</install>

如要取得計算出的資訊清單 id：

1. 開啟開發人員工具。
2. 前往「應用程式」分頁。
3. 在「身分」部分下方，複製「計算出的應用程式 ID」值。

使用 <install> 按鈕安裝其他來源的應用程式，表示您可以建立目錄頁面，讓使用者安裝多個應用程式，每個應用程式都有自己的 <install> 按鈕。

提供備用內容

如果瀏覽器不支援 <install> 元素，系統會顯示您放在元素內的任何 HTML：

<install installurl="https://awesome-app.com/">
  <a href="https://awesome-app.com/">Launch Awesome App</a>
</install>

偵測支援

如果備用內容不符合您的用途，且您偏好在不支援 <install> 元素的瀏覽器上實作不同的使用者體驗，請使用 JavaScript 偵測支援情形：

if ('HTMLInstallElement' in window) {
  // The <install> element is supported.
}

處理事件

<install> 元素會觸發事件，您可以監聽這些事件，瞭解作業是否成功、是否遭到關閉，以及驗證錯誤：

const button = document.querySelector('install');

button.addEventListener('promptaction', () => {
  console.log('Installation succeeded');
});

button.addEventListener('promptdismiss', () => {
  console.log('User dismissed the install prompt');
});

button.addEventListener('validationstatuschanged', (e) => {
  if (e.target.invalidReason === 'install_data_invalid') {
    console.error('Invalid install data:', e.target.invalidReason);
  }
});

立即體驗

如要立即試用 <install> 元素，有以下兩種方法：

• 只能在裝置上測試元素。
• 註冊來源試用，在實際情況下與使用者一起測試元素。

在本機測試

如要在自己的裝置上測試元素，請按照下列步驟操作：

1. 使用 Chrome 或 Edge 148 以上版本。
2. 在新分頁中前往 about://flags/#web-app-install-element。
3. 將「網頁應用程式安裝元素」設為「已啟用」。
4. 重新啟動瀏覽器。

使用來源試用在正式網站上測試

來源試用可讓實際網站上的使用者直接使用這項功能，不必先啟用標記。

1. 開啟 <install> 元素來源試用註冊頁面。
2. 登入。
3. 按一下「Register」(註冊)。
4. 輸入網站來源，並填寫表單的其他部分。
5. 提交表單後，您會收到權杖字串。
6. 使用 <meta> 代碼將權杖加到網站網頁：

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

或者，您也可以改為以 HTTP 回應標頭的形式傳送權杖：

Origin-Trial: YOUR_TOKEN_HERE

Chrome 和 Edge 148 至 153 版都提供來源試用，且兩個瀏覽器可使用相同權杖。如要進一步瞭解原始碼試用，請參閱：

• 開始使用 Chrome 來源試用計畫。
• 使用原始碼試用，在 Edge 中測試實驗性 API 和功能。

實際使用

請參閱<install> Element Store 示範，這個 PWA 目錄使用 <install> 元素，可讓您安裝多個範例應用程式。

與 Web Install API 的比較

我們實驗如何改善網頁上的應用程式安裝次數時，<install> 元素並非唯一的方法。

先前我們曾試用 Web Install API (navigator.install())，這是一種命令式 JavaScript API，可讓網站觸發同源或跨源網頁應用程式的安裝作業。詳情請參閱「Web Install API 已可供測試」。

Web Install API 也有自己的來源試用。

以下比較這兩種方法：

請提供您寶貴的意見

我們正積極徵求這兩種做法的意見回饋。視需求而定，我們可能會新增對 <install> 元素或 navigator.install() API 的支援，或兩者皆支援。

如要分享有關 <install> 元素的意見，請在 WICG 存放區中，針對這項提案開啟問題。

如要分享對 navigator.install() API 的意見，請在「Developer Feedback: navigator.install versus <install> element」問題中新增註解。

資源

• 說明：<install> 元素
• 示範：<install> 元素商店
• 使用說明和示範來源
• Chrome 平台狀態項目
• Web 安裝 API 測試版已推出 (Edge 網誌)
• Web Install API 說明