第一步
渐进式 Web 应用仍然是网站，但具有增强的功能和特性。它们不依附于特定的技术堆栈，您可以从头开始构建新网站，也可以更新现有网站，而无需彻底改造。在本指南中，您将学习如何创建 PWA 模式的良好实现。以下是一些入门策略
使其可安装
从小处着手！此方法包括从基本清单文件、简单的离线页面以及用于提供离线页面和缓存一些关键 CSS 和 JavaScript 的 Service Worker 开始。借助关键 CSS 和 JavaScript 缓存，您将使现有的 Web 应用准备好离线工作，同时提高其性能。
专注于一项功能
选择一项新功能（例如推送通知或文件处理），这将对您的用户或您的业务产生重大影响。这将使您能够浅尝 PWA 的滋味，而无需一次进行太多更改。
构建一个简单版本
采用应用程序的现有部分或特定的用户旅程，例如视频播放或登机牌访问，并使其作为从前端到后端的离线优先 PWA 工作，可以是独立的，也可以在上下文中工作。这允许进行低风险实验，使您能够为用户重新思考 PWA 的体验。
从头开始
如果您正在进行网站的重新设计或可以从头开始，则此策略非常有意义。与其他策略相比，它使您可以更轻松地构建 PWA 设计模式，特别是允许您从一开始就利用 Service Worker 的所有功能。
升级商店应用
借助将 PWA 发布到应用商店的能力，可以将 PWA 包装到 PWA 启动器中并将其上传到商店，例如 Google Play 商店或 Windows 商店。如果您有现有的特定于平台的应用，则可以用商店中发布的 PWA 替换它。
使用此方法，您现有的用户可以将其体验升级到 PWA，新用户仍然可以从浏览器或应用商店使用或安装您的 PWA。并且，您将拥有一个适用于所有人的应用，从而节省成本、时间和改善用户体验。
PWA 清单
渐进式 Web 应用是一个网站，这引出了一个问题：它何时成为渐进式 Web 应用？答案并非如此简单，因为 PWA 概念并非指特定的技术或堆栈，PWA 而是一种包含各种技术组件的模式。
虽然在所有浏览器之间没有独特的规则，但有一组建议，称为渐进式 Web 应用清单，可帮助您创建用户会喜欢的 PWA。
核心要求
由于 PWA 跨越从移动设备到桌面设备的所有设备，因此核心渐进式 Web 应用清单是关于您需要做什么才能使您的应用对于所有用户（无论屏幕尺寸或输入类型如何）都可安装且可靠。
核心要求是
启动快速，保持快速
性能在任何在线体验的成功中都起着重要作用，因为与性能较差的网站相比，高性能网站更能吸引和留住用户。网站应专注于优化以用户为中心的性能指标。
在任何浏览器中均可运行
渐进式 Web 应用首先是 Web 应用，这意味着它们需要在跨浏览器工作，而不仅仅是在其中一个浏览器中工作。但是，在所有浏览器中的体验不必完全相同。可能会有一些浏览器不支持的功能，但会有回退来确保良好的体验。
对任何屏幕尺寸均具有响应性
用户可以在任何屏幕尺寸上使用您的 PWA，并且所有内容在任何视口尺寸下都可用。
提供自定义离线页面
当用户离线时，将他们留在您的 PWA 中比回退到默认浏览器离线页面提供了更无缝且类似原生的体验。
可安装
安装应用或将应用添加到主屏幕的用户往往会更多地使用这些应用，并且当 PWA 安装后，它可以利用更多功能来获得更好的用户体验。
最佳 PWA 特性
要创建一个真正出色的渐进式 Web 应用，一个感觉像是同类最佳的应用，您需要的不仅仅是核心清单。最佳渐进式 Web 应用清单是关于使您的 PWA 感觉功能强大且可靠，同时利用 Web 的强大功能。
提供离线体验
通过允许用户在离线时使用您的 PWA，您将为他们创造真正的类似应用的体验。通过识别那些不需要连接的功能来做到这一点，以便用户可以访问至少某些功能。
完全无障碍
确保屏幕阅读器可以理解应用程序的所有内容和交互，仅使用键盘即可操作，焦点已指示，并且颜色对比度强。通过使您的 PWA 具有无障碍功能，您可以确保每个人都可以使用它。
在可用时使用强大的功能
从推送消息、WASM 和 WebGL 到文件系统访问、联系人选择器以及与应用商店的集成。用于创建功能强大、深度集成的 PWA 的工具就在这里，让您可以创建以前为平台应用保留的、功能齐全的用户体验，您的用户可以随身携带。
可通过搜索发现
超过一半的网站流量来自自然搜索。确保内容存在规范网址，并且搜索引擎可以为您的网站编制索引对于用户找到您的 PWA 至关重要。
适用于任何输入类型
用户应该能够在使用您的应用程序时在输入类型之间无缝切换，并且输入方法不应依赖于屏幕尺寸。
为权限请求提供上下文
仅在提供上下文理由以提高用户接受提示的机会后，才触发通知、地理位置和凭据等权限的提示。
遵循健康代码的最佳实践
保持应用程序的最新状态和代码库的健康状况使您可以更轻松地交付满足本清单中概述的其他目标的新功能。