Service Worker

2019年8月31日 116次阅读 来源: 信达

当下PWA比较火，而Service Worker是完成PWA的一项症结手艺，本日我们一起相识下关于Service Worker的一些基本知识和实用场景。

什么是Server Worker

我们先来看一下官方文档中关于Server Worker的中心定义：

Service workers 本质上充任Web运用程序与浏览器之间的代办服务器，也可以在收集可用时作为浏览器和收集间的代办。

这是一条很正确的定义，但关于不相识Service Worker的同砚来讲可以并不抽象，下面我们更抽象的明白一下这个观点。我们以去银行取钱为例子，其历程或许以下图：

《Service Worker》

从上面的图中我们可以看到，银行的钱存在金库中，客户取钱时并非直接去金库里拿，而是须要经由过程银行的工作人员，再示知银行工作人员须要多少钱，并出示相应凭据后，由银行工作人员从金库中拿出钱给客户，并从账户中减去相应金额。这么做的缘由很轻易明白，由于金库是公用的，一切客户的钱都放在内里，我们没法保证每一个客户都能只拿走属于本身的钱，并根据现实情况更新金库纪录。

我们的运用在要求服务器资本时，其历程也是相似的：

《Service Worker》

从上面的图可以看到，要求资本的历程当中，HTTP协定充任了取钱历程当中的银行工作人员，客户端运用须要的资本在服务器上，但运用却没法直接去服务器猎取资本，而是经由过程HTTP协定举行，要求中指定的种种Header信息，就是取钱时的凭据。

而Service Worker可以明白成，在客户端创建了一个属于本身的金库，先看图：

《Service Worker》

当我们须要取钱或许猎取资本时，可以先从当地的金库中拿，当地金库没有，再经由过程本来的流程猎取。这时候我们再回头看文章最先的定义，应当就可以明白了。

Service Worker与Cache的关联

平常情况下，客户端猎取一个资本的历程有以下三步：

《Service Worker》

而关于要求资本的优化，平常也集合在这三步完成：

  1. 不发出要求就可以取得资本；
  2. 进步服务器查找资本的速率；
  3. 减小返回内容的体积；

看完上面的部份我们可以发明，当运用Service Worker中已有的资本时，客户端运用猎取资本并没有进入HTTP要求的流程，也就是说，经由过程Service Worker，客户端运用可以在不发出要求的情况下取得资本，这很轻易就让我们想到缓存，那末Service Worker和我们日常平凡常常提到的强缓存和协商缓存等是什么关联呢？整理了一个图，可以先看下：

《Service Worker》

从团体上来讲，运用猎取一个资本的缓存范例分为上图中的四种，分别是Service Worker、Memory Cache、Disk Cache和No Cache。资本查找递次为从左向右，找到资本则返回，未找到则继承寻觅，直至终究猎取资本。上面的图中可以清晰的看出Service Worker在缓存范例中的位置，也能看到跟日常平凡常常提到的强缓存和协商缓存的关联。

Service Worker运用逻辑

在相识了Service Worker的观点后，我们看下Servise Worker的基本运用逻辑，运用它的基本历程是起首注册一个Woker，这时候浏览器会在背景启动一个新的线程，在这个线程启动后，会根据Service Worker中的代码逻辑将一些资本缓存下来，缓存终了后，启动对页面要求的监听，当监听到页面要求资本时可以做出相对应的相应，比方假如资本在Service Worker中缓存过了，就可以直接返回资本。

注册

Service Worker对象保存在window.navigator内，起首挪用register要领举行注册，导入一个js文件，文件中是我们的Service Worker逻辑，代码以下：

navigator.serviceWorker.register('/sw.js')
.then(function(reg){
    console.log("success", reg);
}).catch(function(err) {
    console.log("error", err);
});

须要注重的是Service Worker是有作用域的，它的作用域为文件的当前途径，Service Worker文件只能治理本身作用下的资本，比方abcde.com/home/sw.js 的作用域为abcde.com/home/。

激活

注册后的Service Worker就可以在调试东西中看到了，下面是一个chrome调试面板的截图：

《Service Worker》

画红框的内容是一些比较症结的信息，比方个中表清楚明了Service Worker的文件名和途径，以及当前Service Worker的状况，Service Worker的状况分为几种，STOPPED（已住手）、STARTING（正在启动）、RUNNING（正在运转）和STOPPING（正在住手），比方上面的截图就处于RUNNING状况。

只要处于running状况的Service Worker才见效，这就须要对注册后的Service Worker举行加载和激活，注册终了后，Service Worker会自动最先下载，下载后会触发install事宜，我们可以监听这个事宜并举行下载资本的操纵，代码以下：

const CACHE_NAME = "demo-a";
this.addEventListener("install", function(event) {
    console.log("install service worker success");
    caches.open(CACHE_NAME);
    let cacheResources = ["https://abcde.com/demo.js"];
    event.waitUntil(
        caches.open(CACHE_NAME).then(cache => {
            cache.addAll(cacheResources);
        })
    );
});

经由上面的代码，demo.js文件就被我们缓存下来了，下载完后Service Worker就会实行激活：

this.addEventListener("active", function(event) {
    console.log("service worker active success");
});

此时我们经由过程开发者东西就可以看到一个激活的Service Worker了，团体梳理一下或许是下面的历程：

《Service Worker》

须要注重的是，图中灰色的部份是一个自力的特别线程，并非浏览器衬着页面实行js的线程，因而运用Service Worker的历程当中无需忧郁会影响页面的衬着。

更新

我们注册了Service Worker后，还面临着更新的题目，当我们的营业迭代时必定要更新Service Worker，在我们明白了它的全部注册历程后，明白更新就很简朴了，直接上图：

《Service Worker》

当运用加载时，会下载Service Worker文件，这是在浏览器中就会有两个文件，一个是当前正在运用的Service Worker，一个是新下载的Service Worker，当新下载的文件下载终了后，浏览器会对两个文件举行Diff操纵，假如发明文件没有更新，则会扬弃掉新下载的Service Worker文件，假如发明有变化，则会加载新的Service Worker，但新加载的Service Worker会处于wating状况，并不会现实发挥作用，只要当全部浏览器中对正在运转的Service Worker没有依靠时，才会将运转中的Service Worker扬弃，将新的Servier Worker置为激活状况。

罕见运用场景

  1. 用于浏览器缓存，进步加载速率；
  2. 完成离线运用，近来PWA云云火爆；
  3. 完成音讯的主动推送，为web运用增添一种给力的交互体式格局；

兼容性

我们相识一些Service Worker的基本知识，以及一些比较罕见的运用场景，那末现在Service Worker的兼容性怎样呢，看下图

《Service Worker》

现在主流的当代浏览器支撑度照样不错的，然则到现在为止全系列的IE浏览器均不支撑Service Worker，而且有一点感觉很显著，在查资料的历程当中，看了网上不少的博客，差别的博客上也有当时写博客时的Service Worker支撑度，可以显著感觉到Service Worker的支撑水平在疾速提拔，跟着支撑度的提拔，置信会有越来越多的开发者在项目中运用这项手艺。

借助Service Worker，真正让PWA运用变得盛行，或许就在不久的未来。

    原文作者：信达
    原文地址: https://segmentfault.com/a/1190000018349696
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞