Local cache problem of H5 WebView embedded in app


It’s very common to embed H5 in apps, but the WebView provided by each app is not the same. In the development process, we encounter a very difficult caching problem. The H5 code of our mall project is loaded when the app starts, and then the index.html file is cached locally.
Take notes

Problem expression
After the H5 project is packaged online, because the static resource JS and CSS file names are followed by hash values, this is on the webpack, and also to prevent caching. However, after the app started, because the static resources of the last version package were cached, index.a878n.js could not find 404, and the page was white—– After our H5 project was packaged and launched, the code of the last version on the server was cleared.

terms of settlement
At the beginning, we added a random number to the HTML, that is, when the app was loaded into the HTML, we added a random number after the URL. However, we found that the HTML cache of WebView made our JS modification unable to be updated.
The final solution is to add a timestamp after the domain name and upgrade the app when the app loads the project.

In order to avoid this problem, when the project is launched for the first time, it is necessary to add a random number to the URL in the HTML, so that WebView does not cache the HTML locally.

What the front-end boss recommends is that nginx should be configured at the beginning, and HTML should not be cached

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;

Recommended Today

Implementation example of go operation etcd

etcdIt is an open-source, distributed key value pair data storage system, which provides shared configuration, service registration and discovery. This paper mainly introduces the installation and use of etcd. Etcdetcd introduction etcdIt is an open source and highly available distributed key value storage system developed with go language, which can be used to configure sharing […]