什么是 PWA
PWA 是 Progressive Web App 的缩写，中文名叫渐进式 Web 应用程序。它是指利用现代 Web 浏览器提供的新特性，开发出具备原生应用程序类似体验的高级 Web 应用程序。
PWA 应用具备以下特点：
- 可以在离线状态下使用。
- 快速响应，具有类似原生应用的快捷方式、通知和启动界面等功能。
- 自适应于不同设备和不同屏幕大小。
PWA 在 Angular 项目中的实践
Angular 是当前比较流行的前端框架之一，Angular CLI 提供了开箱即用的 PWA 支持。下面将通过一个实例来了解如何在 Angular 项目中使用 PWA。
第一步：创建 Angular 项目
首先需要在本地安装 Angular CLI，使用以下命令：
npm install -g @angular/cli
安装完成之后，可以在命令行中使用 ng new 命令创建一个新的 Angular 项目：
ng new my-pwa-app
第二步：添加 PWA 支持
在项目根目录下使用以下命令添加 PWA 支持：
ng add @angular/pwa
这条命令会执行以下操作：
- 安装 service-worker。
- 修改 package.json 文件。
- 修改 src/index.html 文件。
- 修改 src/app/app.module.ts 文件。
第三步：构建并运行应用
在 Angular 项目根目录下使用以下命令构建应用：
ng build --prod
这条命令会将项目打包成生产环境的代码。
接着，使用以下命令运行应用：
ng serve在浏览器中访问 http://localhost:4200/，可以看到应用已经能够正常运行。
第四步：测试 PWA 应用
在浏览器中打开开发者工具，选择 Network 标签页，勾选 Offline 就能够测试应用在离线状态下的表现。
第五步：安装 PWA 应用
在浏览器中，选择右侧的“+”按钮，然后选择“添加到主屏幕”就能够安装 PWA 应用了。安装完成之后，在主屏幕可以看到应用的图标，点击图标就能够启动应用。
总结
在 Angular 项目中使用 PWA，能够提供更好的用户体验和离线使用的支持。同时，Angular CLI 已经提供了很好的开箱即用的支持，使得使用 PWA 变得非常简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652248fb95b1f8cacd9b1e5b
