渐进式 Web 应用程序 (PWA)是一种传统的 Web 应用程序,它使用开放式 Web 技术逐步增强,以确保它根据可用功能在每台设备上提供最佳体验。
渐进式增强是一种设计理念,强调开发人员的内容优先体验
- 确保有基准体验,以便用户可以从任何设备(即使是使用旧版浏览器的设备)消费核心内容。
- 检测是否存在更新的功能(例如,在现代浏览器、更新的设备上)并增强这些设备的使用体验。
渐进式Web Apps 利用开放式 Web 技术(如 Service Workers、HTTPS、Web App Manifest、推送通知和其他 Web API 和功能)来检测和调整体验以适应平台上的可用功能。
- 在较旧的设备和浏览器上 - 可能检测不到任何新内容,它提供了基准网站体验。
- 在较新的设备上——它可以检测设备外形尺寸并提供与特定平台行为一致的响应式体验。
- 在现代浏览器上 - 它可以检测对 Service Worker 和 Web App Manifest 的支持,并使用它们来解锁和支持可安装性和离线操作等功能- 就像特定于平台的应用程序一样。
随着平台的发展,以及更多平台向右移动(在功能支持方面),PWA 开发将成为在最广泛的设备上提供可扩展体验的关键。
PWA Studio 是一个Vscode扩展插件,它将构建 PWA 所需的一切带到VSCode中。安装 PWA Studio时,您可以:
- 使用 PWABuilder pwa-starter 在几秒钟内开始构建新的 PWA。
- 了解如何使用Azure 静态 Web 应用将应用发布到 Web
- 将 Web App Manifest 和 Service Worker 添加到现有的 Web 应用
- 为 Microsoft Store、Google Play 和 Apple App Store 打包 PWA
- 为你的 PWA 生成图标
- 验证您的 PWA 是否可安装在浏览器中并准备好发布到应用商店
- 详细了解如何使用 Web App Manifest 在 PWA 中启用新功能
- 使用代码片段来实现特定于平台的功能,这些功能可以改善 PWA 的用户体验。
这就是我们如何使用新的 PWA Studio VSCode 扩展和 PWA Starter 开始构建 PWA,只需单击几下按钮!