掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

Service Worker到底是个什么鬼?

  • me : "Service Worker, 你是个什么鬼?
  • Service Worker: "我是一个可编程的网络代理。
  • me : "... 什么玩意儿?

20157月,我正在参加一个JavaScript大会。台上演讲的人是Jake Archibald,也就是那个对Service Worker设计贡献颇多的人。

就在那一天,他在台上向观众介绍了一个叫做Service Worker的东西,我的理解是,这个东西能把网站变成本地应用。

这个概念听上去不错,我也想在自己的web项目中使用Service Worker。但是问题是,这个东西有点儿难以理解……它不是库、不是一种新的HTML元素,也不是一个新的JavaScript语法。每当我读到类似《Service Worker介绍》这样的文章的时候,文中出现的代理缓存这些词汇总会让我感到应接不暇。为了理解Service Worker的作用,我用了一种非常规的方式:涂鸦。这种理解方式效果还真不错,我终于理解了Service Worker这个东西:它就是一个外星人,你可以让它住在用户的浏览器上。还是听不懂?那就请听我慢慢道来。

Service WorkerWeb浏览器宇宙中的外星人

 

我们将Web浏览器想象成一个星球(例如地区),而这个星球是计算机银河中的一部分。在这个星期上,人们使用各种各样的语言,例如HTMLCSSJavaScript等,这些语言帮助人们的创建了一个巨大的社会,社会中的成员就是海量的网页。

 

这个星球发展出了一种和地外空间进行联系的方式,这种方式就是超文本传输协议(HTTP)。这个工具能让我们获取来自其他星系(服务器)的资源。正是这种方式,让浏览器变成了我们获取信息的窗口。也是因为这种方式,才会有数十亿的人每天都在使用互联网,无法自拔。

 

HTTP听上去就像是种魔法。但是在现实中,要想使用HTTP与其他星系沟通,你需要借助一个管道(互联网)。管道的直径和长度,取决于你给管道工(ISP)叫了多少钱,或者你所在的地区使用了哪种基础设施。当管道又细又长的时候,你从其他星系获取信息的时间就会更长,反之则更短。

 

问题是,这个管道有时候也会出现堵塞(网络断开),在这种情况下,我们就会突然回到史前时代,除了恐龙什么也看不到。

没关系!Service Worker来帮忙!

Service Worker就像是某种站在星球浏览器和互联网管道之间的东西。以前你是把请求直接通过管道发送到其他星系,而现在,你可以将请求发给Service Worker,让它去帮你跑腿,为你取回信息。在我看来,Service Worker就像是驾驶着UFO的外星人。

 

关于Service Worker你需要知道的3件事

1 Service Worker需要你对它进行召唤。如果不召唤,Service Worker就不会出现。当你让Service Worker为你提供帮助的时候,它们会立刻出现,直到它们觉得自己已经完成了你所交代的所有事情。它们不会干.terminate()这样的事情。

2 Service Worker住在页面之外的地方。在关闭了浏览器窗口之后,它们就会去睡觉。但是,在某些时候,即使在浏览器窗口关闭的时候,你也能把它们唤醒,或是让它们走开。但是总体来说,你(开发者)无法控制Service Worker的生命周期,也是出于这个原因,我才会觉得它们有点像外星人。

3 如上所述,Service Worker住在页面之外,也就是说它无法触碰到浏览器星球之内的元素。你无法在Service Worker代码内访问window或是document也无法在这里修改DOM元素。

Service Worker能帮你完成哪些任务?

1. 与缓存进行交互

你可以让Service Worker扮演中间人的角色,让它来监控fetch事件。你还可以让Service Worker将特定的资源保存在缓存中。在用户请求缓存中的东西的时候,Service Worker能够立刻从缓存中获取数据,而不通过外部HTTP调用。只要缓存中有用户需要的数据,即使没有网络连接,浏览器也能显示内容。

 

2. 发送Push Notification

还记得之前我说的在某些时候,即使在浏览器窗口关闭的时候,你也能把它们唤醒这句话吗。利用这个特性,你可以用它来发送push notification

 

3. 运行背景同步

在浏览器关闭的情况下激活Service Worker,这还意味着它可以在背景中运行。例如,在离线的情况下,你用浏览器发送了一个文件,Service Worker可以保存这个任务,在恢复网络连接之后再将文件上传到外部服务器中。

 

如果你也对Service Worker有些困惑,希望这篇文章能为你提供帮助。你是如何理解Service Worker的?欢迎在评论区留下你的看法。

qrcode_for_gh_9de197bcc61b_258.jpg

原文来自:SDK.cn

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

0512-88869195
数 据 驱 动 未 来
Data Drives The Future