浏览器原理篇之Service Worker_浏览器能用 service worker

Service Worker的主要功能

 在2014年的时候，标注居委会就提出了Service Worker的概念，它主要是在页面与网络之间增加拦截器，用来缓存和拦截请求，它也作为PWA来试着解决离线存储和消息推送的问题。对于Service Worker的主要功能也是去拦截请求和缓存资源，这样使得用户在离线环境中，也可以使用网络应用。或者直接在本地中去读取缓存资源，从而加快访问速度。

Service Worker架构

 为了避免JavaScript过多占用主线程时长的情况，浏览器实现了Web Worker功能，并将Web Worker运行在页面的主线程之外，由于Web Worker是在页面的主线程之外所以是没有办法操作Dom的，它可以运行一些其他脚本，并通过postMessage的将执行的结果返回给主线程，另外Web Worker在进行Js脚本执行时，并不能将执行结果保存下来，如果下次同样的操作，则会再进行执行脚本，所以Service Worker需要在Web Worker的基础上在进行加入存储功能来进行保存执行的结果值。

Service Worker安全

 对于安全来讲，因为HTTP是采用明文来进行传输的，存在被监听篡改和劫持的风险，所以在Service Worker中只支持采用Https协议，防止通信数据被拦截与破解，当然Service Worder还需要同时支持Web页面的默认安全策略，比如说同源策略，SCP(本质是建立白名单，告诉外界哪些资源可用)等等。

Service Worker的生命周期与主要事件

• install：当主线程调用register函数去注册对应的sw.js时，就会进行下载执行并解析对应的sw函数，在这里我们可以使用addEventLister监听install对应的事件，并执行对应的回调函数。
• waiting：当install中的对应的回调函数执行完毕后，此时进入到wating状态，此时的sw脚本已经准备好可以执行，但是还仍然是未执行状态，等待下一次进入到此页面时，才会执行对应的sw.js脚本的代码。
• activate: activate标志着sw.js的脚本正式启动，可以响应fetch、push等事件。
• fetch：当浏览器发起http请求时会进行触发，我们可以在这个事件中匹配缓存，返回对应的缓存文件。
• push：与推送通知功能有关。
• sync：与后台同步功能有关。

Service Worker的使用

 对于Service Worker我们需要将其对应的脚本在浏览器中进行注册后使用。下面为注册所对应的代码：

// 判断浏览器是否支持serviceWorker
if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
        navigator.serviceWorker.register('/service-worker.js').then(() => {
            console.info('注册成功')
        }).catch(() => {
            console.info('注册失败')
        });
    });
}
1
2
3
4
5
6
7
8
9
10

当注册完成后，会执行安装对应路径的Service Worker脚本并触发install事件，我们可以在Service Worder脚本文件中进行监听此事件并执行相应的回调函数。

self.addEventListener('install', event => {
    console.log('安装成功')
})
1
2
3

下面我们将实现一个替换全局图片的功能，将全局请求的图片全部换成对应固定的图片。此例中我们将全局中后缀为.png的图片全部替换为3.png，如图所示：

我们1.png与2.png所对应的图片是两朵不一样的花，在此我们可以通过sw.js去将所有以png为后缀的图片，全部替换为一种图片，代码如下：

// 监听网络发起请求所对应的事件
self.addEventListener('fetch', function (event) {
    if (/\.png$/.test(event.request.url)) {
        event.respondWith(fetch('/images/3.png'));
    }
});
1
2
3
4
5
6

效果图：

由此我们可以看出，对应的图片引用路径不同，但是返回的结果图片都是我们所定义的3.png。

这是通过sw实现的对应的小demo，那么由此可见，我们更可以通过将所缓存的图片转换为base64去存储进IndexDB，通过sw脚本去匹配对应的图片文件并返回来实现进一步的缓存，这里indexDB进行存储图片并返回等操作在这里不多赘述了，感兴趣的小伙伴可以自己实现一下~。

结尾

 个人认为Service Worker为我们提供了一些渠道，我们可以对我们的网页进行脑洞大开的操作。Service Worker是PWA的关键，但对于PWA的应用，目前还是不太成熟，传统应用的Web应用要想实现完成的Native App应用目前还是巨大的挑战，虽然PWA技术已经被W3C列为标准，但是safrai不支持mainfest以及Service Worker这两项关键技术，而且国内各版本手机浏览器对Service Worker的支持度都不太相同，所以尽量还是只能做一些缓存还是比较稳定一些的。好啦，今天的分享到此结束啦~