智能机器人Service Worker(服务工作线程)

在没有网络(离线)的情况下,利用Chrome浏览器浏览网站,Chrome浏览器会呈现如下恐龙游戏

这是Chrome在提醒我们已经脱离了信息时代,回到远古恐龙时代。
当然,你也可以通过玩这款类似超级玛丽的游戏来安慰一下自己。
而Service Worker的出现,恰恰能改变这种现状。

查看你手机中的App,你会发现大部分App在离线的情况下,依旧能够使用部分功能。
而浏览器如果在离线的情况下,除了使用manifest=”cache.manifest”
来离线保存页面之外,可选的其他功能很少。
使用Service Worker能让你页面实现类似App功能,像原生应用一样。
从浏览器发送请求到渲染整个页面,之间的交互就像是客户端和服务端直接沟通联系一样。
由于智能机器人Service Worker的加入,浏览器可以先发送请求到Service Worker。
浏览器调用Service Worker,一旦机器人被调用,就没法中断休息。
Service Worker脱离页面,无法控制Service Worker去修改页面中的元素。
由于脱离页面,即使浏览器关闭,Service Worker 依旧能在后台正常工作,资源依旧能缓存在Service work。
你在浏览器离线时发送一些文件,Service Worker 会在网络连接有效时再把它们上传到外部服务器
既然Service Worker也能够缓存资源,那浏览器怎么获取缓存的资源?

浏览器请求的缓存资源

这里,我们可以从缓存距离的远近去获取资源

  1. 内存缓存
    在当前页面,如果浏览器请求的资源之前就已经有获取过。那么资源会缓存在内存中。浏览器会优先从内存缓存中去获取资源。
    为了提高性能,往往会从业务的角度会添加如下代码:

    <link rel="preload" href="/css/master.css">

    那么这个资源就会被预加载到内存缓存中。从内存缓存中获取资源,会忽略HTTP中设定什么pragma,Expires,Cache-Control,Last-Modified,Etag.即使HTTP设定不缓存,内存缓存依旧存在。

  2. Service Worker缓存
    当然是有安装Service Worker的情况下,才有存在这个缓存。Service Worker只能复制特定的域.缓存的控制也是由于开发者自己控制编写,而不是浏览器控制。
    这时候浏览器即使没有网络连接,依旧可以展示页面内容
  3. HTTP缓存
    HTTP缓存中又可以分为强缓存和协商缓存。
    强缓存主要包括Expires,Cache-Control.浏览器自己判定,不会发送请求到服务器。获取成功,返回200
    协商缓存主要包括Last-Modified,Etag。 浏览器发送请求到服务器,获取成功,返回304
    这里就不在多说描述.
  4. HTTP2.0 的推送缓存
    HTTP 2.0的推送功能有一个推送容器,这个容器并不是持久的。当会话结束后,未被认领的资源(例如,从来没有被请求匹配到的)就会被移除。

推送

由于Service Worker智能机器人的存在,即使网络不在,他依旧能推送消息给浏览器

学习资料

Service Worker仍然是一个实验性的功能。此功能有些浏览器仍在开发中
有关Service Worker的学习资料,请访问
MDN 使用Service Workers
服务工作线程