HTML 5 application caching
HTML 5 Application Cache
Introduction
With HTML5, you can easily create an offline version of a web application by creating a cache manifest file.
What is Application Cache?
HTML5 introduces application caching, which means web applications can be cached and accessed without an Internet connection.
Application caching brings three benefits to apps:
Offline browsing - users can use the app while they are offline
Speed - Cached resources load faster
Reduce server load - the browser will only download updated or changed resources from the server.
Browser Support
Application caching is supported by all major browsers except Internet Explorer.
HTML5 Cache Manifest Example
The following example shows an HTML document with a cache manifest (for offline browsing):
Example
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
Cache Manifest Basics
To enable application caching, include the manifest attribute in the document's tag:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
Each page with a manifest specified will be cached when the user accesses it. cache. If the manifest attribute is not specified, the page will not be cached (unless it is specified directly in the manifest file).
The recommended file extension for manifest files is: ".appcache".
Please note that the manifest file needs to be configured with the correct MIME-type, that is, "text/cache-manifest". Must be configured on the web server.
Manifest File
Manifest files are simple text files that tell the browser what is cached (and what is not cached).
Manifest files can be divided into three sections:
CACHE MANIFEST - files listed under this heading will be cached after the first download
NETWORK - under this heading Outgoing files require a connection to the server and will not be cached
FALLBACK - The files listed under this heading specify the fallback page (such as a 404 page) when the page cannot be accessed
CACHE MANIFEST
The first line, CACHE MANIFEST, is required:
CACHE MANIFEST /theme.css /logo.gif /main.js
The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file loads, the browser downloads these three files from the root directory of the website. Then, whenever the user disconnects from the Internet, these resources are still available.
NETWORK
The following NETWORK section specifies that the file "login.asp" will never be cached and is not available offline:
NETWORK: login.asp
You can use asterisks to Indicates that all other resources/files require an Internet connection:
NETWORK: *
FALLBACK
The FALLBACK subsection below specifies that if an Internet connection cannot be established, "offline.html" in the /html5/ directory is replaced All files:
FALLBACK: /html5/ /404.html
Comments: The first URI is the resource, the second is the substitute.
Update cache
Once an application is cached, it will remain cached until the following occurs:
The user clears the browser cache
The manifest file is modified (See tips below)
Updating application cache by program
Example - Complete Manifest file
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
Important note: Lines starting with "#" are comments , but may also serve other purposes. The application's cache is updated when its manifest file changes. If you edit an image, or modify a JavaScript function, these changes will not be cached again. Updating the date and version number in the comment line is a way to cause the browser to re-cache the file.
Notes on application caching
Please be careful about the contents of the cache.
Once a file is cached, the browser will continue to display the cached version, even if you modify the file on the server. To ensure that the browser updates its cache, you need to update your manifest file.
Note: Browsers may have different capacity limits for cached data (some browsers set a limit of 5MB per site).
The above is the content of HTML 5 application cache. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!
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
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
Moving Text in HTML
Sep 04, 2024 pm 04:45 PM
Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.
HTML Input Placeholder
Sep 04, 2024 pm 04:54 PM
Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.
How do you parse and process HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an
