Skip to main content

Angular 中的渐进式 Web 应用

让你的 Angular 应用成为 PWA​

¥Making your Angular app a PWA

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

¥The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an @angular/pwa package that can be used to automate this.

@angular/pwa 包会自动向应用添加 Service Worker 和应用清单。要将此包添加到应用，请运行：

¥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.

注意

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

¥By default, the @angular/pwa package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons.

注意

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

¥Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers.

服务工作线程配置​

¥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 托管为渐进式 Web 应用提供了许多好处，包括由于 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
注意

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

¥If it's the first time you use firebase-tools, login to your Google account with firebase login command.

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

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

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

¥**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys".

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

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

"为此目录选择默认 Firebase 项目：" 选择你在 Firebase 网站上创建的项目。

¥**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website.

"你想使用什么作为你的公共目录？" 输入 "www"。

¥**"What do you want to use as your public directory?"** Enter "www".

注意

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

¥Answering this next question will ensure that routing, hard reload, and deep linking work in the app:

配置为单页应用（将所有 url 重写为/index.html）？"进入" 是”。

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

"File build/index.html already exists.覆盖？"进入" 否”。

¥**"File build/index.html already exists. Overwrite?"** Enter "No".

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

¥Set up automatic builds and deploys with Github? Enter "Yes".

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

¥For which GitHub repository would you like to set up a Github Workflow? Enter your project name.

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

¥Set up the workflow to run a build script before every deploy? Enter "Yes".

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

¥What script should be run before every deploy? Enter npm ci && npm run build.

合并 PR 时是否设置自动部署到你网站的实时通道？输入 "是的"。

¥Set up automatic deployment to your sites live channel when a PR is merged? Enter "Yes".

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

¥What is the name of the get hooked branch associated with your sites live channel? Enter your project's main branch name.

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

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

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

目录