Service-Worker

前言本文首先会简略介绍下前端的常见缓存形式，再引入Service Worker的概念，针对其原理和如何使用进行介绍。而后基于google推出的第三方库Workbox，在产品中进行使用实际，并对其原理进行简要分析。作者：刘放编辑：Ein 前端缓存简介先简略介绍一下现有的前端缓存技术计划，次要分为http缓存和浏览器缓存。 http缓存http缓存都是第二次申请时开始的，这也是个陈词滥调的话题了。无非也是那几个http头的问题： ExpiresHTTP1.0的内容，服务器应用Expires头来通知Web客户端它能够应用以后正本，直到指定的工夫为止。 Cache-ControlHTTP1.1引入了Cathe-Control，它应用max-age指定资源被缓存多久，次要是解决了Expires一个重大的缺点，就是它设置的是一个固定的工夫点，客户端工夫和服务端工夫可能有误差。所以个别会把两个头都带上，这种缓存称为强缓存，表现形式为： Last-Modified / If-Modified-SinceLast-Modified是服务器通知浏览器该资源的最初批改工夫，If-Modified-Since是申请头带上的，上次服务器给本人的该资源的最初批改工夫。而后服务器拿去比照。若资源的最初批改工夫大于If-Modified-Since，阐明资源又被改变过，则响应整片资源内容，返回状态码200；若资源的最初批改工夫小于或等于If-Modified-Since，阐明资源无新批改，则响应HTTP 304，告知浏览器持续应用以后版本。 Etag / If-None-Match后面提到由文件的批改工夫来判断文件是否改变，还是会带来肯定的误差，比方正文等无关紧要的批改等。所以推出了新的形式。 Etag是由服务端特定算法生成的该文件的惟一标识，而申请头把返回的Etag值通过If-None-Match再带给服务端，服务端通过比对从而决定是否响应新内容。这也是304缓存。浏览器缓存Storage简略的缓存形式有cookie，localStorage和sessionStorage。这里就不具体介绍他们的区别了，这里说下通过localStorage来缓存动态资源的优化计划。localStorage通常有5MB的存储空间，咱们以微信文章页为例。查看申请发现，根本没有js和css的申请，因为它把全副的不须要改变的资源都放到了localStorage中：所以微信的文章页加载十分的快。前端数据库前端数据库有WebSql和IndexDB，其中WebSql被标准废除，他们都有大概50MB的最大容量，能够了解为localStorage的加强版。利用缓存利用缓存次要是通过manifest文件来注册被缓存的动态资源，曾经被废除，因为他的设计有些不合理的中央，他在缓存动态文件的同时，也会默认缓存html文件。这导致页面的更新只能通过manifest文件中的版本号来决定。所以，利用缓存只适宜那种长年不变动的动态网站。如此的不不便，也是被废除的重要起因。 PWA也使用了该文件，不同于manifest简略的将文件通过是否缓存进行分类，PWA用manifest构建了本人的APP骨架，并使用Servie Worker来管制缓存，这也是明天的配角。 Service WorkerService Worker实质上也是浏览器缓存资源用的，只不过他不仅仅是Cache，也是通过worker的形式来进一步优化。他基于h5的web worker，所以相对不会妨碍以后js线程的执行，sw最重要的工作原理就是： 1、后盾线程：独立于以后网页线程； 2、网络代理：在网页发动申请时代理，来缓存文件。兼容性能够看到，基本上新版浏览器还是兼容滴。之前是只有chrome和firefox反对，当初微软和苹果也相继反对了。成熟水平判断一个技术是否值得尝试，必定要思考下它的成熟水平，否则过一段时间又和利用缓存一样被标准摈弃就难堪了。所以这里我列举了几个应用Service Worker的页面：淘宝网易新闻考拉所以说还是能够尝试下的。调试办法一个网站是否启用Service Worker，能够通过开发者工具中的Application来查看：被Service Worker缓存的文件，能够在Network中看到Size项为from Service Worker：也能够在Application的Cache Storage中查看缓存的具体内容：如果是具体的断点调试，须要应用对应的线程，不再是main线程了，这也是webworker的通用调试办法：应用条件sw 是基于 HTTPS 的，因为Service Worker中波及到申请拦挡，所以必须应用HTTPS协定来保障平安。如果是本地调试的话，localhost是能够的。而咱们刚好全站强制https化，所以正好能够应用。生命周期大略能够用如下图片来解释：注册要应用Service Worker，首先须要注册一个sw，告诉浏览器为该页面调配一块内存，而后sw就会进入装置阶段。一个简略的注册形式： (function() { if('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js'); }})()当然也能够思考全面点，参考网易新闻的注册形式： "serviceWorker" in navigator && window.addEventListener("load", function() { var e = location.pathname.match(/\/news\/[a-z]{1,}\//)[0] + "article-sw.js?v=08494f887a520e6455fa"; navigator.serviceWorker.register(e).then(function(n) { n.onupdatefound = function() { var e = n.installing; e.onstatechange = function() { switch (e.state) { case "installed": navigator.serviceWorker.controller ? console.log("New or updated content is available.") : console.log("Content is now available offline!"); break; case "redundant": console.error("The installing service worker became redundant.") } } } }). catch(function(e) { console.error("Error during service worker registration:", e) }) })后面提到过，因为sw会监听和代理所有的申请，所以sw的作用域就显得额定的重要了，比如说咱们只想监听咱们专题页的所有申请，就在注册时指定门路： ...