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应用程序是使用使它们的行为类似于本机应用程序的技术构建的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.

本教程的代码可在GitHub上获得 。

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

注意：当前，有一个@angular/pwa软件包可以帮助完成此过程 。 本教程将介绍更早的替代方法。

先决条件 (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和创建本地开发环境进行操作 。

• The latest version of the Google Chrome Web Browser installed on your local machine.

  您本地计算机上安装的最新版本的Google Chrome浏览器 。

• The Lighthouse Chrome Extension installed in Chrome to later test if your app is progressive.

  Chrome中安装的Lighthouse Chrome扩展程序，以后可以测试您的应用是否为渐进式。

• 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标志添加到以下命令中以创建一个新项目：

You will be prompted by some configuration options:

一些配置选项将提示您：

? 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:

导航到新目录：

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应用程序清单是一个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的新文件：

Add the content below into the file:

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

{"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>部分：

...
<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数组中：

...
"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 ：

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

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

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

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

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

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

Note: Currently, the developer for sw-precache-webpack-plugin recommends using GenerateSW from workbox-webpack-plugin.

注意：目前， sw-precache-webpack-plugin的开发人员建议使用来自workbox-webpack-plugin GenerateSW 。

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命令以安装软件包：

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

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

Add the following into the file:

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

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 ，请阅读其文档 。

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 ：

..."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并将内容替换为以下代码：

<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并将内容替换为以下代码：

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. 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项目。

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软件包：

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 ：

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：

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：

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：

Finally, run this command to see the app:

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

故障排除 (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 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是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

angular 渐进