HTML5离线缓存

HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势:

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

    服务器配置
    1. 需要在 apache配置文件加:
    ① AddType text/cache-manifest .manifest

  • 客户端配置

  • 1、创建这个 houdun.manifest 清单文件:

  •  CACHE MANIFEST# 这一句必须存在,而且必须放在头部

  • CACHE# 这一句指明要缓存的内容,一行写一个文件名

  • NETWORK # 声明用于指定无需缓存的文件

  • FALLBACK #这个声明允 许你在资源不可用的情况下,将用户重定向到特定文件,一行可以写多个文件名。


    2、关联 manifest 文件到 html 文档 :
    ① <html manifest="/houdun.manifest">

    更新缓存的方式
    1. 更新manifest文件
    1.浏览器发现manifest文件本身发生变化,便会根据新的
    manifest文件去获取新的资源进行缓存。
    2.当manifest文件列表并没有变化的时候,我们通常通过
    修改manifest注释的方式来改变文件,从而实现更新。
    2. 通过javascript操作

    在线状态检测
    1. HTML5 提供了两种检测是否在线的方式:
    navigator.onLine 和 online/offline 事件。
    1.navigator.onLine 属性表示当前是否在线。如果为 true,
    表示在线;如果为 false, 表示离线
    2.开发者还需要在网络状态发生变化时立刻得到通知,
    因此 HTML5 还提供了 online/offline 事件

原文地址:https://www.cnblogs.com/blesstian/p/6494893.html