用Angular8引入PWA并验证Ivy的性能

2 年 ago
雅, 悟
2 minutes

在Angular8中引入PWA并验证Ivy的性能。

现在（2019年11月19日），Angular的版本为8.2.14。下面是创建PWA应用程序的新项目的步骤。

前提确认：所需的事物

在服务器端，

    1. HTTPS通信

 

    1. 支持HTTP/2协议

 

    HTTP/2压缩

Firebase Hosting现在已经支持HTTP/2，所以在Firebase Hosting上使用HTTP/2不需要做任何额外的配置。

如果在本地进行测试的话，

只需一种选择，请将以下内容以中文进行含义释义：
– HTTPS不需要 –
「在开发过程中，可以从http://localhost利用http通信来使用Server Worker，这是个例外」

已经安装了Node和npm。

$ node --version
v10.15.3
$ nmp --version
6.4.1

创建一个 Angular 项目。

    下記コマンドでAngular CLIをインストール
$ npm install -g @angular/cli@latest
    プロジェクトフォルダに移動し新しいプロジェクトを作成
$ ng new my-app --routing --style=scss

若输出显示“成功初始化git”，则表示成功。

    プロジェクトができたら、プロジェクトフォルダに移動。
$ cd my-app

ng –versionでバージョンを確認。

$ ng --version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.4
Node: 10.15.3
OS: win32 x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

哎？第七个版本？不管从头多少次重试，都会出现这种情况，只得通过下一个指令进行升级。

$ ng update @angular/cli @angular/core

版本确认。

$ ng --version
    _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.19
Node: 10.15.3
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.19
@angular-devkit/build-angular     0.803.19
@angular-devkit/build-optimizer   0.803.19
@angular-devkit/build-webpack     0.803.19
@angular-devkit/core              8.3.19
@angular-devkit/schematics        8.3.19
@angular/cli                      8.3.19
@ngtools/webpack                  8.3.19
@schematics/angular               8.3.19
@schematics/update                0.803.19
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

好的。

安装 Service Worker

以下的指令。

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

安装后，可以通过ngsw-config.json文件来确认预取功能是否已设置（默认预取assets文件夹中的所有文件、app根目录下的index.html文件、所有CSS文件以及.JS文件）。

Angular初期設定4.png
安装App Shell（可选）

App Shell是什么？自由选择，尝试搜索一下。
“App Shell是一种构建PWA（Progressive Web App）的架构，它可以像原生应用程序一样即时加载，并且不依赖于网络环境进行可靠的加载。
具体来说，首先构建应用程序的静态部分，例如导航等，在index.html中预先渲染并嵌入。（换句话说，这意味着对应用程序的某些部分进行了预渲染）
用户将感知到应用程序立即响应，并且体验响应时间得到了提升”来自于从零开始学习Angular Universal的SSR知识。

总之，似乎加载速度变快了。然而，根据《使用Angular开始App Shell》，加载时间从755毫秒改善为711毫秒。变化并不是很大。我决定不使用它了。如果想要安装，可以使用以下命令。

$ ng generate app-shell --clientProject=my-app --universalProject=my-app
由于想要使用Material，需要进行安装。
$ ng add @angular/material

如果问到以下问题，请选择自己喜欢的主题后按下回车。

? Choose a prebuilt theme name, or "custom" for a custom theme:
  Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]
> Custom
Angular初期設定6.png
Angular初期設定5.png

暫時設定為自定義。
下一個問題是
兩個都輸入Y然後按下Enter鍵。

? Set up HammerJS for gesture recognition? Y
? Set up browser animations for Angular Material? (Y/n) Y

建造方法

首先，使用以下命令进行构建。

$ ng build --prod --output-path=dist --delete-output-path=true

如果已安装了App-shell，可以使用以下命令进行构建（即使安装了App-shell，也可以使用上述命令进行构建而不使用App-shell）。

$ ng run my-app:app-shell
image.png

如果构建了App-shell，则会创建一个名为dist/＜ProjectName＞的文件夹，其中包含一组文件。

确认行动

PWA开发有以下限制：
1. 无法通过ng serve命令进行功能验证。
2. 只有进行Production（生产环境）的构建才能进行功能验证。

这种方法可以如下所示。

    どのディレクトリからでもいいので次のコマンドでhttp-serverをインストール。
$ npm install -g http-server
    そしたら、プロジェクトルートのフォルダに移って、次のコマンドでhttp-serverを起動。
$ http-server ./dist -p9000 -c-1 -o

./dist：将dist文件夹放在根目录下
-p3000：将端口号指定为9000
-c-1：清空缓存后启动
-o：打开浏览器

image.png
    • より簡単な方法

 

    つぎのコマンド
$ npx node-static ./dist --spa --port=9000

这也一样。
打开初始页面并访问http://127.0.0.1:9000/打开。

image.png
無題.png

验证Ivy的表现

在Angular8中，默认情况下，Ivy是被关闭的。

没有Ivy的表演
無題.png
在Ivy的表演中

在线的方式。
编辑以下文件。

//tsconfig.json

{
  "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}
image.png

脚本的改进使得剂量从614毫克减少到436毫克。
“dist”文件夹的大小为1,081,833字节。与之前相比几乎没有变化。

让我们来尝试用 Angular CLI v8 来制作 PWA！通过 Angular 使用 App Shell 来入门。Angular v8 已经发布了！它减小了捆绑大小，并且可使用新的渲染引擎 Ivy 的预览版本！

bannerAds