创建独立应用

使用独立显示模式

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

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

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

最佳实践

处理多页面导航

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

如果您没有自己的导航元素，请使用 minimal-ui 显示模式，以确保用户仍然可以通过浏览器在应用程序标题栏中渲染的前进和后退按钮在页面之间切换。

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

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

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

以下示例展示了如何使用 @media CSS at-rule 仅在启用了 standalone 显示模式时显示网页上的元素。

.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 应用清单.
• 显示模式.
• 使用 Window Controls Overlay API 自定义桌面操作系统上应用的标题栏。