- Angular 教程
- Angular - 首页
- Angular - 概述
- Angular - 特性
- Angular - 优点 & 缺点
- Angular 基础
- Angular - 环境搭建
- Angular - 第一个应用程序
- Angular - MVC 架构
- Angular 组件
- Angular - 组件
- Angular - 组件生命周期
- Angular - 视图封装
- Angular - 组件交互
- Angular - 组件样式
- Angular - 嵌套组件
- Angular - 内容投影
- Angular - 动态组件
- Angular - 元素
- Angular 模板
- Angular - 模板
- Angular - 文本插值
- Angular - 模板语句
- Angular - 模板中的变量
- Angular - SVG 作为模板
- Angular 数据绑定
- Angular - 数据绑定 & 其类型
- Angular - 数据绑定
- Angular - 事件绑定
- Angular - 属性绑定
- Angular - 属性绑定
- Angular - 类 & 样式绑定
- Angular 指令
- Angular - 指令
- Angular - 内置指令
- Angular 管道
- Angular - 管道
- Angular - 使用管道转换数据
- Angular 依赖注入
- Angular - 依赖注入
- Angular HTTP 客户端编程
- Angular - 服务
- Angular - HTTP 客户端
- Angular - 请求
- Angular - 响应
- Angular - GET 请求
- Angular - PUT 请求
- Angular - DELETE 请求
- Angular - JSON-P
- Angular - 使用 HTTP 进行 CRUD 操作
- Angular 路由
- Angular - 路由
- Angular - 导航
- Angular - Angular Material
- Angular 动画
- Angular - 动画
- Angular 表单
- Angular - 表单
- Angular - 表单验证
- Angular 服务工作线程 & PWA
- Angular - 服务工作线程 & PWA
- Angular 测试
- Angular - 测试概述
- Angular NgModule
- Angular - 模块介绍
- Angular 高级
- Angular - 身份验证 & 授权
- Angular - 国际化
- Angular - 可访问性
- Angular - Web Workers
- Angular - 服务器端渲染
- Angular - Ivy 编译器
- Angular - 使用 Bazel 构建
- Angular - 向后兼容性
- Angular - 响应式编程
- Angular - 指令和组件之间的数据共享
- Angular 工具
- Angular - CLI
- Angular 其他
- Angular - 第三方控件
- Angular - 配置
- Angular - 数据显示
- Angular - 装饰器 & 元数据
- Angular - 基本示例
- Angular - 错误处理
- Angular - 测试 & 项目构建
- Angular - 生命周期钩子
- Angular - 用户输入
- Angular - 最新动态？
- Angular 有用资源
- Angular - 快速指南
- Angular - 有用资源
- Angular - 讨论
Angular - 服务工作线程 & PWA
渐进式 Web 应用 (PWA) 是具有少量增强的普通 Web 应用程序，其行为类似于原生应用程序。PWA 应用不依赖网络即可运行。PWA 缓存应用程序并从本地缓存中呈现。它会定期检查应用程序的实时版本，然后在后台缓存最新版本。
PWA 可以像原生应用程序一样安装到系统中，并且可以在桌面上显示快捷方式。单击快捷方式将在浏览器中打开应用程序，即使系统中没有任何网络可用，也能使用本地缓存。
Angular 应用程序可以转换为 PWA 应用程序。要转换 Angular 应用程序，我们需要使用服务工作线程 API。服务工作线程实际上是一个代理服务器，它位于浏览器、应用程序和网络之间。
服务工作线程独立于网页。它无法访问 DOM 对象。相反，服务工作线程通过 **PostMessage** 接口与网页交互。
PWA 应用程序有两个先决条件，如下所示：
**浏览器支持** − 尽管许多浏览器都支持 PWA 应用程序，但 IE、Opera mini 和其他一些浏览器并不提供 PWA 支持。
**HTTPS 传输** − 应用程序需要通过 HTTPS 协议传输。https 支持的一个例外是用于开发目的的 **localhost**。
让我们创建一个新应用程序并将其转换为 PWA 应用程序。
使用以下命令创建一个新的 Angular 应用程序：
cd /go/to/workspace ng new pwa-sample
使用以下命令添加 PWA 支持：
cd pwa-sample ng add @angular/pwa --project pwa-sample
构建应用程序的生产版本：
ng build --prod
PWA 应用程序不在 Angular 开发服务器下运行。使用以下命令安装一个简单的 Web 服务器：
npm install -g http-server
运行 Web 服务器并将应用程序的生产版本设置为根文件夹。
f the application as root folder. http-server -p 8080 -c-1 dist/pwa-sample
打开浏览器并输入 **https://:8080**。
现在，转到 **开发者工具 -> 网络** 并选择 **脱机** 选项。
**如果网络设置为脱机，普通应用程序将停止工作，但 PWA 应用程序可以正常工作，如下所示：**
广告