1.pwa是什么：

PWA的中文名叫做渐进式网页应用。

PWA 可以将 Web 和 App 各自的优势融合在一起：渐进式、可响应、可离线、实现类似 App 的交互、即时更新、安全、可以被搜索引擎检索、可推送、可安装、可链接。

需要特别说明的是，PWA 不是特指某一项技术，而是应用了多项技术的 Web App。其核心技术包括 App Manifest、Service Worker、Web Push，等等。

PWA的核心目标就是提升 Web App 的性能，改善 Web App 的用户体验。媲美native的流畅体验，将网络之长与应用之长相结合。

2.pwa的特点

3.离线使用：

1、PWA 另一项令人兴奋的特性就是可以离线使用,其背后用到的技术是 Service worker ;

2、Service worker实际上是一段脚本，在后台运行。作为一个独立的线程，运行环境与普通脚本不同，所以不能直接参与 Web 交互行为。Service Worker 的出现是正是为了使得 Web App 也可以做到像 Native App 那样可以离线使用、消息推送的功能。

我们可以把Service worker当做是一种客户端代理。

Service Worker 是一段脚本，与 Web Worker 一样，也是在后台运行。作为一个独立的线程，运行环境与普通脚本不同，所以不能直接参与 Web 交互行为。Native App 可以做到离线使用、消息推送、后台自动更新，Service Worker 的出现是正是为了使得 Web App 也可以具有类似的能力。

Service Worker 脚本通过 navigator.serviceWorker.register 方法注册到页面, 之后可以脱离页面在浏览器后台运行。

生命周期：

parsed: 注册完成, 脚本解析成功, 尚未安装
installing: 对应 Service Worker 脚本 install 事件执行, 如果事件里有 event.waitUntil() 则会等待传入的 Promise 完成才会成功
installed(waiting): 页面被旧的 Service Worker 脚本控制, 所以当前的脚本尚未**。可以通过 self.skipWaiting() **新的 Service Worker
activating: 对应 Service Worker 脚本 activate 事件执行, 如果事件里有 event.waitUntil() 则会等待这个 Promise 完成才会成功。这时可以调用 Clients.claim() 接管页面
activated: **成功, 可以处理 fetch, message 等事件
redundant: 安装失败, 或者**失败, 或者被新的 Service Worker 替代掉

Service Worker 脚本最常用的功能是截获请求和缓存资源文件, 这些行为可以绑定在下面这些事件上:

install 事件中, 抓取资源进行缓存
activate 事件中, 遍历缓存, 清除过期的资源
fetch 事件中, 拦截请求, 查询缓存或者网络, 返回请求的资源

pwa

1.pwa是什么：

2.pwa的特点

3.离线使用：

相关推荐