可不可以将网站的静态资源持久地缓存到浏览器中？

[iamzuoxinyu]

比如推特、新浪微博这种，我们每次请求页面，绝大部分情况下只是请求了一些固定格式的动态信息，就像客户端每次刷新只是请求 API 并解析返回的 json 。像这类偏向获取固定资源的网站，可不可以让浏览器把所有低频率变化的 HTML 、 CSS 、 JS 和部分图片等静态资源持久性地存储下来，而每次打开或者刷新都以 ajax 请求 API 呢？ 可以在第一次访问网站时随页面附加一个 json 或 xml 配置文件，此文件中指明哪些资源可以持久存储，哪些资源需要动态变化，以及每种资源的缓存失效日期。对于持久存储的资源，在每次的请求头中增加一条失效检查的字段，相应的在 server 端会检查这个头，如果存在更新，则返回更新的资源，否则只返回动态内容。 有这种可行性么？

[ho121]

http://www.w3schools.com/HTML/html5_app_cache.asp

[iamzuoxinyu]

@ho121 孤陋寡闻了。。。那为什么少见有这种做法的网站呢？

[ZE3kr]

@iamzuoxinyu 刷新缓存是个难题，这种主要是用在可以离线使用的 Web app 上

[fzleee]

建议楼主看看 zeronet

[skydiver]

难道现在不是这样的么？只是没有这个文件，而是在请求响应头里

[tabris17]

HTTP 协议 Cache-Control 头，早就实现了

[bdbai]

@ho121 MDN 表示 AppCache 技术 “ deprecated ”，鼓励使用 Service Worker 。

[cstome]

我的做法就是 header 的缓存过期时间设置长一点（一个月），然后前端向服务器请求版本号，不一样则强制刷新。

那个 HTML5 的 app cache 也试过，感觉坑很多，还不如我这样，而且确实没什么网站用。

[iamzuoxinyu]

@cstome 具体都有哪些坑呢？对比 electronic 这样的 webkit 封装技术又有什么异同呢？

[aprikyblue]

难道这不是 HTTP 协议 Cache-Control 实现的吗

[aprikyblue]

检查缓存是否更新也有..
Last-Modified/If-Modified-Since
Etag/If-None-Match
304 Not Modified

[iamzuoxinyu]

@aprikyblue 只是鲜有见到整个页面都缓存的啊。

[tomato3]

首先，最简单的就是用缓存，缓存有缓存的策略。所有浏览器支持。
第二，就是 Local Storage ， IndexDB API 存储那些相同的。大部分浏览器支持。
第三，就是提供离线能力，推介使用 Web Worker 中的 Service Worker 中的 Cache API, MDN 上有教程。部分浏览器支持。 AppCache 适用于单页应用，已经不推介使用了。

[tomato3]

@iamzuoxinyu appcache 只是用配置文件帮你硬缓存了资源而已。 service worker 则可以控制 appcache 做的全过程，甚至可以自己在浏览器端直接返回 Response 对象，还可以获得原生应用的一些能力（例如消息推送）。

下一代的 web 技术是一个链接就是一个应用，随用随走，这一点和微信的小程序的想法是差不多的，不过微信做的是减法，缩小 Web 的范围，让大家都寄生于微信上，新的 PWA(Progressive Web App)则将 Web 的范围扩大。

原生应用有原生应用的好处，比如渲染速度快。而 PWA 就不用你下载安装包之类的，可以在使用过程中增量下载，微信小程序不知道能不能做到增量下载，可能也只是采用 appcache 的方式把所有资源全部下载下来了。
PWA 真正做到随用随走。

目前市场上少见到 service worker 的原因是 service worker 要求 https + 目标用户平台受限。后者是我们依然采用安装包或者缓存的方式来减少流量传输的最大原因。
要全部覆盖还得有几年呢，可以在这里查看目前浏览器对 service worker 的支持情况。 https://jakearchibald.github.io/isserviceworkerready/