桌面版渐进式 Web 应用 (PWA) 是一种出色的跨平台、跨浏览器应用构建方式，其安全模型以用户安全和隐私为中心，并可利用 Web 固有的链接功能实现内置分享。使用现代 API 构建新的 Web 应用或增强现有 Web 应用，使其具有桌面应用般的功能、可靠性和可安装性。PWA 是为 ChromeOS 提供 Web 应用的最佳方式。
在 ChromeOS 上，Web 平台的强大功能是核心；Web 应用是核心平台功能。安装的 PWA 会显示在 ChromeOS 启动器中，可以固定到功能区，并与操作系统的其余部分深度集成。
首先，请查看 PWA 清单，确保您的 Web 应用通过核心 PWA 清单。您可以使用 PWABuilder 帮助您提供自定义离线网页并使您的应用可安装。然后，根据这些建议让您的 PWA 在 ChromeOS 上大放异彩。
使其可安装
与常规 Web 应用相比，PWA 的一大优势在于它们可以像传统的桌面应用一样安装。web.dev 上的“渐进式 Web 应用”路径中有一个专门介绍如何让 PWA 可安装的部分；您可以从该部分开始学习。为了让 PWA 在 ChromeOS 上被识别为可安装，必须满足以下条件，您可以使用 Lighthouse 的可安装性审核来检查这些条件：
图标是 PWA 身份的重要组成部分，因此请确保它们有趣且独特；它们甚至可以包含透明度！由于 PWA 具有一个可在所有平台上共享的代码库，因此您应确保拥有可遮盖的图标。请确保您还包含普通图标，以用于不支持可遮盖图标的操作系统。
PWA 可安装后，现在会显示在 ChromeOS 的各个位置，从启动器到搁架。安装 PWA 后，您还可以使用一些额外的功能，让您的应用大放异彩。
关于离线工作的注意事项
只需让应用可安装，即可在可发现性、易用性和功能方面获得诸多优势。让 PWA 可安装并不意味着整个体验都必须离线运行。不过，为了让已安装的 Web 应用感觉像传统应用，它应该具有某种形式的离线功能。一个基本的自定义离线网页就足以入门；用户希望已安装的应用在连接状态发生变化时不会崩溃。正如传统应用在离线时绝不会显示空白页面一样，PWA 也绝不应显示浏览器默认的离线页面。自定义离线网页可以包含各种内容，例如一条消息，告知用户需要连接到游戏才能消磨时间，直到他们重新连接为止。为未缓存的网页或需要连接的功能提供这种自定义离线体验，有助于弥合用户体验应用差距。
您可以在服务工作线程的 install 事件期间创建一个简单的离线网页，方法是预缓存所需的网页以供日后使用，并在用户离线时使用该网页进行响应。您可以参考我们的自定义离线网页示例，了解此功能的实际应用，并学习如何自行实现此功能。
如果您想提供更强大的体验，除了 Cache Storage API 之外，您还可以使用 IndexedDB 等功能进行浏览器内 NoSQL 存储，并使用后台同步功能，让用户能够在离线时执行操作，并在用户重新建立稳定连接后延迟服务器通信。您还可以实现安全的长效会话等模式，以保持用户身份验证状态；实现骨架屏，以便快速告知用户您正在加载内容，如果需要，可以回退到缓存内容或离线指示器。
让内容可触控
几乎所有 ChromeOS 设备都支持触控，许多设备还支持触控笔，因此您需要确保应用不仅能与常规键盘和鼠标无缝协作，还能与触控和触控笔输入无缝协作。指针事件 API 专门用于处理这种情况！您可能无需更改一些基本的指针相关事件，例如 click 事件。其他事件（例如 mouseup 或 touchstart）应迁移到相应的指针事件，以便它们在任何类型的指针上都能顺畅运行。您甚至可以根据需要单独管理不同类型的输入源。对于严重依赖触控用户输入的应用和游戏，改用指针事件 API 将会给 ChromeOS 设备带来巨大变化。
在网页上流畅地绘制
如果您正在开发一款让用户使用手指或触控笔进行绘制的应用，那么如何让输入与输出之间的延迟足够短，从而让用户感觉流畅，一直以来都是一个难题。为 ChromeOS 构建此类由 Canvas API 提供支持的应用时，我们建议使用 canvas.getContext() 的 desynchronized 提示来提供低延迟渲染。如需为画布使用 desynchronized 提示，请执行以下操作：
const canvas = document.createElement('canvas'); // or select one from the DOM const ctx = canvas.getContext('2d', { desynchronized: true, // Other options here… }); if (ctx.getContextAttributes().desynchronized) { // Low-latency supported! Do something awesome with it. } else { // Low-latency not supported! Fall back to less awesome stuff }
触摸功能的设计注意事项
在设计 Web 应用时，请务必考虑触控和触控笔支持。您可能认为理所当然的互动（例如悬停）对于其他输入法来说效果不佳，甚至根本无法实现。以下是设计适合触控和触控笔的界面时应牢记的一些最佳实践：
- 请勿根据屏幕尺寸来假设输入。请改用功能检测（最好在输入时进行），以确定如何响应。请注意，在 ChromeOS 上，用户可以在一个会话中无缝切换使用鼠标、触控和触控笔。
- 确保您希望用户触控的元素的最小目标尺寸足够大，以免用户意外触碰到周围的元素。
- 将悬停视为渐进增强，并确保可以通过其他方式（例如长按或点按）使用触控和触控笔完成互动。
- 触控用户希望能够直接与屏幕上的元素互动，例如在地图上使用双指张合手势进行缩放，而不是使用放大/缩小按钮。在适当的情况下添加常见触控手势，可让您的应用更具自然感。
让设备更智能
虽然某些 PWA 功能广为人知，例如可让 Web 应用接收和发布平台通知的 Notifications API，但还有许多新的和即将推出的功能将登陆 Web，让您的应用如虎添翼。Chromium Web Capabilities 项目（也称为 Project Fugu 🐡）旨在实现新的强大 Web 标准，同时保留 Web 的独特之处：以用户为中心的安全、低摩擦和跨平台兼容性。
注意：这些功能处于不同的完成状态，从正在考虑中到已发布不等，并且可能仅面向桌面设备或移动设备，而非同时面向两者。虽然 ChromeOS 用户可能会在桌面版功能推出时立即使用，但跨平台支持（即使是 ChromeOS 中的稳定支持）有时可能需要数年时间才能实现。