跳到主要内容
版本：v6

Angular 中的渐进式 Web 应用

将 Angular 应用制作成 PWA​

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

@angular/pwa 包会自动向应用添加 service worker 和应用 manifest。要将其添加到应用，请运行：

ng add @angular/pwa

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

备注

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

备注

Service Worker 和许多 JavaScript API（如 geolocation）等功能要求应用托管在安全上下文中。通过托管服务部署应用时，请注意需要使用 HTTPS 才能充分利用 Service Worker。

Service Worker 配置​

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

{
  "$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 push 的支持。

首先，如果尚未创建，请在 Firebase 中创建项目。

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

npm install -g firebase-tools
备注

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

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

"Which Firebase CLI features do you want to set up for this folder?" 选择 "Hosting: Configure and deploy Firebase Hosting sites."

"Select a default Firebase project for this directory:" 选择你在 Firebase 网站上创建的项目。

"What do you want to use as your public directory?" 输入 "www"。

备注

回答接下来的两个问题将确保应用中的路由、硬刷新和深度链接正常工作：

Configure as a single-page app (rewrite all urls to /index.html)?" 输入 "Yes"。

"File www/index.html already exists. Overwrite?" 输入 "No"。

系统会生成一个 firebase.json 配置文件，用于配置应用部署。

最后需要做的是确保缓存头部设置正确。为此，请在 firebase.json 文件中添加 headers 片段。完整的 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

完成后，应用将上线。

目录

编辑此页