使用 PWA

您很可能正在用手机或其他移动设备阅读这篇文章。每天都有越来越多的人使用手机上网。这很方便，而且不会改变。移动端不再是未来，而是已经到来，我们必须不断学习新技术，让我们的 Web 应用响应更快。这也是渐进式 Web 应用 (PWA) 日益流行的原因之一。

最棒的是，它们创建起来并不困难，你无需对代码进行大规模修改。此外，你还可以使用许多工具来衡量你的 Web 应用的进步程度。当你将 Web 应用打造为 PWA 时，你将获得一些非常酷炫的功能。本文将快速介绍什么是 PWA，我们为什么要费心打造它们，以及如何在 Angular 中实际打造一个 PWA。

什么是 PWA

渐进式 Web 应用比听起来简单得多。以下列出了推动 Web 应用进步的因素：

• 您的网站遵循 HTTPS 协议
• 这些页面可在移动设备（包括平板电脑）上响应
• 您的网站可跨浏览器运行
• 过渡不应该感觉缓慢
• 应用程序离线时，所有 URL 都会加载
• 有“添加到主屏幕”的元数据
• 首次加载非常快
• 每个页面都有一个 URL

这份清单包含了制作简单 PWA 所需的一切。这些步骤看起来都不难，对吧？这是因为前半部分是你在任何 Web 应用中都应该遵循的最佳实践。如果你想知道，让过渡感觉更快意味着在用户等待页面加载时，给予他们某种反馈，比如加载轮盘。

列表中的其他四件事真正体现了渐进式 Web 应用 (PWA) 的优势。您需要元数据，以便用户能够像应用一样将您的网站保存到主屏幕。我们将使用 manifest.json 文件来实现这一点。您可以使用一些像 Service Worker 一样的缓存功能来实现应用的离线加载。让应用的首次加载速度真正提升，只需要测试和优化代码即可。最后，如果您正在开发单页应用 (SPA)，为每个页面分配一个独立的 URL 可能会比较棘手，但应该不会太难。

现在您知道 PWA 的构成了什么。它是一个遵循最佳实践、支持离线加载且运行速度快的 Web 应用程序。渐进式部分在于，您可以逐步升级现有应用，使其成为 PWA。您很可能已经完成了前四件事，这意味着您已经完成了一半。

为什么要费心去做一个

渐进式 Web 应用 (PWA) 已经成为一个热门词汇，以至于我们很难记住最初为什么关注它们。它们让移动浏览在所有设备上都更像原生应用，而无需额外的代码库。根据您的应用，您可能只需要 PWA 即可，而无需构建移动应用。有些应用不需要极高的性能或权限即可在设备上进行更改，因此 PWA 将是一个不错的选择。

在构建应用时，您可以先将其设置为 PWA，这样就无需再开发原生移动应用了。这正是您费心开发 PWA 的主要原因。一旦您将其设置为响应式，就无需执行太多步骤，而其带来的好处绝对值得您付出额外的努力。

如何制作 PWA

现在，您终于等到了！我们将使用 Angular 7 创建一个非常简单的 PWA。如果您尚未安装 Angular CLI，但想继续操作，请确保在要创建的项目的目录中运行此命令。

npm install -g @angular/cli

然后，您可以通过运行此命令快速创建 Angular 7 应用程序。

ng new client

我通常将前端代码称为“客户端”，但您可以随意命名新应用。Angular 让创建渐进式 Web 应用变得非常简单，就像大多数流行框架一样。您可以运行此命令来使新的 Angular 应用或现有应用具有渐进式 Web 应用的功能。运行此命令之前，请确保您位于根目录中。

ng add @angular/pwa

这为你添加了一些东西。你会得到一个可以编辑的预生成清单文件，一个用于设置 Service Worker 配置的 ngsw-config.json 文件，并且 ServiceWorkerModule 会被导入到应用中，但仅在你进行生产构建时使用。这为你提供了 PWA 清单中的后两项内容！

最后两项取决于你希望如何运行项目。有很多方法可以加速你的应用，比如压缩文件或延迟加载，而 URL 的处理则很大程度上取决于你如何处理路由。这很可能会生成你应用的大部分 URL。

如果你注意到的话，我们无需编写任何额外代码即可将这个新的 Angular 应用转换为 PWA。你只需运行一个 ng 命令，然后就搞定了。一个正常运行的 PWA 就完成了。现在，你可以构建应用并在生产模式下运行，以查看其实际运行情况。查看 PWA 是否正常运行的一个快速方法是检查 Service Worker 是否可用。

您可以在 Chrome 开发者工具中执行此操作，方法是前往“应用程序”选项卡，然后检查“服务工作线程”面板。如果您看到可用的服务工作线程，则表示您的 PWA 已正常运行！现在，您只需像平常一样构建应用，牢记响应式设计，并让其余 Angular 组件流畅运行即可。

当你从一个全新的应用开始开发时，你总是会说开发 PWA 是多么简单。但当你尝试升级一个现有的应用时，事情就会变得复杂起来。这个应用可能响应式，也可能不响应式，可能不支持跨浏览器，或者加载速度可能存在问题。这时你就必须重构代码并更新软件包，这可能会变得很混乱。

更别提 Service Worker 有多奇怪了。你有没有升级过某个应用，比如 Angular 或其他框架，来让它变成 Progressive Web 应用？你有什么有趣的故事或建议可以分享给正在经历这种疯狂过程的人？我建议你首先确保应用能够响应。这很可能花费最多的时间，而且会对用户体验产生巨大的影响。

嘿！你应该在 Twitter 上关注我，理由如下：https://twitter.com/FlippedCoding