千家信息网

在html5中如何解决本地缓存问题

发表于:2024-11-16 作者:千家信息网编辑
千家信息网最后更新 2024年11月16日,这篇文章给大家分享的是有关在html5中如何解决本地缓存问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。问题表现H5项目打包上线后,由于静态资源js和css文件名后面都带
千家信息网最后更新 2024年11月16日在html5中如何解决本地缓存问题

这篇文章给大家分享的是有关在html5中如何解决本地缓存问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

问题表现

H5项目打包上线后,由于静态资源js和css文件名后面都带了哈希值,这是webpack打包带上的,也是为了=防止缓存。但是在app启动后由于缓存了html请求的还是上个版本包的静态资源,导致index.a878n.js找不到404,页面吧白屏了。-----我们H5项目打包上线后,服务器上上个版本的代码就清掉了。

解决办法

我们一开始给html加上了一段随机数,就是app加载到html时,在url后面加随机数,但是发现webview的html缓存,导致我们的js修改是更新不上的。
最后解决方案是,app端加载项目时在域名后加时间戳并升级app才可。

为了避免这种问题出现,那就是项目首次上线时就要在html内给url加上随机数,让webview不缓存html到本地。

前端大佬给推荐的是一开始就要配置nginx ,强制不缓存html

location / {      expires -1;      add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';      try_files $uri $uri/ @router;      index index.html;    }

感谢各位的阅读!关于"在html5中如何解决本地缓存问题"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

0