开始使用

初始步骤

渐进式 Web 应用仍然是网站，具有增强的特性和功能。它们未关联到特定的技术栈，您可以从一个新网站从头开始，或者对现有网站进行更新，而无需全面翻新。在本指南中，您将学习如何创建 PWA 模式的良好实现。下面列出了一些可帮助您顺利上手的策略：

从小处着手！此方法包括从基本的清单文件、简单的离线网页以及用于提供离线网页并缓存一些关键的 CSS 和 JavaScript 的 Service Worker 开始。得益于关键的 CSS 和 JavaScript 缓存，您现有的 Web 应用将可以离线工作，同时提升其性能。

选择一项会显著影响您的用户或业务的新功能，例如推送通知或文件处理。这样，您就无需一次性更改过多内容，就可以深入探索 PWA 了。

以应用的现有部分或特定用户体验历程（例如视频播放或访问登机牌）的形式，使其作为离线优先的 PWA 前后对比（独立或情境）。这让您可以进行低风险实验，让您能够重新思考用户使用 PWA 的体验。

如果您要重新设计网站，或者可以从头开始设计，此策略非常合适。与其他策略相比，借助该模式，您可以更轻松地构建 PWA 设计模式，尤其可让您从一开始就充分利用 Service Worker 的所有功能。

借助将 PWA 发布到应用商店的功能，您可以将 PWA 封装到 PWA 启动器中，并将其上传到 Google Play 商店或 Windows 商店等商店。如果您已有平台专用应用，可以将其替换为应用店发布的 PWA。

通过这种方法，现有用户将升级到 PWA 体验，并且新用户仍然可以通过浏览器或应用商店使用或安装您的 PWA。此外，您还能为所有人打造一款应用，从而节省成本、节省时间并改善用户体验。

渐进式 Web 应用是一个网站，这会引出一个问题：何时会成为渐进式 Web 应用？答案并不是那么简单，因为 PWA 概念不是指特定技术或堆栈，而 PWA 是一种包含各种技术组件的模式。

虽然所有浏览器都没有独特的规则，但有一组名为渐进式 Web 应用核对清单的建议可帮助您打造用户喜爱的 PWA。

由于 PWA 覆盖所有设备（从移动设备到桌面设备），因此核心的渐进式 Web 应用核对清单可帮助您了解如何确保所有用户（无论屏幕尺寸或输入类型如何）都能安装您的应用且可靠。

核心要求包括：

性能对任何在线体验的成功都起着至关重要的作用，因为与效果不佳的网站相比，效果较好的网站能更好地吸引并留住用户。网站应专注于针对以用户为中心的效果指标进行优化。

渐进式 Web 应用首先是 Web 应用，这意味着它们需要跨浏览器运行，而不仅限于某种浏览器。不过，您无需在所有浏览器中获得相同的体验。有些功能可能无法在单个浏览器中实现，而提供了后备选项，以确保良好的体验。

用户可以在任何尺寸的屏幕上使用您的 PWA，并且所有内容在任何视口尺寸下都可以显示。

当用户离线时，将其保留在 PWA 中，与回退到默认浏览器离线页面相比，能提供更顺畅、更接近原生体验的体验。

在主屏幕上安装或添加应用的用户更容易与这些应用互动，而当安装 PWA 时，它可以利用更多功能来提供更好的用户体验。

若要打造真正出色的渐进式 Web 应用（让人感觉像是一流的应用），您不仅需要核心核对清单，最佳的渐进式 Web 应用核对清单是指如何让您的 PWA 感觉强大且可靠，同时充分利用网络的强大功能。

通过允许用户在离线状态下使用您的 PWA，您可以为他们打造类似应用的真实体验。为此，您需要识别那些不需要连接的功能，这样用户至少可以使用部分功能。

确保应用的所有内容和交互都可以被屏幕阅读器理解，仅通过键盘即可使用，焦点明确指示并且色彩对比度很高。让您的 PWA 可访问，以确保所有人都能使用它。

从推送消息传递、WASM 和 WebGL，到文件系统访问、联系人选择器以及与应用商店的集成。我们提供用于创建功能强大、深度集成的 PWA 的工具，让您能够打造功能齐全的用户体验，这种体验之前是平台应用所独有的，您的用户无论身在何处，都可以随身携带。

超过一半的网站流量来自自然搜索。确保内容存在规范网址且搜索引擎可以将您的网站编入索引，这对于用户找到您的 PWA 至关重要。

使用您的应用时，用户应该能够在各种输入类型之间无缝切换，并且输入法不应取决于屏幕尺寸。

只有在提供上下文理由以提高用户接受提示的几率后，才触发针对权限（如通知、地理定位和凭据）的提示。

通过及时更新应用并保持代码库的良好状态，您可以更轻松地提供新功能，以实现此核对清单中列出的其他目标。