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 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

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

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

1380
来自专栏Python爬虫实战

Python爬虫:爬取在线教程转成pdf

1、网站介绍2、准备工作2.1 软件安装2.2 库安装3、爬取内容3.1 获取教程名称3.2 获取目录及对应网址3.3 获取章节内容3.4 保存pdf3.5 合...

991
来自专栏FreeBuf

WordPress Plugin Quizlord 2.0 XSS漏洞复现与分析

WordPress是使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管...

772
来自专栏PHP在线

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

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

3675
来自专栏有趣的Python

7- Flask构建弹幕微电影网站-网站页面搭建前端搭建404页面搭建

已上线演示地址: http://movie.mtianyan.cn 项目源码地址:https://github.com/mtianyan/movie_proj...

3887
来自专栏Unity

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

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

3683
来自专栏Golang语言社区

【前端编程】加载第三方JS的各种姿势

从网站开发者的角度来看,第三方JS相比第一方JS有如下几个不同之处: 下载速度不可控 JS地址域名与网站域名不同 文件内容不可控 不一定有强缓存(Cache-C...

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

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

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

3260
来自专栏CRPER折腾记

VS Code 折腾记 - (7) 内置Debug功能深入【调教angular-cli 最新版】

很多小伙伴说用了打包工具(Webpack)之后,断点调试相当痛苦; 常规的方式无非是debugger,console.log()大法; 但是,vscode这货天...

922
来自专栏破晓之歌

fiddler网址代理调试工具 原

软件下载地址:https://www.telerik.com/download/fiddler/fiddler4

1023

扫码关注云+社区