离线缓存这个功能的实现有以下步骤:

1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest     manifest,作用是为了让服务器识别该类型文件

2,在html文件html标签中添加一行manifest="cache.appcache",告诉浏览器要加载的内容。

3.在该目录下新建一个文件cache.appcache,文件内容为:

chche manifest 为版本号:

chche 是告诉浏览器要缓存的文件:

network 是指定不会缓存的文件,这里的*号表示所有其他文件都需要因特网连接

fallback:是如果无法建立因特网连接时加载的页面

完成后便可以执行一下,会发现浏览器已经加载了相应的文件在本地上,断开网络,这些文件依然可以访问。

H5 应用程序缓存(离线缓存)的更多相关文章

  1. 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

    本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...

  2. 离线缓存 manifest

    程序的离线缓存由一个叫做manifest的文本文件控制,把需要离线缓存的文件列在里面即可,这个列表还可以控制需要缓存的情况,甚至当用户从缓存地址进入到没有缓存的地址应该显示什么 当浏览器下载解析了ma ...

  3. H5离线缓存技术Application Cache

    H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...

  4. H5应用程序缓存 - Cache manifest

    一.作用 离线浏览 - 根据文件规则把资源缓存在本地,脱机依然能够访问资源,联网会直接使用缓存在本地的文件.优化加载速度,节约服务器资源. 二.适用场景 正如 manifest 英译的名字:离线应用程 ...

  5. 源码推荐:移动端商城(微信小程序源代码) WebView离线缓存

    移动端商城(微信小程序源代码)(上传者:腾讯攻城师jack) 功能包括:商品橱窗,商品搜索,购物车,结账等功能. TableView嵌套webView自适应高度(上传者:linlinchen) tab ...

  6. Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

    Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案 1. 业务场景 android+webview h5 css背景图性能提升1 2. ...

  7. h5 离线缓存小demo

    传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...

  8. H5 离线缓存的用法

    H5离线缓存基础系列   1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2. ...

  9. HTML5 的 applicationCache 应用程序缓存离线存储功能与 manifest 文件

    一. 实现 HTML5 applicationCache 的步骤 一般的操作步骤 1. 新建 manifest 文件 如文件名为  lzwme.manifest,内容配置参考如下: 01 CACHE ...

随机推荐

  1. 从IBM的计划中分析出中国重新相当然的错误选择吗

    <IBM欲用物联网技术解决北京雾霾难题> http://security.zol.com.cn/469/4690141.html 读了上文.分析出的. 因为我没有太多的数据.不好分析. 有 ...

  2. Weka算法Classifier-meta-AdaBoostM1源代码分析(一)

    多分类器组合算法简单的来讲经常使用的有voting,bagging和boosting,当中就效果来说Boosting略占优势,而AdaBoostM1算法又相当于Boosting算法的"经典款 ...

  3. java中不能使用小数点(.)来作为分隔符

    split()括号里是一个String的参数,所以一定要符合这种:split(".")形式,即点'.'要用双引号""括起来"."在java中 ...

  4. YTU 2769: 结构体--成绩统计

    2769: 结构体--成绩统计 时间限制: 1 Sec  内存限制: 128 MB 提交: 1021  解决: 530 题目描述 建立一个简单的学生信息表,包括:姓名.性别.年龄及一门课程的成绩,统计 ...

  5. code+3月赛 loj6299 白金元首与克劳德斯

    千里白金雪满天 烽火江山起狼烟 分手竟兵刃相见 1941.7. 苏联军队出乎意料的反抗力量.前线德军的补给困难 —— 元首 Adolf 望着天空的云层陷入沉思…… 在 xyxyxy-直角坐标平面的天空 ...

  6. Linux VPS上安装KDE, Gnome和VNC

  7. El Dorado(dp)

    http://acm.hdu.edu.cn/showproblem.php?pid=2372 题意:给出n个数,求长度为m的递增子序列的数目. 思路:状态转移方程 dp[i][j] = sum(dp[ ...

  8. thinkphp的model的where条件的两种形式

    thinkphp的model的where查询时有两种形式. $model->field('id')->where('customer_num is null or customer_num ...

  9. web自动化测试—selenium游览器下拉框操作

    # coding=utf-8'''下拉框实战思路导包:from selenium.webdriver.support.select import Select #下拉框select from sele ...

  10. 微信小程序之商品发布+编辑功能(多图片上传功能)

    小程序的商品发布页面:功能有多图片上传 遇到的问题记录一下:1.uploadFile成功之后返回的参数是json字符串,一定要用JSON.parse转换为object格式 2.因为商品发布和编辑都是在 ...