通过

PWA 的最佳做法

  • 项目

本文列出了使 PWA 成为用户的绝佳应用程序的最佳做法。 当用户安装应用程序时，他们对这些应用程序可以执行的操作有一定的期望，例如脱机工作、深入集成到操作系统或执行非普通计算任务。

阅读此页上的最佳做法，了解如何使 PWA 的外观与用户预期的外观一样。

此页面假定你已有 PWA。 若要首先了解有关构建简单 PWA 的详细信息，请参阅 PWA 入门。

提供自定义安装

如果按照 PWA 入门中的步骤操作，则可以使用浏览器地址栏中的“应用可用”按钮安装应用。

在应用用户界面中，自定义安装体验对用户更明显，并导致更多的安装。

若要创建自定义安装体验，请使用 beforeinstallprompt 事件并在应用中提供你自己的安装按钮。

若要查看事件的代码示例beforeinstallprompt，检查 PWAmp 演示源代码。 若要测试自定义安装，请打开 PWAmp 演示，然后单击应用中的“ 更多工具 (...) >关于>安装应用 ”。

提交到应用商店

许多用户会在其设备的应用商店中查找你的应用。 从官方应用商店下载可为用户提供可信赖且熟悉的体验。

可以使用 PWA Builder 将 PWA 发布到适用于 Windows 的 Microsoft 应用商店、适用于 iOS 的应用商店或适用于 Android 的 Play Store。

若要了解如何使用 PWA 生成器并发布到Microsoft应用商店，请参阅 将 PWA 发布到 Microsoft Store。

创建出色的应用图标

许多用户在其设备上通过图标找到应用。 为了帮助用户更轻松地找到你的应用，请选择一个可识别的图标，确保它突出，并确保它适应你的应用安装的设备。

在 Windows 上，应用图标显示在许多位置，例如任务栏、“开始”菜单或 Alt+Tab 任务切换器。 提供多种图像大小，以确保应用图标在这些位置易于识别。

若要了解 Windows 上所需的图像大小，请参阅定义图标和主题颜色中的图标图像大小。

使用独立应用窗口

本机应用程序有自己的专用窗口。 PWA 可以定义它们在主机操作系统中的显示方式。

若要在没有浏览器导航用户界面的独立窗口中显示 PWA，请使用 Web 应用清单文件中的 显示 成员，并将其设置为 standalone。

如果应用有多个 HTML 页面，请确保用户可以使用应用中的按钮或链接在页面之间切换。 minimal-ui使用清单成员的值display，让用户使用浏览器在应用标题栏中呈现的上一个按钮和下一个按钮在页面之间切换。

若要创建更沉浸式、更类似于本机的体验， 桌面 PWA 还可以选择隐藏默认操作系统标题栏并改为显示自己的内容。 显示标题栏通常所在的内容可以帮助 PWA 感觉更像本机应用。 许多桌面应用程序（如 Visual Studio Code、Microsoft Teams 和 Microsoft Edge）都已执行此操作。

若要替换标题栏，请参阅 使用窗口控件覆盖在标题栏区域中显示内容。

在操作系统中集成

用户希望已安装的应用程序以某种方式与主机操作系统集成。

你的应用可以使用操作系统集成功能（例如快捷方式、应用之间的共享、坏处、文件处理或链接处理）提供更熟悉、更具吸引力和无缝的体验。

快捷方式

通过快捷方式，可以通过右键单击应用图标来定义指向应用功能的直接链接。

请参阅 定义应用快捷方式 (长按或右键单击菜单) 。

应用程序共享

PWA 可以通过操作系统的共享对话框将内容共享给其他应用，并从其他应用接收内容。

请参阅 与其他应用共享内容。

图标锁屏提醒

PWA 可以在其应用图标上显示状态锁屏提醒，以提醒用户应用中存在新内容。

请参阅使用锁屏提醒、通知和推送消息重新吸引用户中的在应用图标上显示锁屏提醒。

文件处理

可以将 PWA 注册为某些文件类型的文件处理程序。

当用户在操作系统中打开特定文件时，使用 PWA 文件处理程序功能自动启动应用。

请参阅 在 PWA 中处理文件。

注册应用是一个链接或协议处理程序，用于在其他应用程序中使用某些链接时自动启动应用。

请参阅 处理指向 PWA 的链接 和 在 PWA 中处理协议。

部件

实验性功能

创建自己的应用小组件以显示在操作系统小组件仪表板，例如Windows 11小组件板。

请参阅 在 Windows 小组件板中显示 PWA 小组件。

支持脱机方案

连接到慢速或不可靠的网络时，或者即使没有 Internet 访问，通常仍可打开和使用已安装的应用程序。 已安装应用程序的用户希望它们在这些条件下继续工作。 他们还希望应用程序的网络相关部分能够正常处理缺少与自定义消息和本地缓存功能的连接。

若要提高保留率，请将服务辅助角色添加到 PWA。 可以使用服务辅助角色 Fetch 和 Cache API 以及本地数据存储访问，为用户提供良好的脱机体验。

可以通过几个步骤提供良好的脱机体验：

  1. 缓存应用启动、显示内容和允许用户执行最常见任务所需的所有静态资源。
  2. 重定向到无法缓存的页面的自定义脱机页。
  3. 正常处理应用的任务，这些任务不能在没有 Internet 访问的情况下使用。
  4. 实现高级方案，例如让用户下载数据以供脱机查看。

另请参阅：

在本地存储数据

若要为用户提供丰富而快速的体验，请使用 PWA 可用的不同持久性数据存储选项，例如：

  • 缓存存储，用于存储应用的静态资源。
  • 本地和会话存储，用于存储少量用户数据。
  • IndexedDB，用于存储更大的结构化用户数据。
  • 文件系统访问 API，用于将文件存储在磁盘上。

若要了解详细信息，请参阅 在设备上存储数据。

使用高级功能

已安装的应用通常执行网站通常不支持的高级计算方案。

若要提供类似应用的体验，请使用高级 Web 功能，例如：

确保应用最重要的任务可以跨所有浏览器和设备完成。 请参阅 在多个浏览器和设备上测试。

使应用的外观和感觉成为真实的应用

用户在其设备上安装应用以实现特定任务，并且他们对这些任务在用户界面中的呈现方式以及它们在主机操作系统中的集成方式有一定的期望。

若要让用户以熟悉的方式轻松完成应用最重要的任务，请做出设计选择，例如：

  • 不要像网站那样使用大标题区域来导航到其他页面。 请改用菜单隐喻。
  • 不要像网站那样使用大页脚区域来获取更多链接和信息。
  • 使用 system-ui 字体可使内容感觉更原生，并加快加载速度。
  • 使用更少的链接，并且更喜欢更大的命中目标。
  • 使用 首选配色方案 CSS 媒体功能，支持操作系统的浅色和深色主题。
  • background-color在 Web 应用清单中提供 和 theme-color 以自定义应用程序窗口。 请参阅 Web 应用清单。
  • 专注于最重要的任务，对内容进行杂乱处理，并简化用户界面。
  • 通过使用 CSS 网格布局、 CSS 灵活框布局 (flexbox) 、 CSS 媒体查询和 响应式图像，根据设备的外形规格重新组织用户界面。
  • 通过立即注册用户交互来提高感知性能。
  • 如果呈现下一个屏幕需要时间，请考虑使用主干屏幕。 请参阅 使用 CSS 自定义属性生成主干屏幕。

在多个浏览器和设备上测试

使用渐进式Web 应用，可以从一个代码库为所有设备提供应用。 若要确保应用在任何地方都能正常运行，请在多个浏览器、操作系统和设备上对其进行测试。

确保应用最重要的方案随处运行，并逐步增强支持设备上的体验。

若要在多个环境中测试应用，请考虑以下技术：

支持深层链接

若要通过 Web 和社交媒体改进应用的发现和共享，请将应用的每个页面路由到唯一的 URL，并支持 深层链接。

另请参阅

本地：PWA：

本地：DevTools：

MDN：

维基百科：

GitHub：

其他：