渐进式 Web 应用 (PWA) 是一种 构建网站的新方式，但它们真的那么新吗？PWA 的基本原理来自较旧的应用程序设计策略，例如渐进增强、响应式设计、移动优先等。渐进式 Web 应用将这些经过验证的技术与一组新的 API 和其他功能整合在一起，统称为一个术语；2018 年可能是 *PWA 之年*。

在 MDN Web Docs 上，您会找到一套为所有有兴趣查看的人发布的 PWA 核心指南。作为一名游戏开发者，我忍不住在系列中加入了一个与游戏开发相关的示例。 js13kPWA 是我的网站，它列出了 A-Frame 类别 中的所有条目，这些条目来自 js13kGames 2017 竞赛。

当用户使用支持的移动浏览器访问 PWA 时，它应该显示一个横幅，表明可以将应用程序作为 PWA 安装

它仍然 *仅仅* 是一个像其他任何网站一样的网站，因此您可以尝试它，无需任何额外的步骤。 源代码在 GitHub 上提供，您也可以 在线查看。

目前有五篇 PWA 核心指南 文章

• PWA 简介
• 应用程序结构
• 使用 Service Worker 离线工作
• 安装到主屏幕
• 通过通知和推送重新参与.

渐进式 Web 应用简介

本系列的第一篇文章介绍了渐进式 Web 应用：定义什么是 PWA，是什么让应用程序具有渐进性，是否值得构建以及它相对于普通 Web 应用的优势。

您可以查看浏览器支持情况，并检查 js13k PWA 示例 - 其内容的实现将在后续文章中解释。

渐进式 Web 应用结构

现在您已经了解了 PWA 背后的理论，您可以查看实际应用程序的推荐结构。本文介绍了服务器端渲染和客户端渲染之间的区别，展示了如何将两者混合使用，并解释了如何使用您喜欢的任何方法构建 PWA。

应用外壳 概念是构建应用程序结构最流行的方法。通过设计，遵循可链接、渐进和响应的规则非常重要。我们还简要讨论了 Streams API 如何在不久的将来帮助实现更快的渐进加载。

使用 Service Worker 使 PWA 离线工作

本文详细介绍了使用 Service Worker 实现离线功能，解释了离线优先方法，并探讨了为什么 PWA 中的“渐进”很重要。

然后，我们检查 js13kPWA 源代码以了解如何注册 Service Worker 以及它的生命周期是什么样的，详细解释了安装、激活和更新，以及如何清除缓存（如果需要）。

如何使 PWA 可安装

第四篇文章描述了如何在支持移动浏览器的移动设备上安装 PWA，以便应用程序可以像原生应用程序一样使用。

如果用户单击按钮，将会有一个额外的步骤显示应用程序的外观。确认后，应用程序将安装到主屏幕

本节回顾了基本要求、清单文件的内容、添加到主屏幕功能和启动画面配置。

如何使用通知和推送使 PWA 重新参与

核心指南中的最后一篇文章提供了一种与用户保持联系的方法。Push API 和 Notifications API 都可以帮助实现此目标 - 第一个可以在新内容可用时提供新内容，而另一个则用于向用户显示其详细信息。

到目前为止，我们一直使用从无后端 GitHub Pages 提供服务的 js13kPWA 来阐释关键的 PWA 概念，但 Push API 需要服务器端才能工作。因此，我从 Service Workers Cookbook 中获得了 Push Payload Demo 示例，并对其进行了详细解释：订阅、获取 VAPID 密钥以及发布和接收内容。

结论

我希望这些摘录激发了您的兴趣。立即深入内容，了解如何在您的应用程序中实现 PWA 功能。其带来的好处远远超过使您的应用程序更具吸引力所花费的努力。

在未来几年，我们可能会忘记 PWA 这个术语，因为它将成为构建交互式网站的主要技术。现在务必学习如何有效地做到这一点。正如响应式网页设计方法现在是构建移动优化的网站的标准一样，PWA 技术正朝着成为未来标准的方向发展。