Skip to main content

Angular 中的渐进式 Web 应用

让你的 Angular 应用成为 PWA​

🌐 Making your Angular app a PWA

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

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

🌐 The @angular/pwa package will automatically add a service worker and an app manifest to the app. To add this package to the app, run:

ng add @angular/pwa

一旦添加了此软件包，运行 ionic build --prod，www 目录就可以准备好作为 PWA 部署。

🌐 Once this package has been added run ionic build --prod and the www directory will be ready to deploy as a PWA.

note

默认情况下，@angular/pwa 包附带了用于应用图标的 Angular 徽标。请确保更新清单以使用正确的应用名称，并替换图标。

note

像服务工作者和许多 JavaScript API（如地理位置）这样的功能要求应用在安全环境中托管。当通过托管服务部署应用时，请注意，需要使用 HTTPS 才能充分利用服务工作者。

服务工作线程配置​

🌐 Service Worker configuration

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

🌐 After @angular/pwa has been added, a new ngsw-config.json file will be created at the root of the project. This file is responsible for configuring how Angular's service worker mechanism will handle caching assets. By default, the following will be provided:

{
  "$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 团队的官方指南。

🌐 There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read the official guide from the Angular Team.

部署​

🌐 Deploying

Firebase​

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

🌐 Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for HTTP2 push.

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

🌐 First, if not already available, create the project in Firebase.

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

🌐 Next, in a Terminal, install the Firebase CLI:

npm install -g firebase-tools
note

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

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

🌐 With the Firebase CLI installed, run firebase init within your Ionic project. The CLI prompts:

“你想为此文件夹设置哪些 Firebase CLI 功能？” 选择“Hosting：为 Firebase Hosting 配置文件（可选）并设置 GitHub Action 部署”。

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

🌐 Create a new Firebase project or select an existing one.

“为此目录选择默认的 Firebase 项目:” 选择你在 Firebase 网站上创建的项目。

“你想使用什么作为你的公共目录？” 输入“www”.

note

回答下一个问题将确保路由、硬重载和深度链接在应用中正常工作：

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

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

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

你想为哪个 GitHub 仓库设置 GitHub 工作流？ 请输入你的项目名称。

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

在每次部署前应该运行什么脚本？ 输入 npm ci && npm run build。

当 PR 被合并时，是否将自动部署设置到你的网站直播通道？ 输入“是”。

与你网站直播通道关联的 get hooked 分支名称是什么？ 输入你项目的主分支名称。

生成了一个 firebase.json 配置文件，用于配置应用以进行部署。

🌐 A firebase.json config file is generated, configuring the app for deployment.

最后需要做的是确保缓存头设置正确。为此，请在 firebase.json 文件中添加 headers 片段。完整的 firebase.json 如下所示：

🌐 The last thing needed is to make sure caching headers are being set correctly. To do this, add a headers snippet to the firebase.json file. The complete firebase.json looks like:

{
  "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 文档。

🌐 For more information about the firebase.json properties, see the Firebase documentation.

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

🌐 Next, build an optimized version of the app by running:

ionic build --prod

最后，通过运行以下命令来部署应用：

🌐 Last, deploy the app by running:

firebase deploy

完成后，该应用将上线。

🌐 After this completes, the app will be live.

目录