web app 禁用手机浏览器缓存方法
开发过web app的同学,特别是前端人员,都碰到这烦人的事情,JS或CSS代码改变,可手机浏览器怎么刷新都不更新,手机浏览器的缓存特别恶劣。
所以今天贴个方法解决这问题。记得,本地调试的时候贴上,上线后要删除哦,免得访问者浏览体验慢。
代码:
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
把上面的代码贴到HEAD里面即可。
顺便贴个缓存的资料:
1.概念
Cache-control用于控制HTTP缓存(在HTTP/1.0中可能部分没实现,仅仅实现了Pragma: no-cache)
数据包中的格式:
Cache-Control: cache-directive
cache-directive可以为以下:
request时用到:
| "no-cache"
| "no-store"
| "max-age" "=" delta-seconds
| "max-stale" [ "=" delta-seconds ]
| "min-fresh" "=" delta-seconds
| "no-transform"
| "only-if-cached"
| "cache-extension"
response时用到:
| "public"
| "private" [ "=" <"> field-name <"> ]
| "no-cache" [ "=" <"> field-name <"> ]
| "no-store"
| "no-transform"
| "must-revalidate"
| "proxy-revalidate"
| "max-age" "=" delta-seconds
| "s-maxage" "=" delta-seconds
| "cache-extension"
部分说明:
根据是否可缓存分为
Public 指示响应可被任何缓存区缓存。
Private 指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的
部分响应消息,此响应消息对于其他用户的请求无效。
no-cache 指示请求或响应消息不能缓存(HTTP/1.0用Pragma的no-cache替换)
根据什么能被缓存
no-store 用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
根据缓存超时
max-age 指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应。
min-fresh 指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale 指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以
接收超出超时期指定值之内的响应消息。
Expires 表示存在时间,允许客户端在这个时间之前不去检查(发请求),等同max-age的
效果。但是如果同时存在,则被Cache-Control的max-age覆盖。
格式:
Expires = "Expires" ":" HTTP-date
例如
Expires: Thu, 01 Dec 1994 16:00:00 GMT (必须是GMT格式)
2.应用
通过HTTP的META设置expires和cache-control
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2009 23:00:00 GMT" />
上述设置仅为举例,实际使用其一即可。这样写的话仅对该网页有效,对网页中的图片或其他请求无效,并不会做任何cache。
这样客户端的请求就多了,尽管只是检查Last-modified状态的东西,但是请求一多对浏览速度必定有影响。
如果要对文件添加cache可以通过apache的mod_expire模块,写法为
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 days"
</IfModule>
记得ExpiresActive设为On,我起先没设置On,似乎怎样YSlow都查不到缓存机制。这样添加的话就是默认所有的。
如果要针对个别MIME类型则可以:
ExpiresByType image/gif "access plus 5 hours 3 minutes"
见 Apache Module mod_expires
另外,当点击浏览器上的刷新,客户端发送的请求中均是max-age=0,表示validate操作,发送请求到服务器
要求检查cache,再更新cache,一般得到的是304 Not Modified,表示没变动。
web app 禁用手机浏览器缓存方法的更多相关文章
- Opera浏览器测试移动端网站和模拟手机浏览器的方法
链接地址:http://www.neirong.org/post-256.html?utm_source=tuicool Chrome浏览器请看:Chrome浏览器测试移动端网站和模拟手机浏览器的方法 ...
- 让你在PC上调试Web App,UC浏览器发布开发者版
目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试.手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实. 因此,UC使用技术将手机网页调试信息分离,实现一种能在大屏幕.高配置P ...
- 调试WEB APP多设备浏览器
方法:adobe shadow \ opera远程调试\ weinre adobe shadow: 我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面,Jav ...
- 调试WEB APP多设备浏览器(转)
方法:adobe shadow \ opera远程调试\ weinre adobe shadow: 我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面,J ...
- 使用meta属性禁用手机浏览器的缩放功能
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能.这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看 ...
- 通过手机浏览器打开APP或者跳转到下载页面.md
目录 通过手机浏览器打开APP或者跳转到下载页面 添加 schemes 网页设置 参考链接 通过手机浏览器打开APP或者跳转到下载页面 以下仅展示最简单的例子及关键代码 由于硬件条件有限,仅测试了 A ...
- 手机浏览器通过Scheme跳转APP,兼容各种手机浏览器
一个比较完整的产品线,必定有APP和网站,另外还有微信公众号网页和小程序.那么有一个比较常见的需求就是在手机浏览器内打开APP,实现起来也比较简单,只要APP配置的有URLScheme即可. 但是因为 ...
- 超赞!聊聊WEB APP、HYBRID APP与NATIVE APP的设计差异
编者按:这3类主流应用你都了解吗?设计师除了要有视觉功夫,对不同形式的APP也应当了然于胸,今天百度的同学写了一篇非常全面的总结,帮你迅速搞定3类主流APP的设计方法,附带一大波避雷针,带你巧妙跳过A ...
- [转帖]聊聊Web App、Hybrid App与Native App的设计差异
聊聊Web App.Hybrid App与Native App的设计差异 https://www.cnblogs.com/zhuiluoyu/p/6056672.html 编者按:这3类主流应用你都了 ...
随机推荐
- LINUX内核分析第七周学习总结:可执行程序的装载
LINUX内核分析第七周学习总结:可执行程序的装载 韩玉琪 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/cours ...
- An unknown error occurred & “”的 iPhone is busy: Processing symbol files
An unknown error occurred & ""的 iPhone is busy: Processing symbol files An unknown err ...
- ELK日志管理之——logstash部署
1.yum源配置 [root@localhost ~]# cat > /etc/yum.repos.d/logstash.repo <<EOF [logstash-1.5] name ...
- python学习之——计算文件行数
# -*- coding: cp936 -*- #转载源于:http://blog.csdn.net/houyj1986/article/details/21196027 #计算文件行数 #1.文件比 ...
- android开发环境搭建(64位)
一.相关下载 1.下载JDK. 网址:http://java.sun.com/javase/downloads/index.jsp,选择jdk-7u21-windows-x64.exe. 2.下载E ...
- IOS单例模式要做到3点
1,永远只分配一块内存来创建对象. +(instanst) static id instace = nil; static dispatch_once_t onceToken; dispatch_on ...
- acm入门编成题
http://wenku.baidu.com/view/c8f2f64acf84b9d528ea7aee.html
- php Memcache/Memcached操作手册
php Memcache/Memcached使用教程 Memcache和Memcached 其实是一个东西,只是php中要是用的扩展不一样, 2009年左右有人丰富memcache的用法和性能,编写了 ...
- hdu 4107
Gangster Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- [Leetcode][JAVA] Populating Next Right Pointers in Each Node II
Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...