使用 Angular CLI 创建渐进式 Web 应用

您想让您的 Angular 应用可安装吗？无需再等待！

Minko Gechev

在这篇文章中，您将学习如何使用 Angular 命令行界面 (CLI) 创建一个 渐进式 Web 应用 (PWA)。

您可以在 GitHub 上找到本指南中的代码示例。

创建一个可安装的 PWA

要使您的 Angular 应用程序成为 PWA，您只需运行一个命令

ng add @angular/pwa

此命令将执行以下操作

  • 创建一个 Service Worker，其中包含默认缓存配置。
  • 创建一个 manifest 文件，该文件告诉浏览器您的应用在用户设备上安装时的行为方式。
  • 在 index.html 中添加指向 manifest 文件的链接。
  • 将 theme-color <meta> 标记添加到 index.html。
  • 在 src/assets 目录中创建应用图标。

默认情况下，您的 Service Worker 应在首次页面加载后的几秒钟内注册。如果未注册，请考虑修改 registrationStrategy。

自定义您的 PWA

使用 Angular Service Worker 进行预缓存 这篇文章解释了如何配置 Angular Service Worker。您可以在其中找到如何指定您希望 Service Worker 缓存哪些资源以及它应该使用什么策略来执行此操作。

应用的 manifest 文件允许您指定应用的名称、简称、图标、主题颜色和其他详细信息。请阅读 添加 Web 应用 manifest 这篇文章，了解您可以设置的完整属性集。

查看 Angular CLI 生成的 manifest 文件

{
  "name": "manifest-web-dev",
  "short_name": "manifest-web-dev",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    …
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

您可以通过更改 manifest.webmanifest 中的相关值来自定义这些属性中的任何一个。

PWA 使用 link 元素在 index.html 中引用其 manifest 文件。一旦浏览器找到引用，它将显示添加到主屏幕提示

A progressive web app install prompt

由于 ng-add 原理图添加了使您的应用可安装所需的一切，它们会生成一些快捷方式图标，这些图标在用户将应用添加到桌面后显示

A progressive web app shortcut icon

在将 PWA 部署到生产环境之前，请务必自定义 manifest 属性和图标！

结论

要创建一个可安装的 Angular 应用

  1. 使用 Angular CLI 将 @angular/pwa 添加到您的项目中。
  2. 编辑 manifest.webmanifest 文件中的选项以适合您的项目。
  3. 更新 src/assets/icons 目录中的图标以适合您的项目。
  4. （可选）编辑 index.html 中的 theme-color。