Angular初探PWA

发布网友发布时间：2022-09-24 02:57

我来回答

共1个回答

热心网友时间：2023-09-11 06:14

所谓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.mole.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方面也是非常方便的！

热心网友时间：2023-10-03 07:12