web app禁用手机浏览器缓存

本文介绍了解决移动端浏览器缓存不更新的问题,提供了一种通过修改HTML头部标签来强制浏览器不缓存页面的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近做移动端开发碰到这烦人的事情,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,表示没变动。
### uni-app 中清空浏览器后退历史的实现方法 在开发过程中,如果希望用户从第三方页面返回时不触发缓存机制或不保留后退记录,可以通过以下方式来清除浏览器的历史记录。 #### 方法一:禁用 `keep-alive` 缓存 当使用 Vue Router 或 Uni-app 的路由管理时,某些页面可能被设置为 `keep-alive` 模式。这种模式会在内存中保存页面状态,从而导致返回时不会重新加载数据[^1]。因此,可以在不需要缓存的页面中移除 `meta.keepAlive` 属性: ```javascript { path: '/page1', name: 'Page1', component: Page1, meta: { // 删除此属性以禁用缓存 // keepAlive: true } } ``` #### 方法二:重定向到空白页后再跳转目标页 为了彻底清除浏览器的回退历史,可以先跳转到一个临时的空白页,然后再跳转到实际的目标页面。这种方式能够有效地打断历史栈记录: ```javascript // 跳转到空白页 uni.redirectTo({ url: '/pages/blank/blank' // 空白页路径 }); // 在空白页停留片刻后跳转到最终目标页 setTimeout(() => { uni.reLaunch({ url: '/pages/target/target' }); }, 0); ``` 上述代码片段利用了 `redirect` 和 `reLaunch` API 来中断历史记录链路[^3]。 #### 方法三:调用 H5 原生接口清理 History 记录 对于更复杂的场景,可以直接通过 JavaScript 控制浏览器的行为。例如,在进入新页面前手动清空 history 对象的内容: ```javascript window.history.pushState(null, null, location.href); // 替换当前 URL 不增加新的历史条目 window.onpopstate = function () { window.location.replace('/'); // 强制替换为目标地址 }; ``` 需要注意的是,这种方法适用于 Web 平台下的 WebView 场景,但在原生 Android/iOS 上可能会受到限制[^2]。 --- ### 注意事项 - **平台差异**:部分解决方案可能只针对特定环境生效(如 H5),而在小程序或其他平台上未必适用。 - **用户体验权衡**:频繁地破坏用户的正常浏览习惯可能导致体验下降,请谨慎设计逻辑。 - **生命周期适配**:确保所选策略与项目使用的框架版本兼容,并测试不同设备上的表现一致性。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值