search
HomeWeb Front-endH5 TutorialHTML5 offline cache is deployed under tomcat to enable offline browsing of pictures, flash, etc._html5 tutorial skills

Open a web page, and after loading, if the Internet is suddenly disconnected, the page will be gone after you refresh it.
Have you ever thought that after refreshing, the page is still the same as before? If you open another page in a new window and enter the same URL, it will still be the same page when you are disconnected from the Internet. . HTML5 offline applications provide such a function.
When the data in the page is loaded, you can set some images, flash, css, js, html and other files to be cached. You can use those cached files next time when the Internet is not available. This is the offline application of HTML5.
In fact, it is very simple to implement.

Requires server. Here we use tomcat server to explain.
First, configure the mine type of the file with the .manifest suffix to text/cache-manifest.
When it comes to tomcat configuration, familiar friends will naturally think of the web.xml file. Yes, just add the following configuration to the file:

Copy the code
The code is as follows:


manifest



Then write a xxx.manifest file, xxx is a name you choose yourself. The format of this file is like this:

Copy the code
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, it identifies that this is the manifest configuration file.
#version 1.5
This sentence is a comment and has no actual effect. I just want the browser to update the cache file. Because when the manifest file is the same as the original, the browser will not reload the cache file, so we can use this comment to modify the version number on the one hand and let the browser update the cache on the other.
CACHE:
This line indicates that the following file is to be cached. In the example, the current page: MyTest.html, as well as some css and js files and images are cached.
There are a few keyword examples not mentioned, namely
NETWORK:
FALLBACK:
NETWORK refers to pages that do not want to be cached; FALLBACK refers to the requested file not being found or the server for the file not being available. Alternatives in response, for example, if we want to request a nested page, but the server of this page cannot be connected, then I can move to another specified page.
This is the second and third step. Just add the location of the manifest in the tag:

Here you go. You can implement simple offline applications.

Where are those cached files?
Tested it on chrome and found that it saves these files in chunks according to its own mechanism, so I couldn't find the complete file. The saved data is in:
C:UsersjasonlingAppDataLocalGoogleChromeUser DataDefault. I don’t know how to save it specifically.
Files on Firefox are also stored according to its own mechanism. However, after opening it with SQLite, the author found the specific information of the cached file:
Readers who are interested can try it themselves and see if it works. New discoveries.
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How to Add Audio to My HTML5 Website?How to Add Audio to My HTML5 Website?Mar 10, 2025 pm 03:01 PM

This article explains how to embed audio in HTML5 using the <audio> element, including best practices for format selection (MP3, Ogg Vorbis), file optimization, and JavaScript control for playback. It emphasizes using multiple audio f

How to Use HTML5 Forms for User Input?How to Use HTML5 Forms for User Input?Mar 10, 2025 pm 02:59 PM

This article explains how to create and validate HTML5 forms. It details the <form> element, input types (text, email, number, etc.), and attributes (required, pattern, min, max). The advantages of HTML5 forms over older methods, incl

How do I use the HTML5 Page Visibility API to detect when a page is visible?How do I use the HTML5 Page Visibility API to detect when a page is visible?Mar 13, 2025 pm 07:51 PM

The article discusses using the HTML5 Page Visibility API to detect page visibility, improve user experience, and optimize resource usage. Key aspects include pausing media, reducing CPU load, and managing analytics based on visibility changes.

How do I use viewport meta tags to control page scaling on mobile devices?How do I use viewport meta tags to control page scaling on mobile devices?Mar 13, 2025 pm 08:00 PM

The article discusses using viewport meta tags to control page scaling on mobile devices, focusing on settings like width and initial-scale for optimal responsiveness and performance.Character count: 159

How do I handle user location privacy and permissions with the Geolocation API?How do I handle user location privacy and permissions with the Geolocation API?Mar 18, 2025 pm 02:16 PM

The article discusses managing user location privacy and permissions using the Geolocation API, emphasizing best practices for requesting permissions, ensuring data security, and complying with privacy laws.

How to Create Interactive Games with HTML5 and JavaScript?How to Create Interactive Games with HTML5 and JavaScript?Mar 10, 2025 pm 06:34 PM

This article details creating interactive HTML5 games using JavaScript. It covers game design, HTML structure, CSS styling, JavaScript logic (including event handling and animation), and audio integration. Essential JavaScript libraries (Phaser, Pi

How do I use the HTML5 Drag and Drop API for interactive user interfaces?How do I use the HTML5 Drag and Drop API for interactive user interfaces?Mar 18, 2025 pm 02:17 PM

The article explains how to use the HTML5 Drag and Drop API to create interactive user interfaces, detailing steps to make elements draggable, handle key events, and enhance user experience with custom feedback. It also discusses common pitfalls to a

How do I use the HTML5 WebSockets API for bidirectional communication between client and server?How do I use the HTML5 WebSockets API for bidirectional communication between client and server?Mar 12, 2025 pm 03:20 PM

This article explains the HTML5 WebSockets API for real-time, bidirectional client-server communication. It details client-side (JavaScript) and server-side (Python/Flask) implementations, addressing challenges like scalability, state management, an

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)