angular 渐进_如何使用Angular构建渐进式Web应用

柔情只为你懂 2022-11-28 15:24 168阅读 0赞

angular 渐进

### 介绍 **(**Introduction**)** ###

[Progressive web apps][] are web applications built with technologies that make them behave like native apps. A benefit of progressive web apps is the ability to work smoothly when network coverage is unreliable. Also, unlike native apps, no installation is required, but they are faster than typical web apps.

[渐进式Web应用程序][Progressive web apps]是使用使它们的行为类似于本机应用程序的技术构建的Web应用程序。 渐进式Web应用程序的一个优点是能够在网络覆盖范围不可靠的情况下平稳运行。 此外，与本机应用程序不同，不需要安装，但是它们比典型的Web应用程序要快。

In this article, you’ll build a progressive web app with [Angular][] and deploy it with [Firebase][].

在本文中，您将使用[Angular][]构建一个渐进式Web应用程序，并使用[Firebase][]对其进行部署。

The [code for this tutorial is available on GitHub][].

[本教程][code for this tutorial is available on GitHub]的[代码可在GitHub上获得][code for this tutorial is available on GitHub] 。

**Note:** Currently, there is an [`@angular/pwa` package that helps with this process][angular_pwa_ package that helps with this process]. This tutorial will cover an earlier alternative approach.

**注意：**当前，有一个[`@angular/pwa`软件包可以帮助完成此过程][angular_pwa_ package that helps with this process] 。 本教程将介绍更早的替代方法。

## 先决条件 **(**Prerequisites**)** ##

To complete this tutorial, you will need:

要完成本教程，您将需要：

*  Node.js installed locally, which you can do by following [How to Install Node.js and Create a Local Development Environment][].
    
    Node.js在本地安装，您可以按照[如何安装Node.js和创建本地开发环境进行操作][How to Install Node.js and Create a Local Development Environment] 。
 *  The latest version of the [Google Chrome Web Browser][] installed on your local machine.
    
    您本地计算机上安装的最新版本的[Google Chrome浏览器][Google Chrome Web Browser] 。
 *  The [Lighthouse Chrome Extension][] installed in Chrome to later test if your app is progressive.
    
    [Chrome中][Lighthouse Chrome Extension]安装的[Lighthouse Chrome扩展][Lighthouse Chrome Extension]程序，以后可以测试您的应用是否为渐进式。
 *  A Google account if you wish to upload the application to Firebase.
    
    一个Google帐户(如果您希望将应用程序上传到Firebase)。

This tutorial was verified with Node v14.5.0 and `npm` v6.14.5.

本教程已通过Node v14.5.0和`npm` v6.14.5进行了验证。

## 第1步-创建一个新的Angular项目 **(**Step 1 — Creating a New Angular Project**)** ##

You can create a new project with Angular CLI. By default, Angular will generate test files that are not of use in this tutorial’s project. To prevent this generation, you’ll add the `--skip-tests` flag to the following command to create a new project:

您可以使用Angular CLI创建一个新项目。 默认情况下，Angular将生成本教程项目中不使用的测试文件。 为了防止这种情况的发生，您将`--skip-tests`标志添加到以下命令中以创建一个新项目：

*  npx @angular/cli@10.0.0 new ng-pwa --skip-tests
    
    npx @ angular / cli @ 10.0.0新ng-pwa --skip-tests

You will be prompted by some configuration options:

一些配置选项将提示您：

Output ? Would you like to add Angular routing? No
    ? Which stylesheet format would you like to use? CSS

This will create a new project directory named `ng-pwa`.

这将创建一个名为`ng-pwa`的新项目目录。

Navigate to the new directory:

导航到新目录：

*  cd ng-pwa
    
    cd ng-pwa

Now that you have a starter project, you can move on to creating a web app manifest.

既然您已经有了一个入门项目，就可以继续创建Web应用程序清单了。

## 第2步-创建Web App清单 **(**Step 2 — Creating a Web App Manifest**)** ##

A [web app manifest][] is a JSON file that contains configuration that gives a web application the ability to be saved on the user’s home screen. It also defines its appearance and behavior when launched from the home screen. Web app manifest is a basic requirement for progressive web apps but can be used on any website.

[Web应用程序清单][web app manifest]是一个JSON文件，其中包含配置，该配置使Web应用程序能够保存在用户的主屏幕上。 它也定义了从主屏幕启动时的外观和行为。 Web应用程序清单是渐进式Web应用程序的基本要求，但可以在任何网站上使用。

To create a web app manifest for your app, you will need a new file named `manifest.json` in the root of the `src` folder:

要为您的应用创建Web应用清单，您需要在`src`文件夹的根目录中有一个名为`manifest.json`的新文件：

*  nano src/manifest.json
    
    纳米src / manifest.json

Add the content below into the file:

将以下内容添加到文件中：

src/manifest.json

src / manifest.json

{
       "name": "Angular Progressive Web App",
       "short_name": "Ng-PWA",
       "start_url": "./",
       "theme_color": "#008080",
       "background_color": "#008B8B",
       "display": "standalone",
       "description": "A PWA that is built with Angular",
       "icons": [
           {
               "src": "/assets/images/icons/icon-16x16.png",
               "sizes": "16x16",
               "type": "image/png"
           },
           {
                "src": "/assets/images/icons/icon-32x32.png",
                "sizes": "32x32",
                "type": "image/png"
            },
            {
                "src": "/assets/images/icons/icon-150x150.png",
                "sizes": "150x150",
                "type": "image/png"
            },
            {
                "src": "/assets/images/icons/icon-180x180.png",
                "sizes": "180x180",
                "type": "image/png"
            },
            {
                "src": "/assets/images/icons/icon-192x192.png",
                "sizes": "192x192",
                "type": "image/png"
            },
            {
                "src": "/assets/images/icons/icon-512x512.png",
                "sizes": "512x512",
                "type": "image/png"
            }
       ]
    }

In our web app manifest, we defined the `name` that will be attached to our app icon on users’ home screen and a `short_name` that will replace it, in case it is too long. We also specified the landing page of the app, when launched from the home screen with `start_url`. The `theme_color` specifies the color the browser UI (user interface) will assume when users visit our site. The `background_color` property controls the color of the background on which our app icon will be displayed when users launch our app from their home screen. With `display`, you specify if the browser UI should be hidden or not when users visit your site.

在我们的网络应用清单中，我们定义了将附加到用户主屏幕上的应用程序图标的`name` ，以及定义了一个`short_name` (如果名称太长的话)，它将被替换。 当从主屏幕启动时，我们还使用`start_url`指定了应用程序的登录页面。 `theme_color`指定用户访问我们的网站时浏览器UI(用户界面)将采用的颜色。 当用户从主屏幕启动我们的应用程序时， `background_color`属性控制将在其上显示我们的应用程序图标的背景颜色。 使用`display` ，您可以指定在用户访问您的网站时是否应该隐藏浏览器UI。

We expect users to visit our site with different types of devices with different screen sizes, so there is a need to make duplicates of your app icons in multiple dimensions.

我们希望用户使用具有不同屏幕尺寸的不同类型的设备来访问我们的网站，因此需要在多个维度上复制您的应用程序图标。

When you are done adding image assets, go to the `index.html` file and add the following to the `<head>` section:

添加完图像资产后，请转到`index.html`文件，并将以下内容添加到`<head>`部分：

src/index.html

src / index.html

...
    <head>
      ...
      <link rel="manifest" href="/manifest.json">
      <meta name="theme-color" content="#008080">
    </head>

The web app manifest will not be added to the build folder unless we instruct Angular to do so. We will do that by adding the `manifest.json` file to the assets array in `apps` section of `.angular-cli.json` file:

除非我们指示Angular这样做，否则不会将Web应用程序清单添加到构建文件夹中。 为此，我们将`manifest.json`文件添加到`.angular-cli.json`文件的`apps`部分中的assets数组中：

.angular-cli.json

...
    "apps": [
        {
         ...
          "assets": [
           ...
            "manifest.json"
          ],
    ...

**Note:** If your application is built with Angular 6 or later, you will need to edit `angular.json` instead of `.angular-cli.json`:

**注意：**如果您的应用程序是使用Angular 6或更高版本构建的，则需要编辑`angular.json`而不是`.angular-cli.json` ：

angular.json

...
    "projects": {
      "ng-pwa": {
        ...
        "architect": {
          "build": {
            ...
            "assets": [
              "src/manifest.json"
            ],
    ...

After creating a `manifest.json`, modifying `index.html`, and editing `angular-cli.json` (or `angular.json`), you are ready for the next step.

创建`manifest.json` ，修改`index.html`并编辑`angular-cli.json` (或`angular.json` )后，就可以进行下一步了。

## 步骤3 —添加服务人员 **(**Step 3 — Adding Service Workers**)** ##

[Service workers][] are the foundation of progressive web apps. Written in JavaScript, they help cache important assets and files, which helps keep an app functional when the network coverage is unavailable or unreliable. Service workers can also intercept requests and manage responses from the server amid other things.

[服务人员][Service workers]是渐进式Web应用程序的基础。 它们使用JavaScript编写，有助于缓存重要的资产和文件，从而在网络覆盖范围不可用或不可靠时帮助保持应用程序正常运行。 服务人员还可以拦截请求并管理服务器中的响应。

We need to build our app with [`webpack`][webpack] before pushing it to production. Our service worker must be able to track and cache the build files.

在将其推向生产之前，我们需要使用[`webpack`][webpack]构建我们的应用程序。 我们的服务人员必须能够跟踪和缓存构建文件。

With the [`sw-precache-webpack-plugin`][sw-precache-webpack-plugin] `npm` package, we install the package and configure it.

使用[`sw-precache-webpack-plugin`][sw-precache-webpack-plugin] `npm`软件包，我们安装该软件包并对其进行配置。

**Note:** Currently, the developer for `sw-precache-webpack-plugin` recommends using [`GenerateSW` from `workbox-webpack-plugin`][GenerateSW_ from _workbox-webpack-plugin].

**注意：**目前， `sw-precache-webpack-plugin`的开发人员建议使用[来自`workbox-webpack-plugin` `GenerateSW`][GenerateSW_ from _workbox-webpack-plugin] 。

We can then run a command that will auto-generate the service worker in the build folder.

然后，我们可以运行一个命令，该命令将自动生成build文件夹中的service worker。

Run the `npm install` command from the `ng-pwa` directory to install the package:

从`ng-pwa`目录中运行`npm install`命令以安装软件包：

*  npm install --save-dev sw-precache-webpack-plugin@1.0.0
    
    npm install --save-dev sw-precache-webpack-plugin @ 1.0.0

Once the package is installed, create a file named `precache-config.js`:

安装软件包后，创建一个名为`precache-config.js`的文件：

*  nano precache-config.js
    
    纳米precache-config.js

Add the following into the file:

将以下内容添加到文件中：

precache-config.js

var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
    
    module.exports = {
        navigateFallback: '/index.html',
        navigateFallbackWhitelist: [],
        stripePrefix: 'dist',
        root: 'dist/',
        plugins:[
            new SWPrecacheWebpackPlugin({
                cacheId: 'ng-pwa',
                filename: 'service-worker.js',
                staticFileGlobs: [
                    'dist/index.html',
                    'dist/**.js',
                    'dist/**.css'
                ],
    
            })
        ],
        stripePrefix: 'dist/assets',
        mergeStaticsConfig: true
    };

The `precache-config.js` file configures the `sw-precache-webpack-plugin` using literal object key-value pairs.

`precache-config.js`文件使用文字对象键值对配置`sw-precache-webpack-plugin` 。

Angular as a front-end framework for building single-page applications uses client-side URL routing. This means that it can generate arbitrary URLs that are not cached by the auto-generated service worker. In such situations, we’ll define an HTML entry that the requested URL will be mapped to, and `navigateFallback` handles that. The HTML entry should be able to provide the desired resources. Because our app is a SPA (single-page application), and `index.html` is the entry point — it can handle arbitrary URLs — therefore it must be among the files selected to be cached in the `staticFileGlobs` array. `navigateFallbackWhitelist` can be empty or contains a regex that defines the type or pattern of URL that `navigateFallback` will be used for.

Angular作为构建单页应用程序的前端框架，使用客户端URL路由。 这意味着它可以生成未由自动生成的服务工作程序缓存的任意URL。 在这种情况下，我们将定义一个HTML条目，请求的URL将被映射到该HTML条目，由`navigateFallback`处理。 HTML条目应能够提供所需的资源。 由于我们的应用程序是SPA(单页应用程序)，而`index.html`是入口点(它可以处理任意URL)，因此它必须位于被选择要缓存在`staticFileGlobs`数组中的文件之中。 `navigateFallbackWhitelist`可以为空或包含一个正则表达式，该正则表达式定义了`navigateFallback`将用于的URL的类型或模式。

To get a deeper understanding of how to configure `sw-precache-webpack-plugin`, read its [documentation][sw-precache-webpack-plugin].

要更深入地了解如何配置`sw-precache-webpack-plugin` ，请阅读其[文档][sw-precache-webpack-plugin] 。

To finish the service worker setup, we will create a custom `npm` script or command that will be used to build our app and auto-generate the service worker file in the build folder. Go to the `package.json` file and add the following to `scripts`:

要完成服务工作者的设置，我们将创建一个自定义`npm`脚本或命令，该脚本或命令将用于构建我们的应用程序并自动生成build文件夹中的服务工作者文件。 转到`package.json`文件，并将以下内容添加到`scripts` ：

package.json

...
     "scripts": {
        ...
        "pwa": "ng build --prod && sw-precache --root=dist --config=precache-config.js"
      },
     ...

After installing the `sw-precache-webpack-plugin`, creating `precache-config.js`, and editing `package.json`, you are ready for the next step.

安装`sw-precache-webpack-plugin` ，创建`precache-config.js`并编辑`package.json` ，就可以进行下一步了。

## 第4步-创建视图 **(**Step 4 — Creating the View**)** ##

We only have a single view, since our primary focus is on the process of building progressive web apps with Angular.

我们只有一个视图，因为我们的主要重点是使用Angular构建渐进式Web应用程序的过程。

Edit `app.component.html` and replace the content with the following code:

编辑`app.component.html`并将内容替换为以下代码：

src/app/app.component.html

src / app / app.component.html

<div class="container">
      <h1>
        A Progressive Web App Built with Angular.
      </h1>
      <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=" alt="Angular logo">
      <h2>Get Started With Progressive Web Apps:</h2>
      <ul>
        <li>
          <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/primers/service-workers/">Service Workers</a></h4>
        </li>
        <li>
          <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/web-app-manifest/">Web App Manifest</a></h4>
        </li>
        <li>
          <h4><a target="_blank" rel="noopener" href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/">Code Lab (PWA)</a></h4>
        </li>
      </ul>
    </div>

This code produces a web page with an image, some text, and three links.

此代码将生成一个包含图像，一些文本和三个链接的网页。

The `rel="noopener` attribute is essential in progressive web apps if the anchor element’s `target` attribute is set to `_blank` for security and performance reasons.

如果出于安全和性能原因将锚元素的`target`属性设置为`_blank` ，则`rel="noopener`属性在渐进式Web应用程序中必不可少。

Edit `styles.css` and replace the content with the following code:

编辑`styles.css`并将内容替换为以下代码：

src/styles.css

src / styles.css

body {
        background-color: teal;
    }
    
    .container {
        text-align: center;
    }
    
    ul {
        list-style: none;
    }
    
    h1, h2, a {
        color: white;
    }

This code creates a teal background color, centers the text, and gives the text a white color.

这段代码创建了蓝绿色的背景色，使文本居中，并使文本为白色。

Now, you have completed the view and can move on to deploying the app.

现在，您已经完成了视图并可以继续部署应用程序。

## 第5步-部署您的应用 **(**Step 5 — Deploying Your App**)** ##

The service worker is the heartbeat of any progressive web app. However, for the service worker to work properly, our app must be served over a secure connection. Hence, we will be deploying our app to Firebase, which hosts over a secure connection. In this step, you will deploy your app to Firebase.

服务工作者是任何渐进式Web应用程序的心跳。 但是，为了使服务人员能够正常工作，必须通过安全连接为我们的应用程序提供服务。 因此，我们将把应用程序部署到Firebase，后者通过安全连接进行托管。 在此步骤中，您将您的应用程序部署到Firebase。

To get started, visit [`firebase.google.com`][firebase.google.com]. If you don’t have an account already, create one to have access to the console. From the console, create a new Firebase project.

首先，请访问[`firebase.google.com`][firebase.google.com] 。 如果您还没有帐户，请创建一个帐户以访问控制台。 在控制台中，创建一个新的Firebase项目。

Once logged in, click on the **Go to console** link in the top right corner. On the console page, select **Create a project**. You will be prompted for a name for your project. You will also be prompted to enable Google Analytics. This tutorial will not require Google Analytics.

登录后，单击右上角的**转到控制台**链接。 在控制台页面上，选择**创建项目** 。 系统将提示您输入项目的名称。 还将提示您启用Google Analytics(分析)。 本教程不需要Google Analytics(分析)。

Click **Create project** and wait for the process to complete.

单击**创建项目，**然后等待过程完成。

After the project has been created, you can click **Continue** to arrive at the Project Dashboard. For the purposes of this tutorial, we will be interested in the **Develop** section and the **Hosting** page.

创建项目后，您可以单击**继续**以到达项目仪表板。 就本教程而言，我们将对“ **开发”**部分和“ **托管”**页面感兴趣。

Now you can go back to your command terminal. Run the `npm install` command to install the `firebase-tools` package globally:

现在，您可以返回到命令终端。 运行`npm install`命令以全局安装`firebase-tools`软件包：

*  npm install -g firebase-tools@8.4.3
    
    npm install -g firebase-tools @ 8.4.3

The `firebase-tools` package will allow us to test run and deploy apps to Firebase from the command terminal.

`firebase-tools`软件包将使我们能够从命令终端测试运行并将应用程序部署到Firebase。

When the installation is complete, we need to build our app in preparation for deployment.

安装完成后，我们需要构建我们的应用程序以准备部署。

To build the Angular app and auto-generate the service worker, run the following from the `ng-pwa` directory:

要构建Angular应用并自动生成服务工作者，请从`ng-pwa`目录中运行以下`ng-pwa` ：

*  npm run pwa
    
    npm运行pwa

This runs a custom script we created earlier and makes our app production-ready.

这将运行我们之前创建的自定义脚本，并使我们的应用程序可以投入生产。

Now it is time to introduce Firebase to the app. Run this command to log in to Firebase:

现在是时候将Firebase引入应用程序了。 运行以下命令以登录Firebase：

*  firebase login
    
    Firebase登录

At this point, you will be prompted for credentials. Enter your account information into the terminal.

此时，系统将提示您输入凭据。 在终端中输入您的帐户信息。

Once authenticated, run the following command to initialize Firebase in the project:

身份验证完成后，运行以下命令以在项目中初始化Firebase：

*  firebase init
    
    Firebase初始化

Then answer the questions as follows:

然后回答以下问题：

Are you ready to proceed? (Y/n) = Y
    Which Firebase CLI features do you want to setup for this folder? = Hosting
    Select a default Firebase project for this directory = Your-Firebase-Project-Name
    What do you want to use as your public directory? = dist
    Configure as a single-page app (rewrite all urls to /index.html)? (y/N) = Y
    File dist/index.html already exists. Overwrite? (y/N) = N

Our app is ready to be deployed. Run the following command to deploy the app to Firebase:

我们的应用程序已准备好进行部署。 运行以下命令以将应用程序部署到Firebase：

*  firebase deploy
    
    火力基地部署

Finally, run this command to see the app:

最后，运行以下命令以查看应用程序：

*  firebase open hosting:site
    
    火力地堡开放托管：站点

### 故障排除 **(**Troubleshooting**)** ###

If you see a “Firebase Hosting Setup Complete” message instead of your app, you may have overwritten your `index.html`. Rebuild with `npm run pwa`, `firebase init`, and ensure you select “No” for overwriting `index.html`.

如果您看到的是“ Firebase托管安装完成”消息，而不是您的应用程序，则可能是您的`index.html`被覆盖了。 使用`npm run pwa`重建， `npm run pwa` ， `npm run pwa` `firebase init` ，并确保您选择“ No”以覆盖`index.html` 。

Depending on your configuration, your app may exist under `"ng-pwa"` (the name of the Angular project). During `firebase init`, you can set the public directory to `dist/nw-pwa` instead of `dist` to avoid this.

根据您的配置，您的应用程序可能位于`"ng-pwa"` (Angular项目的名称)下。 在`firebase init`期间，您可以将public目录设置为`dist/nw-pwa`而不是`dist`来避免这种情况。

Your progressive web application has now been built and deployed. Now, we can use a tool to test it.

现在，您的渐进式Web应用程序已构建并部署。 现在，我们可以使用工具对其进行测试。

## 第6步-使用Lighthouse测试 **(**Step 6 — Testing with Lighthouse**)** ##

[Lighthouse][Lighthouse Chrome Extension] is a Chrome extension made by Google. It can be used to test how compliant a progressive web app is to the progressive web app standard, in addition to other tests.

[Lighthouse][Lighthouse Chrome Extension]是Google开发的Chrome扩展程序。 除其他测试外，它还可用于测试渐进式Web应用程序与渐进式Web应用程序标准的兼容性。

The highest score is 100%, and the PWA score for this app is 91%.

最高分数是100％，此应用程序的PWA分数是91％。

To test your PWA, open the hosted app in your Google Chrome Web Browser. Click on the **Extensions** button and select **Lighthouse**. A window will display and prompt you to click on a **Generate report** button. After clicking the button, you will temporarily see a screen with a **Waiting for Lighthouse results** message. When the test completes, you will be presented with a screen of the test results.

要测试您的PWA，请在Google Chrome浏览器中打开托管的应用。 单击**扩展**按钮，然后选择**灯塔** 。 将显示一个窗口，提示您单击“ **生成报告”**按钮。 单击该按钮后，您将临时看到一个屏幕，其中显示**等待灯塔结果**消息。 测试完成后，将显示测试结果屏幕。

## 结论 **(**Conclusion**)** ##

In this article, you’ve built a progressive web app with Angular and deployed through Firebase. Progressive web apps provide users with an experience similar to native apps. However, PWAs are lighter and much more flexible.

在本文中，您已经使用Angular构建了一个渐进式Web应用程序并通过Firebase进行了部署。 渐进式Web应用程序为用户提供与本机应用程序相似的体验。 但是，PWA更轻且更灵活。

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-build-progressive-web-apps-with-angular][https_www.digitalocean.com_community_tutorials_how-to-build-progressive-web-apps-with-angular]

angular 渐进

[Progressive web apps]: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
[Angular]: https://angular.io/
[Firebase]: https://firebase.google.com/
[code for this tutorial is available on GitHub]: https://github.com/do-community/ng-pwa
[angular_pwa_ package that helps with this process]: https://angular.io/guide/service-worker-getting-started
[How to Install Node.js and Create a Local Development Environment]: https://www.digitalocean.com/community/tutorial_series/how-to-install-node-js-and-create-a-local-development-environment
[Google Chrome Web Browser]: https://www.google.com/chrome/
[Lighthouse Chrome Extension]: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en
[web app manifest]: https://developer.mozilla.org/en-US/docs/Web/Manifest
[Service workers]: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Offline_Service_workers
[webpack]: https://webpack.js.org/
[sw-precache-webpack-plugin]: https://www.npmjs.com/package/sw-precache-webpack-plugin
[GenerateSW_ from _workbox-webpack-plugin]: https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#generatesw_plugin
[firebase.google.com]: https://firebase.google.com
[https_www.digitalocean.com_community_tutorials_how-to-build-progressive-web-apps-with-angular]: https://www.digitalocean.com/community/tutorials/how-to-build-progressive-web-apps-with-angular