创建独立应用程序

渐进式 Web 应用程序 (PWA) 安装在用户设备上后，可以定义其在用户启动时的显示方式。它们可以选择在 Web 浏览器中显示，就像网站一样，或者拥有自己的专用窗口，类似于操作系统原生应用程序的工作方式。

用户往往对安装在设备上的应用程序的行为有特定的期望。其中一项期望是应用程序拥有自己的专用窗口。

通过使用 Web 应用程序清单的 display 成员，您可以定义安装的 PWA 在从用户设备启动时是在浏览器中显示还是拥有自己的专用窗口。

使用独立显示模式

要使用独立显示模式并为您的 PWA 提供自己的专用窗口，请将 display 成员添加到您的 Web 应用程序清单中，并将它的值设置为 standalone

json

{
  "name": "My app",
  "start_url": "/",
  "icons": [
    {
      "src": "icon.webp",
      "sizes": "48x48",
      "type": "image/webp"
    }
  ],
  "display": "standalone"
}

请注意，还有其他显示模式可用，例如 browser、minimal-ui 和 fullscreen。您选择的显示模式会改变向用户显示的浏览器用户界面有多少，从显示全部到拥有自己的专用窗口。要了解有关所有可用显示模式以及它们在不支持时如何回退的更多信息，请参阅有关 display 成员的文档。

最佳实践

处理多页导航

如果您的应用程序是使用多个可导航 HTML 页面构建的，请确保包含用于控制应用程序内导航的 UI 元素。

如果您没有自己的导航元素，请使用 minimal-ui 显示模式以确保用户仍然可以使用浏览器在应用程序标题栏中呈现的上一个和下一个按钮在页面之间跳转。

根据显示模式自定义您的应用程序

当您在 Web 应用程序清单中定义除 browser 之外的显示模式时，它只在应用程序安装时应用。与任何其他网页一样，清单的 display 成员在 PWA 未安装时没有任何作用。您可以在运行时检查显示模式以检测应用程序是否已安装。

使用 CSS display-mode 媒体功能或 Window.matchMedia() JavaScript 功能，您可以根据应用程序的显示模式选择性地应用 CSS 样式或运行 JavaScript 代码。

以下是一个示例，展示了如何使用 @media CSS 规则仅在启用 standalone 显示模式时才显示网页上的元素

css

.app-button {
  display: none;
}

@media (display-mode: standalone) {
  .app-button {
    display: block;
  }
}

在此示例中，.app-button 元素默认情况下将隐藏，除非将显示模式设置为 standalone，这种情况发生在 display 清单成员设置为 standalone 并且应用程序安装在用户设备上时。

以下是一个示例，展示了如何使用 window.matchMedia() 方法来检测是否启用了 standalone 显示模式

function isStandaloneApp() {
  return window.matchMedia("(display-mode: standalone)").matches;
}

另请参阅

Web 应用程序清单.
显示模式.
通过使用窗口控件覆盖 API，自定义您在桌面操作系统上的应用程序标题栏。