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,表示没变动。

 

时间: 2024-10-10 05:32:38

web app 禁用手机浏览器缓存方法的相关文章

(转)web app 禁用手机浏览器缓存方法

开发过web app的同学,特别是前端人员,都碰到这烦人的事情,JS或CSS代码改变,可手机浏览器怎么刷新都不更新,手机浏览器的缓存特别恶劣. 所以今天贴个方法解决这问题.记得,本地调试的时候贴上,上线后要删除哦,免得访问者浏览体验慢. 代码: 1 2 3 <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cach

让你在PC上调试Web App,UC浏览器发布开发者版

目前,在手机上使用浏览器访问网页,无法便捷地进行网页语言调试.手机屏幕相对较小且操作不便,直接在手机上进行网页数据调试不太现实. 因此,UC使用技术将手机网页调试信息分离,实现一种能在大屏幕.高配置PC上来调试小屏幕.低配置的手机浏览器访问的网页的开发工具--Remote Inspector(简称RI). 主要功能 Android平台UC浏览器开发者版,主要支持以下功能: DOM查看和修改 JavaScript调试.CSS调试 网络状态查看 资源文件查看 Console控制台 准备工作 手机端

手机浏览器缓存和电脑浏览器缓存的问题记录

一.背景描述: 为了优化web网页速度,我们采取了js,css合并压缩,并在服务端控制.所以我就学习了一下,浏览器缓存的原理. 因为我不想使用版本号控制,版本号具有诸多弊端: 1.每次修改都得修改版本号. 2.如果所有页面的引用,单独配置版本号,那么每次的修改量很大: 3.如果为了避免2的问题,针对所有页面使用同一个熟悉配置,那么每次修改一个文件并更新版本号之后,所有的引用的版本号都更新了,太傻了. 所以,不采取版本号控制,使用时间控制,页面引用不用变,目标文件发生了变化,服务器能告诉客户端浏览

Exchange2013学习笔记(3)-更改outlook web app登录不用输入域名方法

我们安装好EXchange 2013后,在登录 outlook web app等时,默认是要输入 域名\用户名,如果域名不长,并且容易记的话,还OK.如果是有些长和不容易记的话,所以要登录就有些麻烦了. 还有就是每个人都是喜欢偷懒,所以能少输就一定少输入,那我们们怎么解决这问题呢?? 下面让我们来把这个方法简单的介绍下: 先登录到 https://s12.hznethome.com/ecp (https://邮件服务器全称/ecp) 选择>>服务器>>>虚拟目录>>

调试WEB APP多设备浏览器(转)

方法:adobe shadow  \ opera远程调试\ weinre adobe shadow: 我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面,JavaScript,DOM元素和CSS样式的调试.但是,当我们为移动Web站点或应用进行调试时,这些工具就很不方便,因为不知道在手机上或者pad看到的效果是怎样的? 解决方案一: adobe shadow 我们先来安装Adobe Edge Inspect CC 下载地址:https://creative

调试WEB APP多设备浏览器

方法:adobe shadow  \ opera远程调试\ weinre adobe shadow: 我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面,JavaScript,DOM元素和CSS样式的调试.但是,当我们为移动Web站点或应用进行调试时,这些工具就很不方便,因为不知道在手机上或者pad看到的效果是怎样的? 解决方案一: adobe shadow 我们先来安装Adobe Edge Inspect CC 下载地址:https://creative

使用meta属性禁用手机浏览器的缩放功能

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能.这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉.注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定! <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-s

Safari浏览器模拟iPhone手机浏览器的方法

1.打开浏览器的开发模式: Safari->偏好设置->高级,在这一页的底部,将“在菜单中显示[开发]菜单”打勾: 2.在浏览器中打开做好的页面: 3.在菜单[开发]中,选择[进入响应式设计模式]或者按快捷键Alt+Command+R,这样就可以看到页面 在手机中的样子了. 不足之处就是只能模拟iPhone,安卓手机或者其它系统的手机都不可以.

JS禁用手机浏览器横盘

// 监听方向时间,拦截事件          window.onorientationchange = function(event){      event.stopPropagation();      event.cancelBubble = true; }