使用新的 HTML 安装元素安装 Web 应用

Patrick Brosset
Patrick Brosset
首页

发布时间：2026 年 5 月 12 日

安装 Web 应用一直需要 JavaScript。使用 beforeinstallprompt 事件时，安装流程完全在脚本中进行。新的 <install> 元素改变了这种情况：只需将一个 HTML 元素放到网页中，浏览器就会为您呈现一个可信的安装按钮，无需使用 JavaScript。

图片

Microsoft Edge 团队与 Chrome 团队合作，在 Chromium 中实现了 <install> 元素。现在，您可以在 Chrome 或 Edge 148 版及更高版本中通过 flag 测试该功能，也可以通过源试用在上述两个浏览器中使用该功能，试用期从 148 版开始，到 153 版结束。

您可以试用一下，了解它与命令式 Web 安装 API (navigator.install()) 的比较情况，后者有自己的源试用。

问题

Web 应用安装过程不完整。每款浏览器都有一组自己的入口点，例如地址栏图标、菜单项和提示。开发者对安装流程的显示时间和方式的控制有限。

构建类似应用商店的体验，让用户能够从您的网站安装其他应用，这会比较困难，因为从历史上看，安装一直仅限于当前网页。

<install> 元素

新的 <install> HTML 元素的内容和呈现方式由浏览器控制。与其他权限元素（如 <geolocation>）类似，浏览器对按钮标签文本、语言和外观的控制意味着它可以信任用户的点击是真实意图的信号。

如果用户点击了标有“安装精彩应用”的按钮，那么当系统显示安装提示时，用户不太可能会感到意外。

由于浏览器会呈现该按钮，因此您只需极少的代码即可获得可信的安装可供性 (affordance)，而无需在 JavaScript 中编排 beforeinstallprompt 流程。

安装当前应用

如果当前网页链接到的清单具有 id 字段，您只需提供一个元素：

<install></install>

浏览器会使用标准化文本和图标呈现该按钮，当用户点击该按钮时，浏览器会启动正常的安装流程。

安装其他应用

如需安装与当前网页源不同的来源中的 Web 应用，请使用 installurl 属性指向其他 Web 应用：

<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. 将 Web 应用安装元素设置为已启用。
  4. 重新启动浏览器。

使用源试用在正式版网站上进行测试

通过源试用，正式版网站上的真实用户无需先启用标志即可使用该功能。

  1. 打开 <install> 元素的源试用注册页面。
  2. 登录。
  3. 点击注册。
  4. 输入您网站的源，然后填写表单的其余部分。
  5. 提交表单后，您会获得一个令牌字符串。
  6. 使用 <meta> 标记将令牌添加到您网站的网页中：
<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

或者，您也可以改为将令牌作为 HTTP 响应标头发送：

Origin-Trial: YOUR_TOKEN_HERE

源试用适用于 Chrome 和 Edge 的 148 至 153 版，并且同一令牌在这两个浏览器中均有效。如需详细了解源试用，请参阅：

了解实际效果

不妨查看 <install> 元素商店演示，这是一个使用 <install> 元素的 PWA 目录，可让您安装多个示例应用。

与 Web Install API 的比较

<install> 元素并非我们尝试改进 Web 上应用安装体验的唯一方式。

之前，我们曾尝试使用 Web 安装 API (navigator.install())，该 API 是一种命令式 JavaScript API，可让您的网站触发同源或跨源 Web 应用的安装。如需了解详情，请参阅网络安装 API 已准备就绪，可供测试。

Web 安装 API 也有自己的源试用。

以下是这两种方法的比较：

元素 navigator.install() API
方法 声明式 HTML 命令式 JavaScript
需要代码 单个 HTML 元素 用于调用 navigator.install() 并处理返回的 promise 的 JavaScript
浏览器信任 高：浏览器控制按钮的内容和外观，类似于权限元素 低：需要用户执行激活操作（点击、点按）作为信任信号
跨源安装 可以，使用 installurl 可以，通过将网址传递给 navigator.install()
自定义 极简：由浏览器决定按钮的外观 完整：您自行设计界面，并通过任何互动调用 API
后备 内置：如果元素不受支持，则呈现子内容 您自行编写功能检测和回退逻辑
适用场景 只需少量代码即可实现嵌入式安装按钮；需要浏览器信任的界面 自定义安装流程、动态目录界面、集成到现有的 JavaScript 密集型界面中

请与我们分享您的想法

我们正在积极寻求有关这两种方法的反馈。我们可以根据您的需求添加对 <install> 元素或 navigator.install() API 的支持，也可以同时添加对这两者的支持。

如需分享有关 <install> 元素的反馈，请在专门针对此提案的 WICG 代码库中提交问题。

如需分享有关 navigator.install() API 的反馈，请向开发者反馈：navigator.install 与 <install> 元素问题添加评论。

资源