文章目录
- 引言
- I 什么是 PWA
-
- 功能
- 特性
- 技术上分为三个部分
- 安装应用
- II Web 应用清单
-
- 将Web 应用清单文件链接到站点
- manifest.json
- 字段说明
- III Service Worker( 缓存管理)
- IV 结合构建工具让项目支持 PWA应用
-
- 使用插件vite-plugin-pwa
- workbox-webpack-plugin插件
- 扩展知识
-
- 将 PWA 作为脱机应用
- 定义当前文档与被链接文档之间的关系
引言
PWA 是 Google 于 2016 年提出的概念,于 2017 年正式落地,于 2018 年迎来重大突破,全球顶级的浏览器厂商,Google、Microsoft、Apple 已经全数宣布支持 PWA 技术。
PWA 目的是通过各种 Web 技术实现与原生 App 相近的用户体验
I 什么是 PWA
功能
- 离线加载与缓存(Service Worker + Cache API )
可以通过 Service Worker + HTTPS +Cache Api + indexedDB 等一系列 Web 技术实现离线加载和缓存。
Service Worker是一种在后台运行的JavaScript脚本,可以拦截网络请求并将资源缓存到本地。这样,即使用户处于离线状态,他们仍然可以访问缓存的内容。