


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:
Then write a xxx.manifest file, xxx is a name you choose yourself. The format of this file is like this:
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.

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

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

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.

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

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.

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

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

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


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

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 latest version

SublimeText3 Chinese version
Chinese version, very easy to use

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Mac version
God-level code editing software (SublimeText3)
