使用 Angular 6 构建 PWA

Desknumber

在本教程中，我们将使用 Angular 6 逐步构建渐进式 Web 应用程序，并使用 Angular CLI v6 实现 PWA 的核心原则。在本教程中，我们将使用最新的 Angular 6 通过实现构建 PWA 的核心原则来构建 PWA。我们将首先创建一个使用 JSON API 的前端 Web 应用程序。

为此，我们将使用 AngularHttpClient模块将 HTTP 请求发 电子邮件营销列表 送到从Simplified JavaScript Jargon GitHub 存储库生成的静态 JSON API。我们还将使用 Material Design 通过 Angular Material 包构建 UI。

接下来，我们将使用 Chrome DevTools 中的“审核”面板 (Lighthouse) 根据 PWA 的核心原则来分析我们的 Web 应用程序。最后，我们将根据 Lighthouse 报告中的“渐进式 Web 应用程序”部分来解释 PWA 功能并将其添加到我们的 Web 应用程序中。



在开始实现 PWA 之前，我们首先介绍一下 PWA 和 Lighthouse。

推荐阅读：Native 和 PWA：选择，而不是挑战者！

什么是 PWA？ 渐进式 Web 应用程序或 PWA 是一种 Web 应用程序，具有一组功能（类似于本机应用程序），可为用户提供类似应用程序的体验。PWA 需要满足我们接下来将看到的一系列基本要求。PWA 与本机应用程序类似，但通过 URL 从 Web 服务器部署和访问，因此我们不需要通过应用程序商店。