JTangming
commented
4 years ago Service Worker
Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker 的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。
当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。也就是说，如果我们没有在 Service Worker 命中缓存的话，会根据缓存查找优先级去查找数据。但是不管我们是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示我们是从 Service Worker 中获取的内容。
相对 APP Cache
html5 提供了 App cache 来解决静态文件存储的问题，即将要缓存的静态文件声明在一个 manifest 文件清单里，但是也存在如下问题：
-
只要 manifest 文件更新，就会重新请求所有文件，实际上可能只更新了很少量文件（虽然重新请求资源会返回 304)。但也可以只更新需要更新的文件， 比如可以建立一个文件版本或者 MD5 映射，对相同版本或者MD5不再请求。
-
manifest 文件每次都会请求，当然也可以在打开 app 之前预缓存，提前下载文件或者更新 manifest 文件。
Service Worker 简介
从 Web Worker 到 Service Worker
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
Service Worker 是基于 Web Worker 的事件驱动的，执行的机制都是新开一个线程去处理一些额外的任务。对于 Web Worker，可以使用它来进行复杂的计算，因为它并不阻塞浏览器主线程的渲染。而 Service Worker，可以用它来进行本地缓存或请求转发，相当于一个浏览器端本地的 proxy。它可以认为是使用了Web Worker 技术来处理网络请求、响应等方面的事务。
Web Workers 的缺点