Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to deploy HTML5 offline cache under tomcat to realize offline browsing of pictures such as flash

2025-03-29 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article introduces how to deploy HTML5 offline cache under tomcat to realize offline browsing such as picture flash. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

Open a web page, after loading, if the network is suddenly cut off, then after you refresh the page will be gone.

Have you ever thought that the refreshed page is just the page, open another page in the new window, enter the same URL, and open the original page when the network is off? no, no, no. The offline application of HTML5 provides such a feature.

When the data on the page is loaded, you can set up some cached files such as images, flash, css, js, html, etc., and you can use those cached files the next time you can't connect to the Internet. This is the offline application of HTML5.

In fact, it is very simple to implement.

A server is required. This is explained by a tomcat server.

The first step is to configure the mine type of the file with the .manifest suffix to text/cache-manifest.

When it comes to tomcat configuration, friends who are familiar with it will naturally think of web.xml. Yes, just add the following configuration to the file:

The code is as follows:

Manifest

Text/cache-manifest

Then write a xxx.manifest file. Xxx is a name you choose. The format of this file is as follows:

The code is as follows:

CACHE MANIFEST

# version 1.5

CACHE:

MyTest.html

CSS/main.css

Javascript/bwH5LS.js

Exp-calif-logo.gif

The first line is required, which identifies that this is the configuration file for manifest.

# version 1.5

This is a comment, which has no practical effect. I just want the browser to update the cache file here. Because the browser will not reload the cache file when the manifest file is the same as before, we can use this comment to change the version number on the one hand and let the browser update the cache on the other.

CACHE:

This line indicates that the following files are to be cached. In the example, the current page is cached: MyTest.html, as well as some css and js files and images.

There are several keywords not mentioned in the examples, that is,

NETWORK:

FALLBACK:

NETWORK refers to the page that does not want to be cached; FALLBACK refers to the alternative when the requested file is not found or the server of the file does not respond. For example, if we want to request a nested page, but the server of this page cannot connect, then I can go to another specified page.

This is the second and third step, just put the location of manifest in the tag:

At this point, you can implement simple offline applications.

Where do you put those cached files?

I tested it on chrome and found that it saved these files in blocks according to its own mechanism, so I couldn't find the complete file. The saved data is at:

I don't know how to store it in C:\ Users\ jasonling\ AppData\ Local\ Google\ Chrome\ User Data\ Default.

The file on Firefox is also saved according to its own mechanism, but after the author opened it with sqlite, I found the specific information of the cache file.

This is enough about how to deploy HTML5 offline cache under tomcat to realize offline browsing such as picture flash. I hope the above content can be helpful to you and 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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report