浏览器如果发现访问的页面的 html 标签上，包含 manifest 属性 … 并且指向了一个 manifest 文件 … 这样在 window 对象的 applicationCache 对象上 … 会发生一系列的事件 … 下面我们来看一下这些事件的流程 …
首先我们可以清除掉浏览器已经缓存下来的 Application Cache …
清空浏览器的缓存不会影响到 Application Cache … 如果你用的是 Chrome 浏览器的话 … 可以新建一个标签 … 输入 chrome://appcache-internals/
找到我们的应用的 manifest … 然后点击 Remove … 可以删除掉这些缓存资源。
事件流程
回到应用的页面 … 打开控制台 …
因为刚才清空了这个页面的 AppCache … 所以当我们刷新页面的时候 … 相当于是第一次打开这个页面 …
首先浏览器注意到这个页面的 <html> 标签里面包含 manifest 属性 … 这样会在 applicationCache 对象上发生一个 checking 事件 …
如果浏览器的 AppCache 里面没找到这个 manifest 文件 … 就会触发一个 downloading 事件 … 开始去下载在 manifest 文件里边列出的资源 …
在下载的同时 … 会定期的触发 progress 事件 … 显示出现在下载了多少个文件 … 还剩下多少个文件 …
下载完成以后 .. 会发生一个 cached 事件 … 表示这些离线资源已经可以使用了 …
上面介绍的只是一种情况 … 就是浏览器第一次遇见我们的 manifest 文件 …
如果下次再访问这个页面 … 刷新一下页面 … 表示我们又一次请求这个页面 ..
同样浏览器会看到 <html> 元素上的 manifest 属性 … 然后发生一个 checking 事件 … 看一下这个属性指向的 manifest 文件是不是已经存在了 ..
如果它在浏览器的 AppCache 里面 … 并且 manifest 文件本身并没有发生改变 … 会发生一个 NoUpdate 事件 ….
表示不需要更新离线的资源 … 因为页面指向的 manifest 文件没有变化 … 浏览器会一个字节一个字节的检查 manifest 文件 … 也就是在这个文件里添加一个空格 … 浏览器都会认为 manifest 文件发生了变化 …
我们可以打开这个 offline.appcache … 在这个注释内容，文件的版本号这里 … 修改一下 … v1.1 … 然后保存 …
回到浏览器 … 刷新 …
看到 manifest 属性 … 检查 manifest 文件 … 发现这个文件已经存在了，但是文件跟上一次检查的时候不一样了 … 因为我们修改文件里的注释内容 … 也就是那个版本号 ..
然后会发生 downloading 事件 … 重新去下载 manifest 文件里面列出的资源 … 在下载的时候，浏览器也会检查这些文件资源是否有更新 … 如果有的话，就会重新下载 … 如果没有的话 … 会跳过去 …
都下载好以后 … 最后会发生一个 UpdateReady 事件 …
表示更新已经完成了 …
不过这个时候，虽然重新下载了更新以后的资源 … 但是页面上仍然使用的是之前的资源 …
要使用更新之后的资源 … 需要刷新一下页面 … 或者可以去调用，window.applicationCache.swapCache() …
window 对象下面的 applicationCache 这个对象里的 swapCache 方法。
