从PWA了解Service Worker

原链接：https://mp.weixin.qq.com/s/sU0cZg6EvmubC262Asdc3g

Service worker是什么

服务器和浏览器之间的中间人角色

如果网站中注册了service worker那么它可以拦截当前网站所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器，如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。

 

HTTP 缓存与 Service Worker 缓存

• HTTP 缓存中，Web 服务器可以使用 Expires 首部来通知 Web 客户端，它可以使用资源的当前副本，直到指定的“过期时间”。反过来，浏览器可以缓存此资源，并且只有在有效期满后才会再次检查新版本。使用 HTTP 缓存意味着你要依赖服务器来告诉你何时缓存资源和何时过期（当然，HTTP 缓存控制还包括 cache-control,last-modified,etag 等字段）。

• Service Workers 的强大在于它们拦截 HTTP 请求的能力，接受任何传入的 HTTP 请求，并决定想要如何响应。在你的 Service Worker 中，可以编写逻辑来决定想要缓存的资源，以及需要满足什么条件和资源需要缓存多久。一切尽归你掌控！（所以，出于安全考虑，Service Workers 要求只能由 Https 承载）

 

Service worker 特性

• Service worker 运行在 worker 上下文（self） --> 不能访问 DOM（这里其实和 Web Worker 是一样的）；
• 它设计为完全异步，同步 API（如 XHR 和 localStorage）不能在 service worker 中使用；
• 出于安全考量，Service workers 只能由 HTTPS 承载；
• 某些浏览器的用户隐私模式，Service Worker 不可用；
• 其生命周期与页面无关（关联页面未关闭时，它也可以退出，没有关联页面时，它也可以启动）。
• 基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行需要消耗大量资源的操作不会堵塞主线程）
• 在web worker的基础上增加了离线缓存的能力
• 本质上充当Web应用程序（服务器）与浏览器之间的代理服务器（可以拦截全站的请求，并作出相应的动作->由开发者指定的动作）
• 创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验）
• 由事件驱动的,具有生命周期
• 可以访问cache和indexDB
• 支持推送
• 并且可以让开发者自己控制管理缓存的内容以及版本