Shulou(Shulou.com)06/01 Report--

This article is about how to solve the problem of local caching in html5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Problem expression

After the H5 project is packaged and launched, because the static resources js and css file names are followed by a hash value, this is packed with webpack and is also used to prevent caching. However, after app starts, due to caching the static resources requested by html or the previous version of the package, index.a878n.js can not find 404, the page bar is blank. After our H5 project was packaged and launched, the last version of the code on the server was cleared.

Solution.

At the beginning, we added a random number to html, that is, when app was loaded into html, we added a random number after url, but found that webview's html cache caused our js changes not to be updated. The final solution is to timestamp the domain name and upgrade app when the project is loaded on the app side.

To avoid this problem, it is necessary to add random numbers to url in html when the project is launched for the first time, so that webview does not cache html locally.

What the front-end boss recommends is to configure nginx at the beginning to force no html cache.

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;} Thank you for reading! This is the end of this article on "how to solve the problem of local caching in html5". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.