离线 html5,HTML5离线存储

HTML5离线存储2020-03-06 14:13:06

在HTML5中，利用浏览器cache缓存机制来离线存储一些资源，可以让用户在离线的情况下也能浏览Web部分页面。离线浏览、已经缓存的资源加载得更快、减少服务器负载(浏览器将只从服务器下载更改过的资源)。

使用方法：

把需要离线存储在本地的文件列在一个cache.manifest配置文件中，并在HTML中设置manifest属性。HTML>

...

cache.manifest文件为：CACHE MANIFEST

#v1.0.0

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png //可以使用通配符”*”，默认所有非CACHE文件

FALLBACK:

/ /offline.html  //第一个 URI 是资源，第二个是替补。

1.CACHE:

表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。另外请注意，这里的文件是必须一个一个列出来，通配符(*)不起作用，路径的话是相对路径，所以你的URL要是文件夹形式的，需要在路径前面加斜杠(/)。

2.NETWORK:

表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。

3.FALLBACK:

表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问offline.html。

浏览器解析manifest：

浏览器发现html头部有manifest属性，它会请求manifest文件

第一次访问：下载所有资源，对manifest指定的离线资源进行缓存

再访问时manifest如果没有更新：直接加载离线缓存过的资源

再访问时manifest如果已更新：下载新的manifest文件，重新缓存所有离线资源

离线时访问：直接加载离线缓存过的资源

注意事项：

如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，还是使用原来离线存储的资源。

对于manifest文件最好不要设置缓存。否则如果本地缓存的manifest文件还没过期，即使服务器上的manifest文件已更新也没有用。

浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。

在更新了资源之后，新的资源需要到下次再打开页面时才会生效，如果需要资源马上就能生效，那要使用window.applicationCache.swapCache()或者清除浏览器缓存(注意Ctrl+F5是无效的)

用户清空了缓存，会重新下载所有资源

需要在服务器配置.manifest文件类型的支持，下面以nginx配置为例：

找到nginx安装目录下的mime.types这个文件，打开这个文件修改：text/cache-manifest manifest;

如下图：

重启nginx，使其生效！

Tags 标签html5html5新属性离线存储

扩展阅读