service worker 是什么？看这篇就够了

service worker 是什么

一句话归纳

一个服务器与浏览器之间的中间人角色，若是网站中注册了service worker那么它能够拦截当前网站全部的请求，进行判断（须要编写相应的判断程序），若是须要向服务器发起请求的就转给服务器，若是能够直接使用缓存的就直接返回缓存再也不转给服务器。从而大大提升浏览体验。

如下是一些细碎的描述

• 基于web worker（一个独立于JavaScript主线程的独立线程，在里面执行须要消耗大量资源的操做不会堵塞主线程）
• 在web worker的基础上增长了离线缓存的能力
• 本质上充当Web应用程序（服务器）与浏览器之间的代理服务器（能够拦截全站的请求，并做出相应的动做->由开发者指定的动做）
• 建立有效的离线体验（将一些不常更新的内容缓存在浏览器，提升访问体验）
• 由事件驱动的,具备生命周期
• 能够访问cache和indexDB
• 支持推送
• 而且可让开发者本身控制管理缓存的内容以及版本

如何使用

1. 注册Service worker 在你的index.html加入如下内容

/* 判断当前浏览器是否支持serviceWorker */
       if ('serviceWorker' in navigator) {
           /* 当页面加载完成就建立一个serviceWorker */
           window.addEventListener('load', function () {
               /* 建立并指定对应的执行内容 */
               /* scope 参数是可选的，能够用来指定你想让 service worker 控制的内容的子目录。 在这个例子里，咱们指定了 '/'，表示 根网域下的全部内容。这也是默认值。 */
               navigator.serviceWorker.register('./serviceWorker.js', {scope: './'})
                   .then(function (registration) {
    
                       console.log('ServiceWorker registration successful with scope: ', registration.scope);
                   })
                   .catch(function (err) {
    
                       console.log('ServiceWorker registration failed: ', err);
                   });
           });
       }

1. 安装worker：在咱们指定的处理程序serviceWorker.js中书写对应的安装及拦截逻辑

/* 监听安装事件，install 事件通常是被用来设置你的浏览器的离线缓存逻辑 */
   this.addEventListener('install', function (event) {
        
       /* 经过这个方法能够防止缓存未完成，就关闭serviceWorker */
       event.waitUntil(
           /* 建立一个名叫V1的缓存版本 */
           caches.open('v1').then(function (cache) {
               /* 指定要缓存的内容，地址为相对于跟域名的访问路径 */
               return cache.addAll([
                   './index.html'
               ]);
           })
       );
   });
   
   /* 注册fetch事件，拦截全站的请求 */
   this.addEventListener('fetch', function(event) {
     event.respondWith(
       // magic goes here
         
         /* 在缓存中匹配对应请求资源直接返回 */
       caches.match(event.request)
     );
   });

以上为一个最简单的使用例子，更多内部api请查看 mdn service worker

注意事项

Service worker运行在worker上下文 --> 不能访问DOM

它设计为彻底异步，同步API（如XHR和localStorage）不能在service worker中使用

出于安全考量，Service workers只能由HTTPS承载

在Firefox浏览器的用户隐私模式，Service Worker不可用

其生命周期与页面无关（关联页面未关闭时，它也能够退出，没有关联页面时，它也能够启动）

兼容状况

有趣的事

在MDN的兼容状况中能够看到Safari 对于Service workers的全线不支持，这是由于经过Service workers能够在浏览器上实现一种相似小程序的功能（PWA）。这将绕过苹果的app store致使苹果不能再和开发者37开分红，因此苹果不喜欢这项技术。ps:不过仍是在18年开始支持了😂