zoukankan      html  css  js  c++  java
  • Html5离线缓存详细讲解

    实例 - 完整的 Manifest 文件

      

      

    1,什么是应用程序缓存(Application Cache)

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

      离线缓存:

        离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,

        将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示。

        即使有网络,优先本地存储的资源

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

      * 离线浏览 - 用户可在应用离线时使用它们

        * 速度 - 已缓存资源加载得更快

        * 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

      * 【

        在没有网络的时候可以访问到缓存的对应的站点页面,包括html,js,css,img等等文件
        在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的
        资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量。
         】

    3,如何实现离线缓存:

      a)Cache Manifest 基础

        如需启用应用程序缓存,请在文档的<html> 标签中包含 manifest 属性:

          

        * 在需要缓存的html根节点上面添加属性 manifest ,属性值是一个 . appcache 文件;

        Appcache 是一个控制缓存文件

        * 在同目录下创建demo.appcache 文件,幷添加配置项

      b)Manifest 文件

           manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

          manifest 文件可分为三个部分:

            CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

            NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

            FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

          

          * CACHE MANIFEST

          第一行,CACHE MANIFEST,是必需的:

          CACHE MANIFEST

          /theme.css

          /logo.gif

          /main.js

          上面manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,一个 JavaScript 文件

          * NETWORK

          NETWORK:

          login.php

          可以使用星号来指示所有其他资源/文件都需要因特网连接:

          NETWORK:

          *

          * FALLBACK

          FALLBACK:

          /html/   /offline.html

          第一个 URI 是资源,第二个是替补。

    4,更新缓存:

       一旦应用被缓存,它就会保持缓存直到发生下列情况:

        用户清空浏览器缓存

        manifest 文件被修改

        由程序来更新应用缓存

     5,在服务器端将.appcache文件的mime类型配置成 text/cache-manifest

      下面以phpstudy为例

       

       打开,mime.types ,在后面添加----

       

    6,在网页中打开

        

    以 "#" 开头的是注释行

  • 相关阅读:
    java excel转pdf 工具类
    java word转pdf 工具类
    如何向数据库中添加TIMESTAMP(6)类型的数据
    IE浏览器 div或者其他容器的height属性无效 滚动条问题解决办法
    ComboBox赋值ItemsSource数据源的时候会触发SelectionChanged改变事件的解决办法
    devexpress chart 散点图加载并分组显示(可以自定义颜色 同组中的点颜色相同)
    myEclipse mybatis自动生成工具xml配置
    MySQL日志简介
    存储引擎简介
    索引介绍
  • 原文地址:https://www.cnblogs.com/xiaotaiyangye/p/10910353.html
Copyright © 2011-2022 走看看