渐进式网络应用程序（Progressive Web Apps，简称 PWAs）可以安装在设备上，也可以像传统网站一样在网络浏览器中使用。这意味着 PWAs 需要能够适应不同的环境和不同的用户期望。本文提供了一系列最佳实践，以帮助你确保你的 PWA 尽可能出色。
适配所有浏览器
你的 PWA 基于网络技术。这意味着，除了可以安装在设备上之外，PWAs 也可以在网络浏览器中运行。为了确保兼容性，在各种浏览器和操作系统上测试你的应用程序至关重要。
考虑你的用户可能使用的各种浏览器，并迎合广泛的潜在用户群体。使用功能检测可以为最广泛的受众提供可用的体验。
功能检测还有助于渐进增强，这是一种设计理念，可以为尽可能多的用户提供出色的体验。
通过渐进增强，你首先专注于使用最简单的技术使你的应用程序的核心功能普遍适用，然后为支持的设备增强体验。
例如，使用 HTML 的
<form>元素处理表单提交意味着表单将在所有浏览器上都能工作，包括那些不支持 JavaScript 的浏览器。然后，你可以通过添加客户端验证和基于 JavaScript 的提交处理来逐步增强表单，以便在兼容设备上获得更好的体验。适配所有设备
与在各种浏览器上测试你的应用程序的重要性类似，在不同设备上进行测试可以确保你的应用程序能够被最广泛的受众访问。
响应式设计对于 PWAs 至关重要，以确保内容在任何屏幕尺寸上都可访问。用户应该能够在任何设备的屏幕尺寸下访问所有功能和内容。通过在不同的视口大小下重新排列内容，你可以优先考虑重要的数据和操作。
确保用户无论如何访问你的内容都能与你的应用程序进行交互。支持键盘和鼠标，以及触摸或手写笔输入方法。确保你的应用程序的所有功能都可以通过任何输入方法访问。
最后，使用语义 HTML 元素，而不是重新创建自己的按钮或表单元素，因为语义 HTML 元素开箱即用就支持所有用户输入方法。
提供离线体验
安装的应用程序的用户期望它们始终能工作，即使连接到缓慢或不可靠的网络，或者设备完全离线时也是如此。
自定义离线页面
至少，你的 PWA 应该提供一个自定义的离线页面，通知用户他们处于离线状态，而不是显示通用的浏览器错误页面。自定义离线页面在不同的浏览器和设备上提供更一致的体验，并让用户与你的应用程序保持互动。
你可以通过使用服务工作者拦截网络请求，并在用户离线时用自定义离线页面响应，来提供自定义离线页面。
离线操作
为了更进一步并提供类似应用程序的体验，你的 PWA 应该在用户离线时也能运行。这意味着用户即使在离线时也可以继续使用你的应用程序的一些（最好是全部）功能。
考虑以下场景：用户撰写一封长邮件并点击 “发送”，却没有意识到他们已经失去了网络连接。因为你的应用程序可以离线工作，所以邮件将被本地保存，并在设备重新上线时自动发送。
了解更多关于离线和后台操作的信息。
支持深度链接
深度链接是指向你的应用程序域内特定页面的超链接。例如，你的应用程序的主页可能在
https://example.com/，但你也可以链接到特定的产品页面https://example.com/products/123。通过唯一 URL 引用任何资源的能力是网络最强大的功能之一。因为 PWAs 是基于网络技术构建的，所以它们可以并且应该利用这个功能。
通过唯一 URL 使你的应用程序的不同部分可用，允许用户书签、直接导航到并分享你的应用程序内的特定内容。它还允许搜索引擎索引你的应用程序的内容，并通过网络搜索使其可被发现。
速度更快
用户对安装的应用程序的期望与对网站的期望不同。用户预计网站在加载和导航时需要时间，特别是在网络连接不佳的情况下。然而，他们期望安装的应用程序始终快速且响应迅速。
你的应用程序加载和执行其核心功能的速度在用户参与度和留存率方面起着关键作用。你的应用程序响应的时间越长，用户就越有可能放弃它。
有一些工具、API 和最佳实践可以帮助测量和提高性能。要了解更多信息，请参阅网络性能。
可访问性更强
可访问性对于确保每个人都能使用你的应用程序至关重要，无论个人的能力如何，或者他们用于访问你的应用程序的设备是什么。可访问性确保尽可能多的人可以使用你的应用程序。可访问性也是法律要求的。此外，可访问性通常会为每个人带来更好的用户体验，而不仅仅是那些有永久性或暂时性残疾的人。
提供类似应用程序的体验
与操作系统集成
用户期望安装的 PWAs 像任何安装的特定平台应用程序一样运行。为了提供用户期望的类似应用程序的体验，以某种方式将你的应用程序与操作系统集成。例如：
使用通知 API 向用户的设备发送通知。
使用文件处理程序网络应用清单成员处理文件。
在应用程序图标上显示徽章。
启用应用程序之间的数据共享。
许多网络应用清单成员可以用于自定义你的应用程序在用户设备上的显示方式，并更深入地集成到操作系统中。
应用程序的外观和感觉
用户安装应用程序是为了获得比从网站上获得的更专注的体验，并更高效地完成任务。他们期望应用程序更加精简，减少杂乱，并专注于最重要的任务。
通过考虑以下准则确保你的 PWA 提供类似应用程序的体验：
-
使用独立显示模式为你的应用程序提供自己的专用窗口。
-
定义你的应用程序图标。
-
使用 “prefers-color-scheme” 媒体功能检测用户的首选主题，并相应地调整你的应用程序的主题。
-
自定义你的应用程序的主题和背景颜色，以提供更精致的体验，感觉更像特定平台的应用程序。
-
清理内容并专注于你的应用程序让用户完成的最重要的任务。这可能意味着删除传统网站上常见的大标题和页脚，并用菜单隐喻代替它们。
-
使用 “font-family” 使你的内容感觉更像平台原生内容，并在不需要用户下载自定义字体的情况下更快地加载。“system-ui”
结论
PWA 的潜力巨大，并且在很大程度上仍未被充分开发。随着互联网连接变得更加无处不在，移动设备继续普及，对无缝、与平台无关的应用程序的需求只会增长，PWA 或将在未来长期处于独特需求的位置。
在 PWA 的发展道路上，企业若想快速实现优质的 PWA 应用，提升用户体验并推动业务增长，不妨考虑 ROIBest（roibest.com）。ROIBest 作为安卓 PWA 永久包开创者，其专业团队致力于提供卓越的 PWA 解决方案，为企业量身定制最适合的 PWA 方案，助力企业在 PWA 时代抢占先机，实现业务的飞跃发展。
