让我们尝试使用Angular CLI 1.6来创建PWA！

这篇文章是Angular Advent Calendar 2017第22天的文章。

请注意

这篇文章的信息已经过时了。

如果您使用的是 Angular CLI 6.0.0 或更高版本，请参考“使用 Angular CLI v6 创建 PWA！”

一开始

现在，Angular CLI是进行使用Angular开发SPA不可或缺的工具。

在最新的Angular CLI版本中，
– Service Worker
– Universal (SSR)
– App Shell
得到了支持，因此创建PWA1也变得简单。

我们立刻来试试看。

安装 Angular CLI

让我们安装Angular CLI。
※ 目前最新版本是1.6.1

$ npm install -g @angular/cli

2. 创建新的应用程序

我用ng new创建一个新应用程序。

$ ng new my-app --routing --service-worker

如果添加了service-worker选项，将自动包含Service Worker。

3. 安装 @angular/platform-server。

进入应用程序生成的目录中，

$ cd my-app

使用 npm 安装 @angular/platform-server。

$ npm install @angular/platform-server --save

4. 生成用于Universal的文件

从Angular CLI 1.6版本开始，添加了Universal到Schematics中。

$ ng generate universal my-universal-app

只需这么做，就可以生成用于Universal的文件并进行.angular-cli.json的配置。
与以前相比，变得非常简单！

5. 生成应用外壳

App Shell是为了使UI功能正常运作所需的最小HTML/CSS/JavaScript。通过将其用作在应用加载期间显示的占位符，可以提高应用的启动速度，并增强用户的体验。

可以使用以下命令来生成。

$ ng generate app-shell shell --universal-app=my-universal-app

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

$ ng generate app-shell shell --universal-app=my-universal-app --route=my-path 

再更「PWA」一點的感覺。

这样也可以，但是没有manifest.json文件或者App Shell是空的，所以有点不太好。

请参考 https://github.com/puku0x/angular-pwa-sample

• manifest.json 追加

 

ランチャー用アイコン 追加

让我们尝试做些调整吧。

如果对应用程序的外观感到在意，可以考虑以下选项

Angular Material 追加
App Shellにプログレスバー 追加

我觉得可以考虑这样做。

如果只想先行确认功能的话，可以省略这一步。

7. 建筑

我会像平常一样进行构建，没有特别的事情要做。

$ ng build --prod

8. 在浏览器中显示

让我们在浏览器中显示应用程序吧。

$ npx pushstate-server ./dist

在启动服务器后，打开浏览器并输入localhost:9000，在页面上会显示该内容。

9. 对比

我们来看一下相对于什么都不做的时候，显示速度有多大的改善（您可以在此处进行预览）。我认为通过在Chrome开发者工具等工具中将网络速度设定为3G，可以更容易地进行比较。

在将应用转化为PWA之前，它的样子如下所示。[来源]

大约需要2000毫秒左右才会显示出工具栏（First Paint）。

如果将App Shell集成进去，

大约缩短至1500毫秒。

而且，当Service Worker注册并且缓存生效时，

直到首次有意义的绘制（First Meaningful Paint）的显示，大约需要500毫秒。

我们提高了相当快的速度。

总结

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

由於2017年被視為PWA的元年，所以讓我們大家趁這個機會一起開始PWA的旅程吧！還來得及！

关于 @angular/service-worker，虽然这次只是用于缓存目的，但由于还涉及应用程序更新监控和推送通知等功能，因此我们希望今后能够充分利用。

您可以从这里下载本次样本。

明天是ic_lifewood先生！

请提供相关网址

以下是中国语言的翻译选项：

1. https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e
– Angular 5.1 更多功能现已发布，详情请参阅此链接。

2. https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e
– 现已发布Angular 5.1版本，并新增了更多功能，详细信息请点击链接查看。

3. https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e
– Angular 5.1现已推出，提供更多功能和特性，欲了解详情请点开此链接。

4. https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e
– 最新版本的Angular 5.1已经发布，本文链接提供更多详细信息。

—

1. https://blog.angular-university.io/angular-app-shell/
– Angular应用外壳模式的介绍，请参考此链接。

2. https://blog.angular-university.io/angular-app-shell/
– 详细了解Angular应用外壳模式，请阅读此链接提供的内容。

3. https://blog.angular-university.io/angular-app-shell/
– 介绍Angular应用外壳模式的博客文章，请点击此链接查看。

4. https://blog.angular-university.io/angular-app-shell/
– 想了解更多关于Angular应用外壳模式的内容，请点击此链接参考。