H5 离线缓存的用法
H5离线缓存基础系列
1.什么是离线缓存
离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示。
2.离线缓存的优势
- 在没有网络的时候可以访问到缓存的对应的站点页面,包括html,js,css,img等等文件
- 在有网络的时候,浏览器也会优先使用已离线存储的文件,返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的
- 资源的缓存可以带来更好的用户体验,当用户使用自己的流量上网时,本地缓存不仅可以提高用户访问速度,而且大大节约用户的使用流量。
3.如何实现离线缓存
在需要缓存的html文件的根节点(html)添加manifest属性,属性值是当前目录下的一个.appcache文件
01.html文件如下
与01.html文件同目录的.appcache文件
4..appcache文件的内容格式
5.在服务器端将.appcache文件的mime类型配置成 text/cache-manifest
下面以phpstudy为例
打开mime.types文件 在后面添加
6.在网页打开01.html
H5 离线缓存的用法的更多相关文章
- H5离线缓存技术Application Cache
H5离线缓存技术Application Cache 1.离线缓存技术:是浏览器本身的一种机制 HTML5引入Application Cache(应用程序缓存)技术,离线存储可以将站点的一些文件存储在本 ...
- h5 离线缓存小demo
传统的web应用是在线应用,这其实也是web的特色,对于PC时代问题并不大,但到了移动互联网时代,设备终端位置不再固定,依赖无线信号,网络的可靠性变得更低.比如:在火车上,穿山越岭进隧道,便无法访问w ...
- H5离线缓存机制-manifest
简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...
- H5离线缓存技术
HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个,离线存储可以将站点的一些文件存储在本地,在没有网络的时候还是可以访问到以缓存的对应的站点页面,其中这些文件可以包括html,js ...
- H5离线缓存基础系列
1.什么是离线缓存 离线缓存:离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可以展示. 2.离线缓存的优势 在没有网络 ...
- H5离线缓存(基础)学习指南
离线缓存 application cache 1. 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没有连接网络,被缓存的页面也可 ...
- h5离线缓存
离线缓存:application cache 什么是离线缓存: 离线缓存可以将站点的一些文件缓存到本地,它是浏览器自己的一种机制,将需要的文件缓存下来,以便后期即使没链接网络,被缓存的页面也可以展示 ...
- 体验h5离线缓存
摘要 Application Cache是浏览器自己的一种机制,随着移动互联网时代的到来,如果我们已经将需要的文件缓存下下来,一旦网络无法访问,也能继续访问.不仅能提高用户体验,而且在有网络时,也能直 ...
- H5 应用程序缓存(离线缓存)
离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest manifest,作用是为了让服务器识别该 ...
随机推荐
- Leetcode 136 Single Number 亦或
题意就是从一堆数中找出唯一的一个只存在一个的数.除了那个数,其他的数都是两个相同的数. 通过亦或的性质: 1)a^a = 0 0^a = a 2)交换律 a^b = b^ a 3)结合律 (a^b)^ ...
- 第一泰泽(Tizen)智能手机发布在俄罗斯
请看下图: 这是韩国三星公司在俄罗斯境内公布的第一款泰泽(Tizen)智能手机(今年6月2日).这说明,Tizen操作系统没有死去. 在泰泽官网上将泰泽操作系统定义为:"The OS of ...
- VCL to UniGUI Migration Wizard
Free Evaluation Edition of The Automatic Migration Scripting Wizard For Converting Legacy Delphi Cod ...
- 楼塔当天领袖acm心理(作为励志使用)
楼主个人博客:吉尔博客 假期空闲的时候使用.这些年来GCJ.ACM,TopCoder 的一个号码的一重要的比赛的参与 回顾.GCJ2006 的回顾,今天时间上更早一些吧,我如今还清晰记得3 年 前.我 ...
- Emgu-WPF 激光雷达研究-定位实现
原文:Emgu-WPF 激光雷达研究-定位实现 特定位置或障碍物位置定位实现. 读取激光雷达数据并存储于本地作为测试数据.每一帧数据对同一障碍物的定位信息均存在偏差.所以先对需要定位的点进行数据取样. ...
- LeetCode - 4 - Longest Substring Without Repeating Characters
题目 URL:https://leetcode.com/problems/median-of-two-sorted-arrays/ 解法 二分法. 总的思想是将 2 个数组用 2 个指针“整体”二分. ...
- 在vs2015上使用asp.net core+ef core
官方的文档https://docs.asp.net/en/latest/tutorials/first-mvc-app/start-mvc.html 先来看一下实现的效果
- JS引用路劲为什么在前面加上两个斜杠
原文:JS引用路劲为什么在前面加上两个斜杠 //表示同协议,一般现在用在https跨域名地址情况下.比如第三方统计代码的引入,用//就不用很麻烦地区分https还是http,也不用担心https下降到 ...
- 零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形动画
原文:零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形动画 零元学Expression Blend 4 - Chapter 42 五分钟快速完成扇形变圆形 ...
- storm(一)
Storm 一个用来实时计算的流框架,具有高可用,低延迟,数据不丢失,分布式的特点 storm 处理数据的方式是基于消息的流水线处理,因此特别适合无状态的计算,也就是说计算单元依赖的数据全部在接受的消 ...