Angular初探PWA

所谓PWA是 Progressive Web App 的缩写，中文意思是 “ 渐进式 Web 应用 ”，PWA有与传统的Web应用相比有什么优势？在《PWA开发实战》一书中列出了以下几点：

从渐进学习的角度，本文将初步探索使用 Angular 框架来实现 PWA 的“ 无连接状态下的可用性 ”

1、安装脚手架工具

2、创建项目，命名为 gotham-hotel 即《PWA开发实战》中的 哥谭帝国酒店

...

3、初始化配置， 添加样式库，本项目选用 NG-ZORRO

4、安装后端数据模拟工具 json-server

5、修改package.json文件，添加json-server的启动指令

6、添加模拟数据：在package.json 同级目录添加 data.js 文件，文件中的 rooms 数组 模拟了 酒店的房型

1、创建房型 数据接口

接口定义如下：

2、创建 房型 数据获取服务

3、创建房型列表组件， 用于展示房型信息

修改 rooms.component.ts 文件如下:

修改rooms.component.html文件如下:

4、创建 home 组件

修改 home.component.ts 文件如下

5、设置路由

在 app.module.ts 文件内加入如下路由信息

修改app.component.ts 文件如下 （注意，要自己把logo图片和 room1、2、3、4图片放到assets目录下）

1、启动模拟后端数据

2、启动angular服务

如果一切没有问题的话，在浏览器中可以看到

点击蓝色的按钮，可以进入房型列表页面

到这里为止，一切都还只是一个常规的Web应用，让我们来模拟一下断线会出现什么情况

在 Chrome 中：

1、选择 Tools >Developer Tools （从右上角的 Chrome 菜单）。

2、进入 Network 页。

3、勾选Offline 复选框。

刷新页面，小恐龙就会出现了

做足了前戏，才轮到我们的主角上场了

1、安装pwa

2、配置缓存信息

我们会发现项目的src目录下多出了一个 ngsw-config.json 文件，该文件用于 定义pwa要缓存的信息 ，我们可以根据项目的需要进行修改，详细信息可参见 angular官网 Service Worker 配置 。

我们这个demo暂时只配置房型列表的api信息，在 ngsw-config.json 文件中添加内容如下：

表示对后端api中的rooms路径的请求进行缓存

3、重新构建项目

构建完成后，会在dist目录下多出一个对应项目名的文件夹

4、安装独立的 HTTP 服务器

由于 ng serve 对 Service Worker 无效，所以必须用一个独立的 HTTP 服务器在本地测试我们的项目。 我们可以使用任何 HTTP 服务器，本例使用http-server

先安装http-server

5、启动HTTP 服务

6、访问 http://127.0.0.1:8080 如果没问题的话，首页和房型列表页都会正常展示。

7、按照上一节的步骤模拟 断线 ，返回到首页，刷新浏览器，再进入列表页，会发现房型列表可以正常展示。

至此，PWA在 无连接状态下的可用性 就初步展现出来了。同时可以看到，angular在PWA方面也是非常方便的！

前言：

有这样一个需求，需要在多个不同的服务器下部署同一个前端项目，（正常操作是每一台服务器都根据不同的IP地址build一个包依次部署，非常繁琐，因此简化为多个环境只需要用打一个包即可）

解决方案：首先需要服务器设置系统环境变量，在打包后部署到服务器，通过运行.sh文件来获取环境变量set到项目中

以下是vue项目为例， React ，Angular 均可以使用

1，在项目根目录创建 run.sh 文件

注解：

第一行 apiUrl为当前系统配置的系统环境变量名称

第二行 将获取到的ip地址赋值到打包后的dist文件下index.html下的body中

2，项目中使用

3，将打包后的dist文件上传到服务器后，运行 run.sh，运行完成，页面就可以正常请求啦~

运行命令如下，也可手动运行

重要：需要在部署的服务器提前配置系统环境变量API_URL，否则获取不到

---