<h2>Service Worker 是什么？</h2>    <p>service worker 是独立于当前页面的一段运行在浏览器后台进程里的脚本。</p>    <p>service worker不需要用户打开 web 页面，也不需要其他交互，异步地运行在一个完全独立的上下文环境，不会对主线程造成阻塞。基于service worker可以实现消息推送，静默更新以及地理围栏等服务。</p>    <p>service worker提供一种渐进增强的特性，使用特性检测来渐渐增强，不会在老旧的不支持 service workers 的浏览器中产生影响。可以通过service workers解决让应用程序能够离线工作，让存储数据在离线时使用的问题。</p>    <p>注意事项：</p>    <p>1.service worker运行在它们自己的完全独立异步的全局上下文中，也就是说它们有自己的容器。</p>    <p>2.service worker没有直接操作DOM的权限，但是可以通过postMessage方法来与Web页面通信，让页面操作DOM。</p>    <p>3.service worker是一个可编程的网络代理，允许开发者控制页面上处理的网络请求。</p>    <p>4.浏览器可能随时回收service worker，在不被使用的时候，它会自己终止，而当它再次被用到的时候，会被重新激活。</p>    <p>5.service worker的生命周期是由事件驱动的而不是通过Client。</p>    <h3>Service Worker生命周期</h3>    <p>service worker拥有一个完全独立于Web页面的生命周期</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ddbf04453970b46ea2043791c4b40937.png"></p>    <ol>     <li> <p>注册service worker，在网页上生效</p> </li>     <li> <p>安装成功，激活 或者 安装失败（下次加载会尝试重新安装）</p> </li>     <li> <p>激活后，在sw的作用域下作用所有的页面，首次控制sw不会生效，下次加载页面才会生效。</p> </li>     <li> <p>sw作用页面后，处理fetch（网络请求）和message（页面消息）事件 或者 被终止（节省内存）。</p> </li>    </ol>    <h3>Service Worker支持使用</h3>    <p>浏览器支持</p>    <p><a href="/misc/goto?guid=4959739575636535314" rel="nofollow,noindex">service worker support</a></p>    <p><img src="https://simg.open-open.com/show/4cc8377d8bf12e00da56cbd6202e1a6f.png"></p>    <p>polyfill</p>    <p>使用 ServiceWorker cache polyfill 让旧版本浏览器支持 ServiceWorker cache API，</p>    <p>https</p>    <p>Server需要支持https</p>    <p>通过service worker可以劫持连接，伪造和过滤响应，为了避免这些问题，只能在HTTPS的网页上注册service workers，防止加载service worker的时候不被坏人篡改。</p>    <p>Github Pages是HTTPS的，可以通过Github做一些尝试</p>    <h3>调试工具</h3>    <p>在调试的时候可以用于unregister、stop、start等操作</p>    <p>chrome访问 chrome://inspect/#service-workers 或 chrome://serviceworker-internals 查看service-workers</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f82dbd62176309ac96715d1d2283442c.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/65d6e6fc6bb2d92be17e6dbd6bed781d.png"></p>    <p>firefox通过 about:debugging#workers 查看</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8445820c73264901dbe77b02f5cb16fd.png"></p>    <h2>离线存储数据</h2>    <p>对URL寻址资源，使用 Cache API 。对其他数据，使用IndexedDB。</p>    <h2>离线阅读</h2>    <h3>demo</h3>    <p>使用 https 访问本文，打开ChromeDevTools，选择Application选项卡->Service Workers</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c420c1cc6263a2a2a7769de38693ed78.png"></p>    <p>可以看到Service Workers注册</p>    <p>点击下面离线保存按钮</p>    <p>然后选择Cache Storage，可以看到文字内容已经缓存到Cache Storage</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/131f5bb4b041496f0d225b088c33d8b1.png"></p>    <p>然后选择Service Workers 勾选 Offline，NetWork出现了:warning:️，然后试试离线访问本文:sunglasses:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e39f48a9d1f1d00c7b07ca6f23ce1556.png"></p>    <h3>原理</h3>    <p>注册 service worker</p>    <p>创建一个 JavaScript 文件（比如：sw.js）作为 service worker</p>    <p>告诉浏览器注册这个JavaScript文件为service worker，检查service worker API是否可用，如果可用就注册service worker</p>    <pre>  <code class="language-javascript">if ('serviceWorker' in navigator) {    navigator.serviceWorker.register('/sw.js').then(function(registration) {      // Registration was successful      console.log('ServiceWorker registration successful with scope: ',    registration.scope);    }).catch(function(err) {      // registration failed :(      console.log('ServiceWorker registration failed: ', err);    });  }</code></pre>    <p>sw.js文件被放在这个域的根目录下，和网站同源。这个service work将会收到这个域下的所有fetch事件。</p>    <p>如果将service worker文件注册为/example/sw.js，那么，service worker只能收到/example/路径下的fetch事件（例如： /example/page1/, /example/page2/）。</p>    <pre>  <code class="language-javascript">// Service Workers  if ('serviceWorker' in navigator && navigator.onLine) {    navigator.serviceWorker.register('/sw.js').then(function(registration) {      console.log('ServiceWorker registration successful with scope: ',    registration.scope);    }).catch(function(err) {      console.log('ServiceWorker registration failed: ', err);    });      var currentPath = window.location.pathname;    var cacheButton = document.querySelector('.offline-btn');      var imageArray = document.querySelectorAll('img');    if(cacheButton) {      cacheButton.addEventListener('click', function(event) {        event.preventDefault();        // 缓存当前链接和使用的图片        var pageResources = [currentPath];        for (i = 0; i < imageArray.length; i++) {          pageResources.push(imageArray[i].src);        }        caches.open('offline-' + currentPath).then(function(cache) {          var updateCache = cache.addAll(pageResources);            updateCache.then(function() {            console.log('Article is now available offline.');            cacheButton.innerHTML = "☺";          });            updateCache.catch(function (error) {            console.log('Article could not be saved offline.');            cacheButton.innerHTML = "☹";          });        });      });    }  }</code></pre>    <p>缓存站点的资源</p>    <p>定义需要缓存的文件，然后在sw注册安装后回到cache Api将资源文件写入缓存。如果所有的文件都被缓存成功了，那么service worker就安装成功了。如果任何一个文件下载失败，那么安装步骤就会失败。</p>    <pre>  <code class="language-javascript">var cacheName = 'v1';  var assetsToCache = [    '/styles/main.css',    '/script/main.js'  ];    self.addEventListener('install', function(event) {    event.waitUntil(      caches.open(cacheName).then(function(cache) {        return cache.addAll(assetsToCache);      }).then(function() {        return self.skipWaiting();      })    );  });</code></pre>    <p>从缓存中加载</p>    <p>service worker成功注册，并且用户浏览了另一个页面或者刷新了当前的页面，service worker将开始接收到fetch事件。</p>    <p>拦截网络请求并使用缓存，缓存命中，返回缓存资源，否则返回一个实时从网络请求fetch的结果。</p>    <pre>  <code class="language-javascript">self.addEventListener('fetch', function(event) {    var requestUrl = new URL(event.request.url);    if (requestUrl.origin === location.origin) {        if (requestUrl.pathname === '/') {        event.respondWith(          caches.open(cacheName).then(function(cache) {            return fetch(event.request).then(function(networkResponse) {              cache.put(event.request, networkResponse.clone());              return networkResponse;            }).catch(function() {              return cache.match(event.request);            });          })        );      }    }      event.respondWith(      caches.match(event.request).then(function(response) {        return response || fetch(event.request);      })    );  });</code></pre>    <p>缓存版本管理</p>    <p>版本修改的时候会触发activate，将旧版本的缓存清理掉。</p>    <pre>  <code class="language-javascript">var OFFLINE_PREFIX = 'offline-';  var CACHE_NAME = 'main_v1.0.0';  self.addEventListener('activate', function(event) {    var mainCache = [CACHE_NAME];    event.waitUntil(      caches.keys().then(function(cacheNames) {        return Promise.all(          cacheNames.map(function(cacheName) {            if ( mainCache.indexOf(cacheName) === -1 && cacheName.indexOf(OFFLINE_PREFIX) === -1 ) {              // When it doesn't match any condition, delete it.              console.info('SW: deleting ' + cacheName);              return caches.delete(cacheName);            }          })        );      })    );    return self.clients.claim();  });</code></pre>    <h2>Service Worker 库</h2>    <ul>     <li> <p><a href="/misc/goto?guid=4959739575727608778" rel="nofollow,noindex">sw-toolbox</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959739575812836864" rel="nofollow,noindex">sw-precache</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959739575896108062" rel="nofollow,noindex">offline-plugin</a> ，webpack离线插件</p> </li>    </ul>    <h2>参考</h2>    <ul>     <li> <p><a href="/misc/goto?guid=4959733392202952323" rel="nofollow,noindex">your-first-pwapp</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959733392273143433" rel="nofollow,noindex">service-workers</a></p> </li>     <li> <p><a href="/misc/goto?guid=4959739576062894721" rel="nofollow,noindex">渐进式 Web App 的离线存储</a></p> </li>    </ul>    <p> </p>    <p>来自：http://kailian.github.io/2017/03/01/service-worker</p>    <p> </p>