针对边栏进行开发

Microsoft Edge 中的边栏是位于浏览器一侧的持久窗格,它与浏览器的主要内容共存。 边栏允许用户在浏览器选项卡旁边轻松访问热门网站和实用工具。 边栏中的内容通过启用并排浏览并尽量减少在浏览器选项卡之间切换上下文的需要来增强用户的主要任务。 通过使用 Microsoft Edge 中的边栏,用户可以在工作流中访问所需的生产力工具。

Microsoft Edge 中的边栏,其中显示了有用的工具,以及“main”选项卡

作为开发人员,可以通过两种方式利用边栏来实现自己的体验:

  • 通过调整现有的渐进式 Web 应用 (PWA) 以在边栏中运行。
  • 通过在 Microsoft Edge 扩展中使用边栏 API。

选择正确的方法

利用边栏的两种不同方式旨在满足不同的开发人员需求。 下面是边栏应用和边栏扩展之间的主要区别:

方面 边栏应用 边栏扩展
术语定义 在边栏中运行的渐进式 Web 应用 (PWA) 。 在边栏中显示内容的 Microsoft Edge 扩展。
分布 与网站一样,应用托管在应用的 Web 服务器上。 该扩展通过 Microsoft Edge 加载项网站分发。
功能 应用可以使用所有 Web API 和功能,以及 PWA 功能,例如脱机支持、推送或文件系统访问。 该扩展可以使用功能强大的扩展 API,例如读取或修改当前页。
上下文 应用在其自己的 Web 上下文中运行,独立于“main”选项卡。 扩展可以访问当前网页,并通过扩展的内容脚本修改网页。
安装 用户在访问应用的网站时,通过与边栏交互来安装应用。 该扩展由用户从 Microsoft Edge 加载项网站安装。
用户体验 应用在边栏中有其自己的图标。 单击图标将打开边栏(如果已关闭),并显示应用的内容。 用户体验取决于扩展。 该扩展可以根据用户在浏览器中访问的网站打开边栏。
使用的技术 Web 开发和 PWA。 请参阅渐进式Web 应用 (PWA) 概述 扩展开发。 请参阅 Microsoft Edge 扩展概述

侧边栏应用允许你调整现有的渐进式 Web 应用 (PWA) ,以便安全地与其他浏览器选项卡一起运行,从而获得并排共同浏览体验。 对于想要提供配套体验(包括不需要高级扩展功能的社交、消息传递或媒体应用)的 Web 开发人员来说,此方法是一个不错的选择。

边栏应用基础结构可帮助用户在浏览 Web 时发现和安装边栏应用,只需对 Web 应用程序清单文件进行简单更改,即可为应用提供出色的可发现性。 如果你想要在 Microsoft Edge 中重复使用现有 Web 应用,并充分利用 PWA 可用的 Web 功能,则边栏应用是一个不错的选择。

若要详细了解 PWA 以及如何创建它们,请参阅渐进式Web 应用 (PWA) 概述。 若要详细了解如何使现有 PWA 适应 Microsoft Edge 中的边栏,请参阅 为 Microsoft Edge 中的边栏生成 PWA

Microsoft Edge 扩展可以选择使用边栏 API 在 Microsoft Edge 的边栏中显示自定义 UI。 此外,扩展也会出现在其他位置,例如在 Microsoft Edge 工具栏中或弹出窗口中。

如果你的应用体验依赖于功能强大的扩展 API(例如读取或修改当前页),则边栏扩展可提供这些功能。 用户可通过 Microsoft Edge 加载项网站查找和安装这些扩展。 Microsoft Edge 团队将继续改进这些侧边栏扩展性模型,并欢迎你的反馈。 若要留下反馈,请在存储库上 创建新问题 ,或 搜索现有问题 并加入现有对话。

若要详细了解 Microsoft Edge 扩展以及如何创建它们,请参阅 Microsoft Edge 扩展概述。 若要详细了解如何在扩展中使用边栏 API,请参阅 Microsoft Edge 边栏中的扩展