HTML5 offline storage under tomcat

created at 07-03-2021 views: 2

HTML5 offline browsing needs to set an offline file list (manifest), and the manifest needs to set the MIME type so that the browser can recognize it correctly. If the MIME type is wrong, offline browsing is not possible. Different servers have different setting methods, here is the configuration process of Tomcat for HLTM5 offline storage.

1. Add mime_type

1. Find conf/web.xml in the tomcat installation directory and add a mime_type, which can be added to any position inside. Of course, it is easy to manage and maintain near other tags of mime-mapping.

<mime-mapping>  
    <extension>manifest</extension>  
    <mime-type>text/cache-manifest</mime-type>  
</mime-mapping> 

2. Prepare the .manifest file.

The file name can be named whatever you want, mine is my.manifest:

CACHE MANIFEST
#VERSION 3.9
# Directly cached files
CACHE:
/html5cache/test.html
/html5cache/ebt.png

#Files that need to be online at time
NETWORK:
/html5cache/test.js
/html5cache/damicTest.jsp
# alternative plan  
FALLBACK:

3. Write offline cached HTML files

<!DOCTYPE html>  
<html manifest="/html5cache/test.manifest">  
<head>  
    <meta charset="UTF-8">  
    <title>HTML5 features</title>  
</head>  

<body>  
</body>  
</html>  

4. Further reading

HTML5 for offline applications

4.1 Let apache, nginx or IIS support .manifest files

Remove the # sign in front of the following in apache to allow the service component to support HTML5 offline storage.
AddType text/cache-manifest .manifest

4.2 create manifest file

CACHE MANIFEST statement header file header
       #This is a comment
       CACHE     # offline file storage
       style.css
       NETWORK   # Need to call files from the network
       search.jsp
       FALLBACK  # Update files when resources are invalid or unavailable
       test.html

4.3 Associate manifest file to html document

Browser compatibility reference:

  • IE: Not supported
  • Firefox: 3.5+
  • Safari: 4.0+
  • Chrome: 5.0+
  • Opera: 10.6+
  • iPhone: 2.1+
  • Android: 2.0+

HTML5 offline content update

refresh cache
The application can wait for the browser to automatically update the cache, or it can use the Javascript interface to manually trigger the update.
Automatic update

In addition to caching resources when the browser accesses the Web application for the first time, the browser will only update the cache when the cache manifest file itself changes. The change of the resource file in the cache manifest will not trigger the update.
Manual update
Developers can also use the window.applicationCache interface to update the cache. The method is to check the value of window.applicationCache.status, if it is UPDATEREADY, then you can call window.applicationCache.update() to update the cache. The sample code is as follows.

created at:07-03-2021
edited at: 07-03-2021: