版本：v8

Angular 中的渐进式 Web 应用

将您的 Angular 应用变成 PWA

PWA 的两个主要要求是服务工作者和 Web 清单。虽然可以手动将这两个都添加到应用程序中，但 Angular 团队有一个 @angular/pwa 包，可用于自动化此过程。

@angular/pwa 包将自动将服务工作者和应用程序清单添加到应用程序中。要将此包添加到应用程序中，请运行

ng add @angular/pwa

添加此包后，运行 ionic build --prod，www 目录将准备作为 PWA 部署。

注意

默认情况下，@angular/pwa 包附带 Angular 徽标作为应用程序图标。请务必更新清单以使用正确的应用程序名称，并替换图标。

注意

服务工作者和许多 JavaScript API（例如地理位置）等功能需要应用程序在安全上下文中托管。通过托管服务部署应用程序时，请注意，HTTPS 将需要充分利用服务工作者。

服务工作者配置

添加 @angular/pwa 后，将在项目的根目录中创建一个新的 ngsw-config.json 文件。此文件负责配置 Angular 服务工作者机制如何处理缓存资产。默认情况下，将提供以下内容

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
      }
    }
  ]
}

这里有两个部分，一个用于应用程序特定资源（JS、CSS、HTML），另一个用于应用程序按需加载的资产。根据您的应用程序，这些选项可以自定义。有关更详细的指南，请阅读 Angular 团队的官方指南。

部署

Firebase

Firebase 托管为渐进式 Web 应用提供了许多好处，包括由于 CDN 而带来的快速响应时间、默认情况下启用的 HTTPS 以及对 HTTP2 推送的支持。

首先，如果没有，请在 Firebase 中创建项目。

接下来，在终端中，安装 Firebase CLI

npm install -g firebase-tools

注意

如果这是您第一次使用 firebase-tools，请使用 firebase login 命令登录您的 Google 帐户。

安装完 Firebase CLI 后，在您的 Ionic 项目中运行 firebase init。CLI 会提示

“您想为该文件夹设置哪些 Firebase CLI 功能？” 选择“托管：配置用于 Firebase 托管的文件，并（可选）设置 GitHub Action 部署”。

创建一个新的 Firebase 项目或选择一个现有的项目。

“选择该目录的默认 Firebase 项目：” 选择您在 Firebase 网站上创建的项目。

“您想将什么用作您的公共目录？” 输入“www”。

注意

回答下一个问题将确保路由、硬刷新和深度链接在应用程序中正常工作

“将应用程序配置为单页应用程序（将所有 URL 重写为 /index.html）？” 输入“是”。

“文件 build/index.html 已经存在。覆盖？” 输入“否”。

“使用 Github 设置自动构建和部署？” 输入“是”。

“您想为哪个 GitHub 存储库设置 Github 工作流？” 输入您的项目名称。

“设置工作流以在每次部署之前运行构建脚本？” 输入“是”。

“每次部署之前应运行哪个脚本？” 输入 npm ci && npm run build。

“在合并 PR 时，将您的网站实时频道设置为自动部署？” 输入“是”。

“与您的网站实时频道关联的 get hooked 分支的名称是什么？” 输入您项目的“主”分支名称。

将生成一个 firebase.json 配置文件，用于配置应用程序部署。

最后需要确保正确设置了缓存头。为此，请将 headers 代码段添加到 firebase.json 文件中。完整的 firebase.json 如下所示

{
  "hosting": {
    "public": "www",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "ngsw-worker.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]
  }
}

有关 firebase.json 属性的更多信息，请参阅 Firebase 文档。

接下来，通过运行以下命令构建应用程序的优化版本

ionic build --prod

最后，通过运行以下命令部署应用程序

firebase deploy

完成后，应用程序将上线。

将您的 Angular 应用变成 PWA​

服务工作者配置​

部署​

Firebase​

内容

将您的 Angular 应用变成 PWA

服务工作者配置

部署

Firebase