渐进式 Web 应用和 PBA (实验) Experimental features in Progressive Web Apps (PWAs)

Microsoft Edge 提供对仍在开发中的实验性功能的访问权限。Microsoft Edge provides access to experimental features that are still in development. 若要确定每个功能是否就绪以及何时发布每个功能,请进行测试 并提供反馈To determine if each feature is ready and when to release each, test and provide feedback.

实验功能在 Microsoft Edge 的所有渠道中均可用,但最新的实验功能仅在 Microsoft Edge Canary 渠道中可用。Experimental features are available in all channels of Microsoft Edge, but the latest experimental features are only available in the Microsoft Edge Canary channel.

打开试验功能Turn on experimental features

若要在 Microsoft Edge 中打开\(或关闭\)试验功能,请完成以下步骤。To turn on (or off) experimental features in Microsoft Edge, complete the following steps.

  1. 打开 Microsoft Edge。Open Microsoft Edge.

    备注

    确保使用本文中列出的实验的 Microsoft Edge 版本。Ensure you use a Microsoft Edge version that has the Experiment listed in this article. 导航到 实验功能Navigate to Experimental features.

  2. 导航到 edge://flagsNavigate to edge://flags.

  3. 导航到相关实验。Navigate to the relevant experiment.

  4. 选择实验说明旁边的下拉菜单并选择 EnabledChoose the dropdown menu next to the experiment description and choose Enabled.

    选择启用以打开实验

    备注

    每个实验通常都有一个下拉菜单来选择以下值。Each experiment usually has a dropdown menu to choose the following values. 如果实验功能在实验上没有条目,则提供**** 说明以使用命令行使用该功能启动 Microsoft Edge。If an experimental feature doesn't have an entry on Experiments, instructions are provided to start Microsoft Edge with that feature using the command-line.

    • Default
    • Disabled
    • Enabled
  5. 重启 Microsoft Edge。Restart Microsoft Edge.

原始试验Origin Trials

Microsoft Edge 有时使用源试用版来测试特定域或网站的功能。Microsoft Edge sometimes uses origin trials to test features for specific domains or websites. 你可能想要对网站使用源试用版来应用特定功能。You may want to use an origin trial for your website to apply a specific feature. 如果你是网站所有者,你可以注册源试用版。If you're a website owner, you may enroll in an origin trial. 源试用版向访问你的网站的 Microsoft Edge 用户提供一定比例的功能。An origin trial provides features to a percentage of Microsoft Edge users who visit your website.

有关源试用版详细信息,请导航到 Microsoft Edge Origin Trials 开发人员控制台For more information about Origin Trials, navigate to Microsoft Edge Origin Trials Developer Console.

备注

实验性功能会不断更新,并且可能会导致性能问题。Experimental features are constantly updated and may cause performance issues. 若要关闭实验功能,请导航到打开 实验功能,导航到实验,然后选择 DisabledTo turn off an experimental feature, navigate to Turn on experimental features, navigate to the experiment, and then choose Disabled.

可供测试的功能Features that are available to test

以下列表介绍了可在 Microsoft Edge 上测试和验证的新实验性 Web 应用功能。The following list describes the new experimental web app features that are available to test and validate on Microsoft Edge.

功能Feature Microsoft Edge 版本Microsoft Edge version 平台Platform
URI 协议处理URI Protocol Handling 91 或更高版本91 or later Windows 和 LinuxWindows and Linux
URL 链接处理URL Link Handling 91 或更高版本91 or later WindowsWindows
适用于桌面应用的窗口控件覆盖层Window Controls Overlay for Desktop Apps 91 或更高版本91 or later Windows 10Windows 10
在操作系统登录时运行Run on OS Login 88 或更高版本88 or later 全部All
快捷方式Shortcuts 87 或更高版本87 or later 全部All
文件处理File Handling 83 或更高版本83 or later 所有桌面All Desktop

URI 协议处理URI Protocol Handling

统一资源标识符 \ (URI) 可用于定义使用 HTTP 或 FTP 协议的网页和 Web 内容的链接。A uniform resource identifier (URI) may be used to define more than just links to webpages and web content using the HTTP or FTP protocol. URI 可用于描述指向您编成架构中任何内容的链接。URIs may be used to describe links to anything that you codify into a schema. 例如,协议用于描述电子邮件链接,操作系统 mailto:// \ (OS) 或浏览器决定哪个网页或应用应处理该协议。For example, the mailto:// protocol is used to describe an email link and the operating system (OS) or browser decides which webpage or app should handle that protocol.

有关基于浏览器的现有支持,请导航到基于 Web 的协议处理程序For more information about existing browser-based support, navigate to Web-based protocol handlers.

此功能允许您完成以下操作。This feature allows you to complete the following actions.

  • 使用 Web 应用程序的清单向主机操作系统注册 PWARegister your PWA with the host OS using the manifest of your web app
  • 声明 PWA 处理特定 URI 协议Declare that a PWA handles a specific URI protocol

将 PWA 注册为协议处理程序后,当用户选择具有特定方案(如浏览器或本机应用)的超链接时,已注册的 PWA 由操作系统激活并接收 mailto:// web+music:// URI。After you register a PWA as a protocol handler, when a user chooses a hyperlink with a specific scheme such as mailto:// or web+music:// from a browser or a native app, the registered PWA is activated by the OS and receives the URI.

此功能要求你更新 Web 应用清单以在需要指定两个字段的 protocol_handlers 数组中包括数组:This feature requires you to update the web app manifest to include a protocol_handlers array, in the array you need to specify two fields:

  • protocol:用于处理请求的协议,例如 或 mailto web+jngl: The protocol to handle the request, for example mailto or web+jngl.
  • url:处理协议的应用作用域中的 HTTPS URI。: The HTTPS URI in the app scope that handles the protocol. 将来,计划替换以协议处理程序方案开始的 %s URI。In the future, the URI starting with the protocol handlers scheme is planned to replace the %s token.

更新清单以支持要注册的协议。Update your manifest to support the protocol that you want to register. 启用此功能后,Microsoft Edge 将完成以下操作。After you turn on this feature, Microsoft Edge completes the following actions.

  1. 检测清单中的更改Detects changes in the manifest
  2. 为协议注册应用Registers the app for the protocol

如果多个应用注册协议,则向用户显示提示。If more than one app registers a protocol, the user is presented with a prompt. 用户从操作系统或浏览器呈现的列表中选择相应的应用。The user chooses the appropriate app from the list presented by the OS or browser.

若要在 Windows 上的 Microsoft Edge 中预览协议处理,请导航到打开实验性功能,然后打开桌面 PWA 协议处理To preview protocol handling in Microsoft Edge on Windows, navigate to Turn on experimental features and turn on Desktop PWA Protocol handling.

有关为协议处理程序运行的源试用版详细信息,请导航到注册 Web 应用协议处理程序注册For more information about origin trial is running for protocol handlers, navigate to Register for Web App Protocol Handler Registration.

示例清单Example Manifest

在此例中,Web 应用清单声明应用应注册为处理协议 和 web+jngl web+jnglstoreIn this example, a web app manifest declares that the app should be registered to handle the protocols web+jngl and web+jnglstore.

{
  "name": "Jungle",
  "description": "A plant encyclopedia",
  "protocol_handlers": [
    {
      "protocol": "web+jngl",
      "url": "/lookup?type=%s"
    },
    {
      "protocol": "web+jnglstore",
      "url": "/shop?for=%s"
    }
  ],
  "icons": [
    {
      "src": "images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
  ],
  "background_color": "#007f87",

  "display": "standalone",
  "start_url": "/",
}

统一资源定位器 \ (URL) 是一种 URI。A uniform resource locator (URL) is a type of URI. 当渐进 Web 应用 \ (PWA) 注册为 https URI 的处理程序时,创建更具吸引力的体验。Create a more engaging experience when Progressive Web Apps (PWAs) register as handlers for https URIs. PBA 可能会请求在激活关联的 URI 时启动。PWAs may request to launch when associated URIs are activated. 例如,如果用户从电子邮件中选择指向新闻文章的链接。For example, if a user chooses a link to a news story from an email message. 用于显示新闻文章的关联 PWA 将自动启动以处理链接的激活。An associated PWA to display news stories is automatically launched to handle the activation of the link.

此功能允许您使用 Web 应用程序清单向浏览器注册 PWA,并声明浏览器处理特定链接。This feature allows you to register a PWA with the browser using the web app manifest and declare that the browser handles specific links. 若要在浏览器中注册 PWA,请向清单 url_handlers 文件添加可选成员。To register a PWA with the browser, add the optional url_handlers member to the manifest file. url_handlers成员是 object[] 一个 ,用于对应用希望处理的 URI 的来源进行分组。The url_handlers member is an object[] that groups the origins of URIs that the app wishes to handle.

浏览器使用位于源上的 web-app-origin-association JSON 文件验证链接处理。Link handling is validated by the browser using a web-app-origin-association JSON file that is located on the origin. 源文件进一步微调源的包含路径或排除路径。The origin file further fine-tunes the included or excluded paths at the origin. 有关测试 URL 处理程序的详细说明,请导航到作为 URL 处理程序的 PWA。For detailed instructions about testing the URL handler, navigate to PWAs as URL Handlers.

若要在 Windows 上的 Microsoft Edge 中预览 URL 链接处理,请导航到"打开实验性功能",然后打开"桌面 PWA URL 处理"。To preview URL link handling in Microsoft Edge on Windows, navigate to Turn on experimental features and turn on Desktop PWA URL Handling.

清单url_handlers示例Example of the url_handlers in the manifest

以下代码段是包含 成员的示例 Web 应用 url_handlers 清单。The following code snippet is an example web app manifest with the url_handlers member.

{
    "name": "Contoso Business App",
    "display": "standalone",
    "icons": [
        {
            "src": "images/icons-144.png",
            "type": "image/png",
            "sizes": "144x144"
        }
    ],
    "capture_links": "existing_client_event",
    "url_handlers" : [
        {
            "origin": "https://contoso.com"
        },
        {
            "origin": "https://conto.so"
        },
        {
            "origin": "https://*.contoso.com"
        }
    ]
}

如果 URI 与 中的一个源字符串匹配,并且浏览器验证源是否同意允许此应用程序处理此类 URI,PWA 将匹配用于 URL 处理的 url_handlers URI。A PWA matches a URI for URL handling if the URI matches one of the origin strings in url_handlers and the browser validates that the origin agrees to allow this app handle such a URI.

成员 url_handlers 包含一个包含请求 PWA 的范围和其他不相关的源的源。The url_handlers member contains an origin that encompasses the scope and other unrelated origins of the requesting PWA. 不将 URI 限制为与请求的 PWA 相同的范围或域,允许您对相同内容使用不同的域名,但使用相同的 PWA 处理它们。Not restricting URIs to the same scope or domain as the requesting PWA allows you to use different domain names for the same content but handle them with the same PWA.

通配符匹配Wildcard matching

使用通配符 \ (* ) 匹配一个或多个字符。Use the wildcard character (*) to match one or more characters.

通配符前缀用于成员的来源字符串中 url_handlers ,以匹配不同的子域。A wildcard prefix is used in origin strings of the url_handlers member to match for different subdomains. 前缀必须针对 *. 此用法。The prefix must be *. for this usage. 使用 https 通配符前缀时将假定此方案。The https scheme is assumed when you use a wildcard prefix.

例如, url_handlers 成员值设置为 *.contoso.com matches 和 tenant.contoso.com www.tenant.contoso.com ,但不匹配 contoso.comFor example, the url_handlers member value is set to *.contoso.com matches tenant.contoso.com and www.tenant.contoso.com, but doesn't match contoso.com.

窗口控件 已安装桌面 Web 应用的覆盖层Window Controls Overlay for installed desktop web apps

若要为桌面安装的 Web 应用创建沉浸式标题栏(如本机应用),"窗口控件覆盖"功能将完成以下操作。 ****To create an immersive title bar like a native app for your desktop installed web app, the Window Controls Overlay feature completes the following actions.

  1. 删除系统保留的标题栏。Removes the system reserved title bar. 它通常跨越客户端框架的宽度。It usually spans the width of the client frame.
  2. 将其替换为覆盖层。Replaces it with an overlay. 它仅包含用户控制窗口本身所需的关键系统所需窗口控件。It contains just the critical system required window controls necessary for a user to control the window itself.

提供覆盖后,可使用整个 Web 客户端区域。After it provides an overlay, the entire web client area is available for you to use. 此功能包括清单更新。This feature includes a manifest update. 它提供用于确定覆盖的大小和位置的方法,以帮助你安排内容。It provides ways for you to determine the size and position of the overlay to help you arrange content.

若要预览适用于 Windows 10 的 Microsoft Edge 中的窗口控件覆盖,请导航到"打开实验性功能"并导航到"桌面 PWA 窗口控件覆盖"。To preview the Window Controls Overlays in Microsoft Edge for Windows 10, navigate to Turn on experimental features and navigate to Desktop PWA Window Controls Overlay.

标题栏区域自定义示例Examples of title bar area customization

此功能基于本机应用中自定义标题栏的功能。This feature is based on the ability in native apps to customize the title bar. 你可以自定义重要应用操作或通知的标题栏。You may customize a title bar for important app actions or notifications. 查看 Microsoft Visual Studio Code 和 Microsoft Teams 的以下示例。Review the following examples for Microsoft Visual Studio Code and Microsoft Teams.

Visual Studio CodeVisual Studio Code

Microsoft Visual Studio Code 是一款基于位于多个桌面平台上的"小程序"构建的热门编辑器。Microsoft Visual Studio Code is a popular editor built on Electron that ships on multiple desktop platforms.

以下示例显示Visual Studio代码如何使用标题栏来最大化可用屏幕空间以在标题栏中包括当前文件名和顶级菜单结构。The following example displays how Visual Studio Code uses the title bar to maximize available screen real estate to include the current file name and top-level menu structure in the title bar.

代码标题栏中Visual Studio示例

Microsoft TeamsMicrosoft Teams

Workplace collaboration and communication tool Microsoft Teams is also built with Teams and available on multiple desktop platforms.Workplace collaboration and communication tool Microsoft Teams is also built with Electron and available on multiple desktop platforms. 在下面的示例中,Microsoft Teams 显示 backforward 导航按钮、搜索框和用户配置文件控件。In the following example, Microsoft Teams displays back and forward navigation buttons, a search box, and user profile controls.

Microsoft Teams 中标题栏的示例

无框架窗口上的覆盖窗口控件Overlay Window Controls on a Frameless Window

为了最大化 Web 内容的可地址区域,浏览器会创建无框架窗口。To maximize the addressable area for web content, the browser creates a frameless window. 无框架窗口删除所有浏览器 UI,但作为覆盖提供的窗口控件除外。A frameless window removes all browser UI, except for the window controls provided as an overlay. 窗口控件覆盖允许用户仍最小化、最大化、还原和关闭应用。The window controls overlay allows users to still minimize, maximize, restore, and close the app. 它还提供对使用 Web 应用菜单的相关浏览器控件的访问。It also provides access to relevant browser controls using the web app menu. 对于基于 Chromium 的浏览器,覆盖层包括以下控件。For Chromium-based browsers, the overlay includes the following controls.

  • 每个窗口控件按钮的宽度和高度相同的可拖动区域A draggable region the same width and height of each of the window control buttons
  • " 设置"和更多 \ (...) 按钮The Settings and more (...) button
  • 窗口控件按钮最小化、最大化、还原和关闭The window control buttons minimize, maximize, restore, and close

除了前面列出的控件之外,覆盖层中显示的 UI 将在以下方案中动态调整大小。Besides the previously listed controls, the UI displayed in the overlay is dynamically resized in the following scenarios.

  • 启动已安装的 Web 应用后,网页的原点会在"设置"和更多**** \ (...) 菜单的左侧显示几秒钟,然后消失。When an installed web app is launched, the origin of the webpage displays to the left of the Settings and more (...) menu for a few seconds and then disappears.
  • 如果用户使用"设置"菜单和更多**** \ (...) 菜单与扩展进行交互,则扩展的图标显示在三点菜单左侧的覆盖中。If a user interacts with an extension using the Settings and more (...) menu, the icon of the extension displays in the overlay to the left of the three-dot menu. 退出任何扩展对话框后,图标将从覆盖层中删除。After you exit any extension dialog, the icon is removed from the overlay.
语言方向Language direction 覆盖位置Overlay location 详细信息Details
从左到右 \ (LTR) Left-to-right (LTR) 客户区域左上角Upper left of the client area 翻转控件The controls are flipped
从右到左 \ (RTL) Right-to-left (RTL) 工作区的右上角Upper right corner of the client area

重要

覆盖始终位于 Web 内容的 Z 索引顶部,并接受所有用户输入,而不会将输入流到 Web 内容。The overlay is always on top of the Z-index of the web content and accepts all user input without flowing it through to the web content.

处理窗口控件覆盖层Working around the Window Controls Overlay

Web 内容必须知道控件覆盖的保留区域。Your web content must be aware of the reserved area for the controls overlay. 确保保留区域不需要用户交互。Ensure the reserved area doesn't expect user interaction. 在浏览器中查询控件覆盖的矩形边界和可见性。Query the browser for the bounding rectangle and visibility of the controls overlay. 该信息通过 JavaScript API 和 CSS 环境变量提供给你。The information is provided to you through JavaScript APIs and CSS environment variables.

JavaScript APIJavaScript APIs

属性 windowControlsOverlay 上的新 window.navigator 对象允许您查询控件覆盖的边框。A new windowControlsOverlay object on the window.navigator property allows you to query the bounding rectangle of the controls overlay.

对象 windowControlsOverlay 具有以下两个对象。The windowControlsOverlay object has the following two objects.

  • getBoundingClientRect() 返回一个 DOMRect 对象。returns a DOMRect object. 对象 DOMRect 表示窗口控件覆盖层下的区域。The DOMRect object represents the area under the window controls overlay.
  • visible 是一个 boolean 值,指示呈现和显示控件覆盖。is a boolean that indicates that the controls overlay is rendered and displayed.

重要

出于隐私原因,Web 内容中的 windowControlsOverlay iframe 元素无法访问 。For privacy reasons, the windowControlsOverlay isn't accessible to iframe elements in the web content.

每当调整覆盖大小时,都会在对象上运行一个事件,以通知客户端 geometrychange navigator.windowControlsOverlay 重新计算内容布局。Whenever the overlay is resized, a geometrychange event runs on the navigator.windowControlsOverlay object to notify the client to recalculate the content layout. 重新计算的内容布局基于覆盖层的新边界矩形。The recalculated content layout is based on the new bounding rectangle of the overlay.

CSS 环境变量CSS Environment Variables

除了 JavaScript API 之外,您还可以使用 CSS 查询控件覆盖的边框。Besides the JavaScript API, you may use CSS to query the bounding rectangle of the controls overlay. 使用以下四个新的 CSS 环境变量完成查询。Use the following four new CSS environment variables to accomplish to query.

  • titlebar-area-x
  • titlebar-area-y
  • titlebar-area-width
  • titlebar-area-height

在 Web 内容中定义可拖动区域Define Draggable Regions in Web Content

用户希望抓取和拖动窗口的上半部分。Users expect to grab and drag the upper region of a window. 若要满足预期要求,请声明 Web 内容的特定部分为可拖动。To accommodate the expectation, declare specific parts of the web content as draggable.
若要指定元素是可拖动的,请使用 WebKit 专有 -webkit-app-region CSS 属性。To specify an element is draggable, use the WebKit-proprietary -webkit-app-region CSS property. CSS 工作组将继续努力标准化 app-region 该属性。The CSS working group continues efforts to standardize the app-region property.

自定义标题栏示例Custom title bar example

以下示例显示新功能如何使用自定义标题栏创建 Web 应用。The following example displays how the new features create a web app with a custom title bar.

Microsoft Teams 中的自定义标题栏示例

manifest.webmanifestmanifest.webmanifest

在清单中,将 display_override array 设置为 window-controls-overlayIn the manifest, set display_override array to window-controls-overlay. theme_color 设置为标题栏的颜色选择。Set the theme_color to your choice of color for the title bar. 在任一项或不受支持时,将显示模式 display_override window-controls-overlay 设置为适当的回退。Set the display mode to an appropriate fallback for when either display_override or window-controls-overlay isn't supported.

以下代码段包括建议的清单更新。The following code snippet includes the recommended manifest updates.

{
  "name": "Example PWA",
  "display": "standalone",
  "display_override": [ 
    "window-controls-overlay" 
  ],
  "theme_color": "#254B85"
}

index.htmlindex.html

以下 ID 表示网页的两个主要区域。The following IDs represent the two main regions of the webpage.

  • titleBarContainer
  • mainContent

ID divtitleBar 的 元素设置为 , draggable 搜索框 input 子元素设置为 nonDraggableThe div element with the titleBar ID is set to draggable and the search box input child element is set to nonDraggable.

<div id="titleBar" class=" draggable">
    <span class="draggable">Example PWA</span>
    <input class="nonDraggable" type="text" placeholder="Search"></input>
</div>

在具有 ID 的 元素中,具有 ID 的 表示标题栏区域中 div titleBarContainer div titleBar 的可见部分。In the div element with the titleBarContainer ID, the div with the titleBar ID represents the visible portion of the title bar area.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Example PWA</title>
    <link rel="stylesheet" href="style.css">
    <link rel="manifest" href="./manifest.webmanifest">
  </head>
  <body>
    <div id="titleBarContainer">
      <div id="titleBar" class=" draggable">
        <span class="draggable">Example PWA</span>
        <input class="nonDraggable" type="text" placeholder="Search"></input>
      </div>
    </div>
    <div id="mainContent"><!-- The rest of the webpage --></div>
  </body>
</html>

style.cssstyle.css

使用 和 设置可拖动和非可拖动 -webkit-app-region: drag 区域 -webkit-app-region: no-dragThe draggable and non-draggable regions are set using -webkit-app-region: drag and -webkit-app-region: no-drag.

.draggable {
    app-region: drag;
    /* Pre-fix app-region during standardization process */
    -webkit-app-region: drag;
}

.nonDraggable {
    app-region: no-drag;
    /* Pre-fix app-region during standardization process */
    -webkit-app-region: no-drag;
}

对于 body 元素,边距设置为 ,以确保标题栏 0 到达窗口的边缘。For the body element, margins are set to 0 to ensure the title bar reaches to the edges of the window.

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
}

titleBarContainerID 使用 position: absolute 并设置 top titlebar-area-inset-top ,将容器附加到网页顶部。The titleBarContainer ID uses position: absolute and sets the top to titlebar-area-inset-top, which attaches the container to the top of the webpage. bottom如果窗口控件覆盖层不可见,则 设置为 并 titlebar-area-inset-bottom 100% - var(--fallback-title-bar-height) 恢复为 。The bottom is set to titlebar-area-inset-bottom and falls back to 100% - var(--fallback-title-bar-height) if the window controls overlay isn't visible. ID 的背景 titleBarContainer 颜色与 theme_color 相同。The background color of the titleBarContainer ID is the same as the theme_color. 宽度设置为 ,以便元素填充网页的宽度,并且当对于连续外观可见时,该元素将流动在 100% div 覆盖层下。The width is set to 100%, so that the div element fills the width of the webpage and flows under the overlay when it's visible for a contiguous appearance.

#titleBarContainer {
    position: absolute;
    top: env(titlebar-area-y, 0);
    bottom: env(titlebar-area-height, calc(100% - var(--fallback-title-bar-height)));
    width: 100%;
    background-color:#254B85;
}

titleBarID 还使用 position: absolutetop: titlebar-area-inset-top ,以将它附加到窗口顶部。The titleBar ID also uses position: absolute and top: titlebar-area-inset-top to attaches it to the top of the window. 默认情况下,它使用窗口的完整宽度。By default, it consumes the full width of the window. 和 边缘分别设置为 和 ,两者在未 left right 设置值 titlebar-area-inset-left titlebar-area-inset-right 0 时回退。The left and right edges are set to titlebar-area-inset-left and titlebar-area-inset-right respectively, both fall back to 0 when the values aren't set. 它还设置 user-select: none 阻止任何尝试拖动占用的窗口,而是突出显示元素中的 div 文本。It also sets user-select: none to prevent any attempts to drag the window consumed instead it highlights text in the div element.

#titleBar {
    position: absolute;
    top: 0;
    display: flex;
    user-select: none;
    height: 100%;
    left: env(titlebar-area-x, 0);
    right: env(titlebar-area-width, 0);
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
}

#titleBar > span {
    margin: auto;
    padding: 0px 16px 0px 16px;
}

#titleBar > input {
    flex: 1;
    margin: 8px;
    border-radius: 5px;
    border: none;
    padding: 8px;
}

ID 的 mainContent 容器也与 固定在一起 position: absolute ,并附加到网页底部。The container for the mainContent ID is also fixed in place with position: absolute and is attached to the bottom of the webpage. height设置为 并 titlebar-area-inset-bottom 回滚以填充 100% - var(--fallback-titlebar-height) 标题栏下方的剩余空间。The height is set to titlebar-area-inset-bottom and falls back to 100% - var(--fallback-titlebar-height) to fill the remaining space below the title bar. overflow-y: scroll 设置 允许内容在容器中垂直滚动。It sets overflow-y: scroll to allow the contents to scroll vertically in the container.

#mainContent {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: env(titlebar-area-height, calc(100% - var(--fallback-title-bar-height)));
    overflow-y: scroll;
}

对于浏览器不支持窗口控件覆盖的情况,添加 CSS 变量以设置标题栏的默认高度。For cases where the browser doesn't support the window controls overlay, a CSS variable is added to set a default height for the title bar. 和 ID 的界限最初设置为填充整个客户端区域,如果覆盖层不受支持,则不需要 titleBarContainer mainContent 更改。The bounds of the titleBarContainer and mainContent IDs are initially set to fill the entire client area, and you don't need to change it if the overlay isn't supported.

以下代码段包括所有建议的 CSS 更新。The following code snippet includes all the recommended CSS updates.

:root {
  --fallback-title-bar-height: 40px;
}

.draggable {
  app-region: drag;
  /* Pre-fix app-region during standardization process */
  -webkit-app-region: drag;
}

.nonDraggable {
  app-region: no-drag;
  /* Pre-fix app-region during standardization process */
  -webkit-app-region: no-drag;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
}

#titleBarContainer {
  position: absolute;
  top: env(titlebar-area-y, 0);
  bottom: env(titlebar-area-height, calc(100% - var(--fallback-title-bar-height)));
  width: 100%;
  background-color:#254B85;
}

#titleBar {
  position: absolute;
  top: 0;
  display: flex;
  user-select: none;
  height: 100%;
  left: env(titlebar-area-x, 0);
  right: env(titlebar-area-width, 0);
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
}

#titleBar > span {
  margin: auto;
  padding: 0px 16px 0px 16px;
}

#titleBar > input {
  flex: 1;
  margin: 8px;
  border-radius: 5px;
  border: none;
  padding: 8px;
}

#mainContent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: env(titlebar-area-height, calc(100% - var(--fallback-title-bar-height)));
  overflow-y: scroll;
}

在操作系统登录时运行Run On OS Login

此功能允许你将应用配置为在用户登录 Microsoft Windows 时自动启动。This feature allows you to configure your app to automatically launch when the user logs into Microsoft Windows. 多个应用类利用此功能。Several classes of apps take advantage of the capability. 应用类包括电子邮件、聊天、监视仪表板和实时数据显示应用。The classes of apps include email, chat, monitoring dashboard, and real-time data display apps. 该功能允许用户在用户登录到操作系统后尽快使用应用。The capability allows a user to engage with the apps as soon as the user logs into the OS. 此功能自动启动 PWA 的方式与手动启动 PWA 的方式相同。This feature automatically starts the PWA the same way it's launched manually.

重要

在操作系统登录上运行 是一 项强大的功能Run on OS Login is a powerful feature. 用户应决定是否为已安装的 Web 应用启用该功能。Users should decide whether to turn on the capability for the installed web app.

打开"在操作系统登录时运行"Turn on Run On OS Login

若要预览 PWA的"在操作系统登录时运行"功能,请导航到"打开实验性功能",然后打开"在操作系统登录时运行桌面 PWA"。To preview the Run On OS Login capabilities for your PWA, navigate to Turn on experimental features and turn on Desktop PWAs run on OS login.

打开在操作系统登录实验上运行的桌面 PBA

打开已安装的 Web 应用的功能Turn on the feature for the installed web app

若要为已安装 Start app when you sign in 的 PWA 启用该功能,To turn on the Start app when you sign in feature for an installed PWA,

  1. 打开 Microsoft Edge。Open Microsoft Edge.

  2. 导航到 edge://appsNavigate to edge://apps.

  3. 将鼠标悬停在你的应用上。Hover on your app.

  4. 打开上下文菜单 \ (右键单击) 然后在登录时选择 "启动应用"。Open the contextual menu (right-click) and then choose Start app when you sign in.

    在 Microsoft Edge 中登录功能时,使用上下文菜单打开开始应用

快捷方式Shortcuts

Shortcuts 是清单文件的一个新增成员。is a new member of the manifest file. 它允许你在 Web 应用中定义指向部件、关键网页或操作的链接。It allows you to define links to parts, key webpages, or actions in your web app. Microsoft Windows 将其集成为 JumplistsMicrosoft Windows integrates it as Jumplists. Jumplist 定义 在下列 UI 元素之一上打开上下文菜单 \ (右键单击) 时出现的弹出菜单。Jumplists define popup menus that appear when you on one of the following UI elements and open a contextual menu (right-click).

  • "开始"菜单上的磁贴A tile on the Start Menu
  • 任务栏上的图标An icon on the Taskbar

当用户调用快捷方式时,用户将导航到该快捷方式的成员 url 指定的地址。When a user invokes a shortcut, the user navigates to the address specified by the url member of the shortcut.

Windows 10 上的 Jumplist 示例

清单文件的快捷方式Shortcuts in the Manifest file

"shortcuts" : [
  {
    "name": "Today's agenda",
    "url": "/today",
    "description": "List of events planned for today"
  },
  {
    "name": "New event",
    "url": "/create/event"
  },
  {
    "name": "New reminder",
    "url": "/create/reminder"
  }
]

快捷方式的属性Properties of shortcuts

以下属性定义每个快捷方式。The following properties define each shortcut.

属性Property 详细信息Details
name 在跳转列表或上下文 菜单上向 用户显示的字符串。A string that is displayed to the user on Jumplists or the contextual menu.
short_name 当空间不足,无法显示快捷方式的完整名称时显示的字符串。A string that is displayed when insufficient space exists to display the full name of the shortcut.
description 一个描述快捷方式用途的字符串。A string that describes the purpose of the shortcut. 它可能会由辅助技术访问。It may be accessed by assistive technology.
url 激活快捷方式时打开的 Web 应用中的 URI。The URI in the web app that opens when the shortcut is activated.
icons 一组表示快捷方式的图标。A set of icons that represents the shortcut.

文件处理File Handling

注册为文件类型处理程序的能力在试验阶段。The ability to register as a file type handler is in the experimentation phase. 你可以指定应用在清单条目中处理的文件类型。You may specify the file types that your app handles in a manifest entry. 在安装过程中,用户的主机操作系统将你的应用注册为列出的文件类型的文件处理程序。During installation, the user's host OS registers your app as a file handler for the listed file types. 确保应用启动代码中存在此功能, launchQueue 并确保它处理文件。Ensure the existence of the feature launchQueue in your apps startup code and that it handles the file.

基于 Chromium 的浏览器正在测试和塑造此功能。Chromium-based browsers are testing and shaping this feature. 有关详细信息(包括代码示例),请导航到"允许 Web 应用程序成为文件处理程序"。For more information including code examples, navigate to Let web applications be file handlers.

若要预览适用于 Windows 10 的 Microsoft Edge 中的文件处理,请导航到打开实验功能,然后打开文件处理 API。To preview file handling in Microsoft Edge for Windows 10, navigate to Turn on experimental features and turn on File Handling API.

提供有关试验功能的反馈Providing feedback on experimental features

提供有关 Microsoft Edge Web 应用实验的反馈。To provide feedback on Microsoft Edge web app experiments.

  • 使用 设置和更多 \ (... ) > 将反馈发送到 Microsoft 发送反馈Send your feedback using Settings and More (...) > Send Feedback to Microsoft.
  • 选择 Alt + Shift + ISelect Alt+Shift+I.

从 PWA 发送反馈