`
zhangyaochun
  • 浏览: 2613379 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

离线存储 application cache

阅读更多

 

    离线与缓存

 

  • 网页缓存依赖网络的存在,而离线应用在离线状态下仍然可用
  • 网页缓存主要缓存当前网页相关内容,也仅限当前页面的读取;离线应用主要缓存文件,只要设置缓存的文件,都能在离线状态下读取该文件

    设备支持情况

 



 

   

    使用js来判断

 

if(window.applicationCache){
    //支持的进来

}

 

    manifest文件:

 

//如果关联上manifest文件
<html manifest="cache.manifest">

 

    识别manifest文件:

 

  • 由于manifest文件的MIME类型是text/cache-manifest
  • web服务器需要配置MIME类型:
//web.xml

<mime-mapping>

            <extension>manifest</extension>
            <mime-type>text/cache-manifest</mime-type> 

</mime-mapping>

 

   

    manifest的写法:

 

  • 第一行必须是CACHE MANIFEST,不能有空行或空格   
  • #开头为注释
  • CACHE:为要缓存的文件,后面每行一个文件,不支持通配符,必须是具体的文件名,不能包含hash/query

     -------当网络不可用或不在线时候,此部分文件会通过本地缓存直接读取

 

  • NETWORK:为网络白名单,可以为*/文件夹/域名/具体地址

      -------定义在NETWORK行下面的文件清单被指定为无论文件是否被缓存,必须从网络中下载

 

 

  • FALLBACK:可选,资源获取失败时候的候补方案,每行分别指定在线和离线时候使用的文件

       -------该清单的前半部分表示当无法获取到该文件的时候,则请求转发到后半部分的文件,比如下面如果访问不到offline.html页面,就返回index.html

 

    实例:

 

 

CACHE MANIFEST
#version:1.0.0

CACHE:
http://***.com/css/reset.css
http://***.com/a.gif

NETWORK:
images/

FALLBACK:
offline.html     index.html

 

 

  • 大小: 68.2 KB
分享到:
评论

相关推荐

    HTML5离线存储

    我通过Application Cache+localStorage+web sql构建了一个离线应用,同时我也把逻辑按照Application cache+localStorage+indexedDB写了一次,有兴趣的同学可以下载,同时代码逻辑按照MVC组织。可以让大家很快理解...

    html5离线存储课程代码

    Application Cache是一种较早的离线存储方式,它通过manifest文件来指定需要离线存储的资源,当用户首次访问网站时,浏览器会下载manifest文件并根据其内容缓存相应的网页和资源。这样,在离线状态下,浏览器可以...

    html5离线存储实例

    首先,我们来看看Application Cache,也被称为离线存储。这是一种基于文件的缓存机制,允许开发者指定一组资源(如HTML、CSS、JavaScript、图片等)进行离线存储。通过在HTML文件的`&lt;head&gt;`部分添加`&lt;manifest&gt;`标签...

    HTML5_离线存储技术

    这项技术的核心在于利用HTML5的`Application Cache`(应用缓存)或者称为`Cache Manifest`(缓存清单),通过创建一个清单文件来指定需要离线存储的资源。 **一、离线存储的必要性** 随着移动设备的普及,用户可能...

    Application Cache未缓存文件无法访问无法加载问题

    在Web开发中,Application Cache(应用缓存)是一种离线存储技术,允许浏览器将网站的部分或全部内容存储在本地,以便在用户离线时仍然可以访问这些内容。然而,使用Application Cache时,可能会遇到未缓存文件无法...

    html5 离线应用

    Application Cache,又称为Manifest文件,是一个简单的文本文件,开发者可以在这个文件中列出需要离线存储的资源。当用户首次访问一个使用manifest文件的网站时,浏览器会下载清单中指定的所有资源,并在本地创建一...

    HTML5离线应用

    这一功能通过HTML5的离线存储标准实现,包括Application Cache(应用程序缓存)和Service Worker(服务工作者)。在本案例中,提供的压缩包文件包含了一系列用于展示HTML5离线应用的元素和实践。 1. **notes.html**...

    HTML5离线缓存技术 附源码.我们知道h5多了很多新技术,其中之一便是可以离线缓存数据,这样当网络断了时,仍然可以浏览网页

    开发者可以通过监听`applicationCache`对象上的事件来处理离线缓存的状态变化,如`checking`、`downloading`、`progress`、`updateready`和`cached`等。 6. **源码示例** 在HTML文件中添加manifest属性,指向清单...

    读取离线网页

    这主要依赖于浏览器的离线存储功能,如HTML5的离线存储规范(Application Cache)或者更现代的Service Worker机制。这些技术使得用户能够在有网络的时候提前下载网页内容,然后在需要的时候本地读取,不受网络状况的...

    HTML5离线应用实例介绍

    ApplicationCache(简称AppCache)是HTML5提供的一种离线存储技术,它允许浏览器缓存应用的资源文件,以便在离线状态下使用。 ##### 定义manifest: - **定义方式**:通过在HTML文档头部添加`...

    网页离线阅读

    4. **App Cache(Application Cache)**:虽然Service Worker现在更为先进,但App Cache仍然是一个老式的离线存储方案。它通过一个manifest文件列出要缓存的资源,浏览器会在首次加载网页时下载这些资源。然而,由于...

    html5应用缓存_动力节点Java学院整理

    而传统的离线存储技术,如Cookie,由于存储空间有限(通常不超过4KB),更适合用于存储小型状态信息,如用户登录状态。 使用Application Cache时,需要在服务器端创建一个`manifest`文件,列出需要缓存的资源。例如...

    前端开发技术分享 浏览器怎么实现 AppCache - Offline Application Cache 共17页.pdf

    离线应用缓存(Application Cache),也称为AppCache,是Web应用程序的一种离线存储机制。它允许开发者通过一个名为`manifest`的特殊文件来指定一系列静态资源,浏览器会根据这个清单文件自动下载并缓存这些资源,...

    前端开发各种离线手册

    此外,还有对表单元素、多媒体支持以及离线存储(Application Cache)等内容的详细解释。 2. **CSS**:CSS(Cascading Style Sheets)用于控制网页的样式和布局。离线手册可能包括了选择器、盒模型、布局模式(如...

    html5前端浏览器离线缓存

    manifest文件是一个简单的文本文件,它包含了要被离线存储的所有文件路径。例如: ```html CACHE MANIFEST index.html style.css script.js image.jpg ``` 在这个例子中,当用户首次加载包含此manifest链接的网页...

    Remember先进的离线Todo应用程序

    它利用了HTML5的离线存储技术,如Application Cache和IndexedDB。Application Cache允许应用缓存必要的静态资源,即使在网络断开时也能快速加载页面。而IndexedDB则是一个非关系型数据库,用于存储用户创建的任务...

    HTML5离线应用程序.pdf

    HTML5离线应用程序的核心在于利用`离线存储`这一特性,使得Web应用即使在无网络连接的情况下也能继续运行。...然而,理解并熟练运用`Application Cache`对于理解现代Web的离线存储机制仍然是十分重要的。

    HTML5实现图书馆资源离线阅读的探讨.pdf

    HTML5引入了离线存储机制,称为离线存储(Offline Storage)或应用程序缓存(Application Cache),允许开发者将部分网页内容和资源(如图片、JavaScript、CSS文件等)存储在用户的本地设备上。当用户在网络连接不...

    离线缓存demo.rar

    3. **App Cache (Application Cache)**: 虽然现在已经被Service Worker取代,但在较旧的Web应用中,App Cache仍被用于离线支持。它通过一个manifest文件来指定需要离线使用的资源列表。 4. **索引数据库(IndexedDB...

    offline_storage

    HTML5离线存储主要依赖于`Application Cache`(应用程序缓存)或称为离线缓存。它通过一个`manifest`文件来指定需要离线存储的资源,浏览器在用户首次访问网站时会下载这个清单,并在后续访问时根据清单内容缓存...

Global site tag (gtag.js) - Google Analytics