Service Worker

当下PWA比较火,而Service Worker是实现PWA的一项关键技术,今天我们一起了解下关于Service Worker的一些基础知识和适用场景。

什么是Server Worker

我们先来看一下官方文档中对于Server Worker的核心定义:

Service workers 本质上充当Web应用程序与浏览器之间的代理服务器,也可以在网络可用时作为浏览器和网络间的代理。

这是一条很准确的定义,但对于不了解Service Worker的同学来说可能并不形象,下面我们更形象的理解一下这个概念。我们以去银行取钱为例子,其过程大概如下图:

从上面的图中我们可以看到,银行的钱存在金库中,客户取钱时并不是直接去金库里拿,而是需要通过银行的工作人员,再告知银行工作人员需要多少钱,并出示相应凭证后,由银行工作人员从金库中拿出钱给客户,并从账户中减去相应金额。这么做的原因很容易理解,因为金库是公用的,所有客户的钱都放在里面,我们无法保证每个客户都能只拿走属于自己的钱,并按照实际情况更新金库记录。

我们的应用在请求服务器资源时,其过程也是类似的:

从上面的图可以看到,请求资源的过程中,HTTP协议充当了取钱过程中的银行工作人员,客户端应用需要的资源在服务器上,但应用却无法直接去服务器获取资源,而是通过HTTP协议进行,请求中指定的各种Header信息,就是取钱时的凭证。

而Service Worker可以理解成,在客户端创建了一个属于自己的金库,先看图:

当我们需要取钱或者获取资源时,可以先从本地的金库中拿,本地金库没有,再通过原来的流程获取。这时我们再回头看文章开始的定义,应该就能够理解了。

Service Worker与Cache的关系

正常情况下,客户端获取一个资源的过程有如下三步:

而关于请求资源的优化,一般也集中在这三步完成:

  1. 不发出请求就能够获得资源;
  2. 提高服务器查找资源的速度;
  3. 减小返回内容的体积;

看完上面的部分我们可以发现,当使用Service Worker中已有的资源时,客户端应用获取资源并没有进入HTTP请求的流程,也就是说,通过Service Worker,客户端应用可以在不发出请求的情况下获得资源,这很容易就让我们想到缓存,那么Service Worker和我们平时经常提到的强缓存和协商缓存等是什么关系呢?整理了一个图,可以先看下:

从整体上来说,应用获取一个资源的缓存类型分为上图中的四种,分别是Service Worker、Memory Cache、Disk Cache和No Cache。资源查找顺序为从左向右,找到资源则返回,未找到则继续寻找,直至最终获取资源。上面的图中可以清楚的看出Service Worker在缓存类型中的位置,也能看到跟平时经常提到的强缓存和协商缓存的关系。

Service Worker使用逻辑

在了解了Service Worker的概念后,我们看下Servise Worker的基本使用逻辑,使用它的基础过程是首先注册一个Woker,这时浏览器会在后台启动一个新的线程,在这个线程启动后,会按照Service Worker中的代码逻辑将一些资源缓存下来,缓存完毕后,启动对页面请求的监听,当监听到页面请求资源时可以做出相对应的响应,比如如果资源在Service Worker中缓存过了,就可以直接返回资源。

注册

Service Worker对象保存在window.navigator内,首先调用register方法进行注册,导入一个js文件,文件中是我们的Service Worker逻辑,代码如下:

navigator.serviceWorker.register('/sw.js').then(function(reg){    console.log("success", reg);}).catch(function(err) {    console.log("error", err);});

需要注意的是Service Worker是有作用域的,它的作用域为文件的当前路径,Service Worker文件只能管理自己作用下的资源,比如abcde.com/home/sw.js 的作用域为abcde.com/home/。

激活

注册后的Service Worker就能在调试工具中看到了,下面是一个chrome调试面板的截图:

画红框的内容是一些比较关键的信息,比如其中表明了Service Worker的文件名和路径,以及当前Service Worker的状态,Service Worker的状态分为几种,STOPPED(已停止)、STARTING(正在启动)、RUNNING(正在运行)和STOPPING(正在停止),比如上面的截图就处于RUNNING状态。

只有处于running状态的Service Worker才能生效,这就需要对注册后的Service Worker进行加载和激活,注册完毕后,Service Worker会自动开始下载,下载后会触发install事件,我们可以监听这个事件并进行下载资源的操作,代码如下:

const CACHE_NAME = "demo-a";this.addEventListener("install", function(event) {    console.log("install service worker success");    caches.open(CACHE_NAME);    let cacheResources = ["https://abcde.com/demo.js"];    event.waitUntil(        caches.open(CACHE_NAME).then(cache => {            cache.addAll(cacheResources);        })    );});

经过上面的代码,demo.js文件就被我们缓存下来了,下载完后Service Worker就会执行激活:

this.addEventListener("active", function(event) {    console.log("service worker active success");});

此时我们通过开发者工具就能看到一个激活的Service Worker了,整体梳理一下大概是下面的过程:

需要注意的是,图中灰色的部分是一个独立的特殊线程,并不是浏览器渲染页面执行js的线程,因此使用Service Worker的过程中无需担心会影响页面的渲染。

更新

我们注册了Service Worker后,还面临着更新的问题,当我们的业务迭代时必然要更新Service Worker,在我们理解了它的整个注册过程后,理解更新就很简单了,直接上图:

当应用加载时,会下载Service Worker文件,这是在浏览器中就会有两个文件,一个是当前正在使用的Service Worker,一个是新下载的Service Worker,当新下载的文件下载完毕后,浏览器会对两个文件进行Diff操作,如果发现文件没有更新,则会丢弃掉新下载的Service Worker文件,如果发现有变化,则会加载新的Service Worker,但新加载的Service Worker会处于wating状态,并不会实际发挥作用,只有当整个浏览器中对正在运行的Service Worker没有依赖时,才会将运行中的Service Worker抛弃,将新的Servier Worker置为激活状态。

常见使用场景

  1. 用于浏览器缓存,提高加载速度;
  2. 实现离线应用,最近PWA如此火爆;
  3. 实现消息的主动推送,为web应用增加一种给力的交互方式;

兼容性

我们了解一些Service Worker的基础知识,以及一些比较常见的使用场景,那么目前Service Worker的兼容性如何呢,看下图

目前主流的现代浏览器支持度还是不错的,但是到目前为止全系列的IE浏览器均不支持Service Worker,而且有一点感受很明显,在查资料的过程中,看了网上不少的博客,不同的博客上也有当时写博客时的Service Worker支持度,可以明显感觉到Service Worker的支持程度在快速提升,随着支持度的提升,相信会有越来越多的开发者在项目中使用这项技术。

借助Service Worker,真正让PWA应用变得流行,也许就在不久的将来。

(0)

相关推荐

  • PWA技术及其用户体验设计

    -服务器端渲染(SSR) 意味着网站每次都是在服务器上渲染,因此它提供了更快的首次加载,但是在页面之间跳转需要每次都下载所有内容,因而它的加载速度往往会比较慢.   -客户端渲染(CSR) 页面是在客 ...

  • 网站前端性能优化终极指南

    image.png 性能黄金法则:80- 90%的终端用户响应时间花在下载前端,即页面上的所有组件:img.stylesheets.scripts等 1.缩小HTML.CSS和JavaScript 减 ...

  • ASP.NET Core Blazor Webassembly 之 渐进式应用(PWA)

    Blazor支持渐进式应用开发也就是PWA.使用PWA模式可以使得web应用有原生应用般的体验. 什么是PWA PWA应用是指那些使用指定技术和标准模式来开发的web应用,这将同时赋予它们web应用和 ...

  • (超详细)页面性能利器:缓存

    缓存是一项用来提高网站性能不可或缺的技术,利用这项技术可以很好地提高 web 的性能. 缓存可以很有效地降低网络的时延,同时也会减少大量请求对于服务器的压力. 我相信你看完这篇文章后对缓存会有一个全新 ...

  • .NET 中的 Worker Service 入门介绍

    dotNET跨平台 今天 以下文章来源于技术译站 ,作者技术译民 翻译自 Steve Gordon 2020年3月30日的文章 <WHAT ARE .NET WORKER SERVICES?&g ...

  • 绝了!这款工具让SpringBoot不再需要Controller、Service、DAO、Mapper!

    程序员涨点薪吧 今天 Dataway介绍 Dataway 是基于 DataQL 服务聚合能力,为应用提供的一个接口配置工具,使得使用者无需开发任何代码就配置一个满足需求的接口.整个接口配置.测试.冒烟 ...

  • 我选择赞美微小,赞美一间屋子的沉默 | Pat Service

    点击图片,直达「美碎」官方社区 Pat Service 加拿大女艺术家Pat Service的小画乍一看很简单,画面元素不多,却让我过目难忘.注视的时间越久,就越愉悦. 它们是自由.松散而沉默的.湖泊 ...

  • Service Mesh架构下的认证与授权

    认证与授权几乎是所有系统必不可少要处理的问题.在传统架构下,我们习惯了在程序中写一些代码或引一些类库来处理其相关的逻辑,但如果在Service Mesh架构下,会有什么不同? Service Mesh ...

  • 聊一聊:Service层你觉得有用吗?

    前段日子在社群(点击加入)里看到有人讨论关于Service层接口的问题,DD也经常碰到周围的新人有问过一些类似的问题:一定要写个Service层的接口吗?Service层的接口到底用做什么用的呢?好像 ...

  • Windows Activation Service(WAS)和万维网发布服务(W3SV)停止,解决方法

    系统升级后IIS出现下述情况,不能正常打开WAS与W3SVC. 解决办法就是到service中将这两个打开即可解决问题.以win10系统简单介绍. 在搜索中输入service,然后点击最佳匹配中的服务 ...

  • 《战地6》将提供更多玩法 更注重Live Service 战地5推荐使用战神加速器

    EA首席执行官Andrew Wilson在近期的财报电话会议上表示,公司对新游戏<战地6>有一个蓝图,即以"AAA级付费体验"的形式发布游戏,并随着时间的推移,该游戏会 ...

  • 服务设计 (Service Design) 与用户体验设计 (User Experience Design) 有何区别?

    本文我们将重点解释SD服务设计相对于UX用户体验设计,究竟有何与众不同.文章将更详细地探讨采用服务设计方法解决问题的意义,并且将确定服务设计最适合解决的问题类型.最后我们将在相互关联的全球世界中,为服 ...

  • 【搞机录】努比亚Nubia Z17安装谷歌框架服务Google Service

    前两个月给老妈买的努比亚Z17,因为N年前用过Z11她蛮熟悉的,所以这次新机还是努比亚,一直没给换上,太后社交活动太过丰富,没时间学. 还有一个理由,拿到手机的时候试着用傻瓜办法装谷歌框架GMS,用了 ...