让我们尝试使用Angular CLI v10创建PWA吧！

2 年 ago

清, 扬

1 minute

2020年6月29日，我们已对Angular CLI v10进行了支持。

2018年的ng-japan也介绍了PWA（渐进式Web应用程序1）！随着支持的浏览器越来越多，PWA最近受到了相当大的关注。

如果您使用Angular CLI，可以相对容易地创建PWA。马上试一试吧！

※ 本文是对”通过 Angular CLI 1.6 创建 PWA”的补充修正
※ 本文中的源代码和命令适用于 Angular CLI v10 系列。
※ 最终成果请参考此链接：https://github.com/puku0x/angular-pwa-sample

安装 Angular CLI

最新的 Angular CLI 只支持 Node.js v10 或之后的版本。

如果您的Node.js版本比v10旧或者未安装，请访问上面的页面进行安装（也可以使用nvm或nodebrew等工具）。

在安装Node.js之后，请使用以下命令安装Angular CLI。

$ npm i -g @angular/cli

我要创建一个新项目。

$ ng new my-app --routing --style=scss

完成项目后，让我们前往工作目录，为下一步做准备。

$ cd my-app

执行下面的命令将Service Worker集成进去。

ng add @angular/pwa

如果有多个项目，可以按照以下指定方式进行。

ng add @angular/pwa --project=my-app

当您添加@angular/pwa时，不仅会创建Service Worker，还会创建manifest.webmanifest和图标等必要文件，以使其作为PWA正常运行。

将App Shell嵌入（可选）

App Shell是用于UI功能所必需的最少量的HTML/CSS/JavaScript。通过使用它作为应用程序加载时显示的占位符，可以提高应用程序启动前的感知速度。

执行以下命令将生成App Shell。

$ ng g app-shell --client-project=my-app

默认情况下，路径为/shell，但可以通过–route选项进行更改。

$ ng g app-shell --client-project=my-app --route=my-path

用ng run进行构建。

$ ng run my-app:app-shell --configuration=production

让我们来确认一下已创建的应用程序。

$ npx node-static ./dist/my-app/browser --spa --port=9000

在服务器启动后，当在浏览器中打开 localhost:9000，会显示出来。

1. 比较
2. 对比

让我们看看速度有多大改善（您可以从这里进行预览）。我认为，通过在Chrome开发者工具中将网络速度设置为Fast 3G等，可以更容易进行比较。

在将PWA化之前，页面的情况是这样的。[来源]

大约在2000毫秒之后，工具栏将显示（第一次绘制）吧。

当将App Shell嵌入进来时，

将会缩短到大约1500毫秒。

而且，一旦Service Worker被注册并启用缓存的功能，

大约需要500毫秒才能显示图标（即首次有意义的绘制）。

我们的速度相当提高了。

在最新的 Angular CLI 中，实现 PWA 变得非常简单。

对于@angular/service-worker，本次只是用于缓存的目的，但由于它还具有应用程序更新监测和推送通知等功能，所以希望未来能够更充分地利用它。

大家也趁此机会，尝试使用Angular制作PWA吧！

请查看

以下是一些关于PWA（渐进式网络应用）的资源链接：

1. Angular官方文档中有一篇关于Service Worker入门的指南可供参考：https://angular.cn/guide/service-worker-getting-started

2. 在Angular官方文档中，还有一篇关于App Shell的指南可以提供帮助：https://angular.cn/guide/app-shell

3. 如果需要示例代码，可以访问GitHub上的angular-pwa-sample项目：https://github.com/puku0x/angular-pwa-sample

这是一种能为Web应用提供与原生应用一样用户体验的东西。由Google提出。