浏览器缓存、CacheStorage、Web Worker 与 Service Worker about blog HOT 14 OPEN

是，通过设置 HTML 页面的 header，的确可以将 HTML 页面也设置为强缓存。然而，要考虑下面 2 个问题。

1. 假如 HTML 要更新呢？你怎么办？你总不能像 js 文件那样换 MD5 戳吧，因为页面的 URL 只有一个。
2. 即便你把 HTML 做成强缓存，当你断开网络时，你会发现你访问到的是一个“无网络”的页面。为什么呢？因为当网络断开时，浏览器默认是会显示“无网络”页面的，除非你这个页面进行了“可离线访问”的特殊操作，比如应用缓存需要在 html 标签中生命 manifest 属性，比如 service-worker 中需要监听 fetch 事件。

@zhaozhiwen2014

from blog.

这几个技术结合起来就是 PWA 了

from blog.

的确如此。 @riskers

from blog.

@youngwind 最近一年一直在关注 PWA

from blog.

这种浏览器缓存（我称之为 Header 缓存）有两个共同的缺点：

“当没有网络的时候，应用无法访问，因为 HTML 页面总得去服务器获取。” 这句怎么理解，通过header设置，页面不是可以缓存下来吗

from blog.

@youngwind 谢谢 你文中 说的“最近在翻红宝书” 红宝书 是哪本书 求推荐

from blog.

@zhaozhiwen2014 javascript 高级程序设计

from blog.

结合CacheStorage+Service Worker+diff算法应该可以实现更好的前端静态资源增量更新。

from blog.

你说的我倒是第一次听说，我在网上找了些资料：用增量更新算法为 web 应用节省流量，相关 PPT，这是你说的意思吗？当然，文中用的是 localStorage，你说的是 CacheStorage+Service Worker，不过关键的 diff 算法应该是一致的。
这种方案，有点类似于 Webpack 的热更新，不过 Webpack 的热更新只在开发环境用，不需要考虑实际环境的 Hash 等问题。
@vevlins

from blog.

对的。我是在思考静态资源到底是合并还是拆分想到了增量更新这个想法，我也看到了腾讯的这个开源项目，另外据说也有一些cdn做了这样的事情，但是这样需要对cdn整体做改动，不掌握在项目方自己手里。

另外这种直接弃用http缓存的方案我认为可能会造成一些隐性的问题，我对CacheStorage的了解不多，应该是相当于提供了js操作http缓存的能力吧。而且结合Service Worker还可以做一些资源有效性的批量查询等。

相对于localstorage的方案，这样似乎改动更小，对原有的缓存机制也没有做太大的颠覆，想要接入或者降级应该也会更稳妥一点。

from blog.

shaofeng 👍 这关注量

from blog.

有个问题请教一下，浏览器本身是有http的cache control缓存的，如果这个缓存没有过期，当页面发起一个请求时，是先经过fetch拦截还是浏览器本身的http缓存？

from blog.

浏览器的缓存机制这篇文章的链接似乎已经过时，我找到了有效的链接：https://git-lt.github.io/2016/11/21/web-cache/

from blog.

Good

from blog.