# Services Worker

# Services-Worker

Service workers 是一种提供详细的作为浏览器和网络或缓存间的代理的服务。

与Web worker类似，service worker 是在主脚本文件中注册，引用到一个专门的service worker文件。与一般的web worker不同，service worker有一些额外的特性来实现代理的目的。只要它们被安装且被激活，service worker就可以拦截主文档中发起的任何网络请求，从而使用缓冲中的数据，达到离线运行的目的。

Service Worker 与 Web Worker 相比，相同点是：它们都是在常规的 JS 引擎线程以外开辟了新的 JS 线程。不同点主要包括以下几点：

Service Worker 不是服务于某个特定页面的，而是服务于多个页面的。（按照同源策略） Service Worker 会常驻在浏览器中，即便注册它的页面已经关闭，Service Worker 也不会停止。本质上它是一个后台线程，只有你主动终结，或者浏览器回收，这个线程才会结束。生命周期、可调用的 API 等等也有很大的不同。

# 本质

Service Worker 只是 Service Worker。

Service Worker 只是一个常驻在浏览器中的 JS 线程，它本身做不了什么。它能做什么，全看跟哪些 API 搭配使用。

跟 Fetch 搭配，可以从浏览器层面拦截请求，做数据 mock；
跟 Fetch 和 CacheStorage 搭配，可以做离线应用；
跟 Push 和 Notification 搭配，可以做像 Native APP 那样的消息推送，这方面可以参考 villainhr 的文章：Web 推送技术 (opens new window)

假如把这些技术融合在一起，再加上 Manifest 等，就差不多成了 PWA 了。总之，Service Worker 是一种非常关键的技术，有了它，我们能更接近浏览器底层，能做更多的事情

# 使用

//main.js
navigator.serviceWorker.register('/service-worker.js');



//services-worker.js

// Install （安装）
self.addEventListener('install', function(event) {
    // ...
});

// Activate （激活）
self.addEventListener('activate', function(event) {
    // ...
});

// 监听主文档中的网络请求
self.addEventListener('fetch', function(event) {
    // 返回缓存中的数据
    event.respondWith(
        caches.match(event.request);
    );
});

# 参考

浏览器缓存、CacheStorage、Web Worker 与 Service Worker (opens new window)

← Router路由 Web Worker →