这是我参与8月更文挑战的第19天,活动详情查看: 8月更文挑战
Service Worker是浏览器后台独立于主线程之外的工作线程,正因如此它的处理能力能够脱离浏览器窗体而不影响页面的渲染性能。同时它还能实现诸如推送通知、后台同步、请求拦截及缓存管理等功能。
Service Worker概览
Service Worker是伴随着Google推出的PWA(即Progressive Web App渐进式We)应用)一同出现的技术,它能够实现诸如消息推送、后台加载、离线应用及移动端添加到主屏等堪比原生应用的功能,同时还具备小程序“无须安装、用完即走”的体验特点。虽然Service Worker已被列入W3C标准,但在各端上的兼容性并不理想,目前,来讲应用比较多的还是在基于Chrome的PC端浏览器上。
技术由来
我们都知道JavaScript的执行是单线程的,如果一个任务的执行占用并消耗了许多计算资源,则势必会导致阻塞执行其他任务,这正是单线程的弊端。为此浏览器引入了Web Worker,它是一个独立于浏览器主线程之外的工作线程,可以将较复杂的运算交给它来处理,而无须担心这是否会对页面渲染产生负面影响。Service Worker正是在此基础上增加了对离线缓存的管理能力,它的表现弥补了之前HTML5上采用AppCache实现离线缓存的诸多缺陷。
Service Worker定义了由事件驱动的生命周期,这使得页面上任何网络请求事件都可以被其拦截并加以处理,同时还能访问缓存和IndexedDB,这就可以让开发者制定自定义度更高的缓存管理策略,从而提高离线弱网环境下的Web运行体验。
基本特征
下面来对Service Worker进行简要的归纳。
- 独立于浏览器主线程,无法直接操作DOM
- 在开发过程中可以通过locallost使用,但要部署到线上环境则需要HTTPS的
支持。 - 能够监听并拦截全站的网络请求,从而进行自定义请求响应控制。
- 在不使用的时候会被中止,在需要的时候进行重启。所以我们不能依赖在其onmessage与onfetch的事件监听处理程序中的全局状态,如果有此需要可以通过访问IndexedDB API将全局状态进行存储。
- 广泛使用Promise来处理异步
- 消息推送
- 后台同步