Service Worker和HTTP缓存

很多人,包括我自己,初看Service Worker多一个Cache Storage的时候,就感觉跟HTTP长缓存没什么区别。 例如大家讲的最多的Service Worker能让网页离线使用,但熟悉HTTP缓存的朋友,会发现,把整站所有资源设置为长缓存(不带校验),也可以实现离线使用。

那么,Service Worker在缓存方面和HTTP缓存比较,有什么好处呢?

带着这个疑问,我翻阅了一些大神博客 JakeArchibald的《Caching best practices & max-age gotchas》 李熠的《设计一个无懈可击的浏览器缓存方案:关于思路,细节,ServiceWorker,以及HTTP/2

根据实际项目经验,总结出以下。

Service worker除了针对PWA(推送和消息)以外,对普通web来说,在缓存方面,能比http缓存带来一些额外的好处。 可以理解为,SW就是浏览器把缓存管理开放一层接口给开发者。

1、改写默认行为。

例如,浏览器默认在刷新时,会对所有资源都重新发起请求,即使缓存还是有效期内,而使用了SW,就可以改写这个行为,直接返回缓存。

2、缓存和更新并存。

要让网页离线使用,就需要整站使用长缓存,包括HTML。而HTML使用了长缓存,就无法及时更新(浏览器没有开放接口直接删除某个html缓存)。而使用SW就可以,每次先使用缓存部分,然后再发起SW js的请求,这个请求我们可以实施变更,修改HTML版本,重新缓存一份。那么用户下次打开就可以看到新版本了。

3、无侵入式。

无侵入式版本控制。最优的版本控制,一般是HTML中记录所有js css的文件名(HASH),然后按需发起请求。每个资源都长缓存。而这个过程,就需要改变了项目结构,至少多一个js或者一段js控制版本号,发起请求时还需要url中注入冬天的文件名。使用了SW,就可以把这部分非业务逻辑整合到sw js中。 无侵入式请求统计。例如缓存比例统计、图片404统计。

4、额外缓存。

HTTP缓存空间有限,容易被冲掉。虽然部分浏览器实现SW的存储也有淘汰机制,但多一层缓存,命中的概率就要更高了。

5、离线处理。

当监测到离线,而且又没有缓存某个图片时,可以做特殊处理,返回离线的提示。又或者做一个纯前端的404/断网页面。类似Chrome的小恐龙页面。

6、预加载资源。

这个类似prefetch标签。

7、前置处理。

例如校验html/JS是否被运营商劫持?js文件到了UI进程执行后,就无法删除恶意代码,而在SW中,我们可以当作文本一样,轻松解决。当然,在HTTPS环境下出现劫持的概率是极低的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王小雷

Ubuntu16.04安装后开发环境配置和常用软件安装

Ubuntu16.04安装后1.安装常用软件搜狗输入法+编辑器Atom+浏览器Chome+视频播放器vlc+图像编辑器GIMP Image Editor安装+视...

3875
来自专栏Flutter入门到实战

Flutter从配置安装到填坑指南详解

在 Google I/O ’17 上,Google 向我们介绍了 Flutter —— 一款新的用于创建移动应用的开源库。

2.6K5
来自专栏守望轩

Visual Studio 2008 每日提示(十二)

#111、定义最近使用的列表中显示项的数目 原文链接:How to customize the number of items shown in the re...

3704
来自专栏北京马哥教育

用 30 个实例完全解读 TOP 命令

1785
来自专栏Unity

天天德州-海外版-Unity多语言配置实现

不同类型的文本实现不一样,思路是一致的,首先生成本地配置描述,在运行时脚本根据语言类型读取配置数据。

6393
来自专栏hbbliyong

Ubuntu16.04安装后开发环境配置和常用软件安装

Ubuntu16.04安装后1.安装常用软件搜狗输入法+编辑器Atom+浏览器Chome+视频播放器vlc+图像编辑器GIMP Image Editor安装+视...

4368
来自专栏西枫里博客

宝塔面板操作多个域名做301跳转

都知道在网站更换域名的过程中为了保住收录和排名,就需要通过搜索引擎提供的改版工具来进行操作。而其中最重要的就是对老域名进行301永久重定向获得搜索引擎的收录更新...

4741
来自专栏云计算教程系列

如何使用Prometheus监控CentOS 7服务器

Prometheus是由SoundCloud开发的开源监控系统。与其他监控系统(如InfluxDB和Graphite)一样,Prometheus将其所有数据存储...

9160
来自专栏PHP在线

[技巧]丰富的phpstorm编辑器配色方法

1 打开编辑器 phpstorm菜单找到preferences,MAC快捷键[command+,],Editor->Colors&font->font 在此处设...

3825
来自专栏云计算教程系列

如何使用Prometheus监视您的Ubuntu 14.04服务器

Prometheus是由SoundCloud开发的开源监控系统。与其他监控系统(如InfluxDB和Graphite)一样,Prometheus将其所有数据存储...

2050

扫码关注云+社区

领取腾讯云代金券