在html5中怎么解决本地缓存问题?app内嵌H5webview案例分享!

2021-07-30 14:47:26 浏览数 (27)

最近小编收到很多新手小伙伴们的提问说:“在html5中怎么解决本地缓存问题?”对于这个问题,小编自己做了一些功课下面是有关于这方面的相关内容,希望对大家有所帮助!

前文

APP内嵌H5已经很普遍了,但是每个app提供的webview表现都不太一样,在开发中遇到了一个非常棘手的缓存问题。APP启动时加载了我们商城项目的H5代码,然后把index.html文件缓存到了本地。
记录一下

问题表现

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中怎么解决本地缓存问题?”这个问题的相关解决办法,当然了我们以后会遇到的事情肯定不只有如此,对于html5这方面有感兴趣的小伙伴们都可以在W3Cschool中进行学习和了解! 


0 人点赞