HTML5 Offline Caching issues

HTML5 Offline Caching issues

1. Application Caching

What is the application cache ( Application Cache )?

HTML5 introduces application caching, which means that Web applications can be cached and accessed without an Internet connection. Application caching brings three benefits to your app:

• Offline Browsing-users can use them when the app is offline
• Speed-cached resources are loaded faster
• Reduce server load-The browser will download only updated or changed resources from the server.

The master browser is supported, IE8. Except IE9

Precautions

• The Minetype file needs to be configured with the correct Mime-type, which is "text/cache-manifest". Must be configured on the Web server
• Single file size, application cache size limit unified at 5M, individual files do not exceed this limit.
• Browser capacity limits for cached data may be different (some browser settings are limited to 5MB per site).
• If the manifest file, or one of the files enumerated in the file is not downloaded properly, the entire update process will fail, the browser continues to use the old cache.
• The HTML that references manifest must be the same as the manifest file, under the same domain.
  The resources in the fallback must be the same as the manifest file.
• When a resource is cached, the browser directly requests that the absolute path also accesses the resources in the cache.
• Other pages in the site if the manifest property is not set, the requested resource is also accessed from the cache in the cache.
• When the manifest file changes, the resource request itself triggers the update.

Files required for the local cache app

How to use:

① Configuring Manifest files

On the page:

1 2 3 4

<! DOCTYPE html> ...

Manifest File:

The manifest file is a simple text file that tells the browser what to cache (as well as what is not cached).

The manifest file can be divided into three parts:

①cache MANIFEST-Files listed under this heading will be cached after the first download

②network-Files listed under this heading require a connection to the server and are not cached

③fallback-Files listed under this heading provide a fallback page when the page is inaccessible (e.g. 404 pages)

①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 is loaded, the browser downloads the three files from the root directory of the Web site. These resources are then available, regardless of when the user disconnects from the Internet.

②network

The following NETWORK section stipulates that the file "Login.asp" is never cached and is not available offline:
NETWORK:
Login.asp
You can use an asterisk to indicate that all other resources/files require an Internet connection:
network:*

③fallback

The FALLBACK section below specifies that if an Internet connection cannot be established, replace all files in the/html5/directory with "offline.html":
FALLBACK:
/html5//404.html
Note: The first URI is a resource and the second is a substitute.

Format

Important NOTE: "#" begins with a comment line, but can also be used for other purposes. The app's cache is updated when its manifest file changes. If you edit a picture, or modify a JavaScript function, these changes are not re-cached. Updating the date and version number in the comment line is a way to enable the browser to re-cache the file.

CACHE manifest# 2012-02-21 v1.0.0/theme.css/logo.gif/main.jsnetwork:login.aspfallback:/html5//404.html

Full Demo:

1 2 3 4 5 6 7 8 9 10

CACHE MANIFEST # 2016-07-24 v1.0.0 /theme.css /main.js NETWORK: login.jsp FALLBACK: /html//offline.html

on the server:the manifest file needs to be configured with the correct mime-type, which is "text/cache-manifest".

such as Tomcat:

1 2 3 4

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

Common APIs:

The core is the Applicationcache object, which has a status property that represents the current state of the app cache:

0 (uncached): No cache, no page-related app cache

1 (Idle): idle, that is, the app cache has not been updated

2 (CHECKING): Check that the profile is being downloaded and check for updates

3 (Downloading): downloaded, that is, the application cache is downloading the resource specified in the profile

4 (Updateready): Update complete, all resources have been downloaded

5 (IDLE): deprecated, i.e. the application cache profile no longer exists, so the page cannot access the app cache

Related events:

Represents a change in the application cache state:

Checking: Triggered when the browser looks for updates for the app cache

Error: Triggered when an error is sent while checking for updates or downloading resources

Noupdate: Triggers when checking the description file for no changes to the file

Downloading: triggered when the app cache resource is started downloading

Progress: Continuously download and trigger during file download application cache

Updateready: Trigger on page new app cache download completed

Cached: Triggers when the application cache is fully available

Application Cache the three advantages:

① Offline Browsing

② Boost page load speed

③ Reduce server pressure

Precautions:

1. Browser capacity limits on cached data may not be the same (some browser settings are limited to 5MB per site)

2. If the manifest file, or one of the files listed in the file is not properly downloaded, the entire update process will be considered a failure, the browser continues to use the old cache

3. The HTML that references manifest must be the same as the manifest file, under the same domain

4. The browser automatically caches the HTML file that references the manifest file, which results in the need to update the version if the HTML content is changed.

5. The cache in the manifest file has no relation to the position order of the network,fallback, and if it is implicitly declared it needs to be in the front

6. Resources in fallback must be the same as manifest files

7. After updating the version, you must refresh the new version only once (the situation where the page will be re-brushed) and you need to add a listener version event.

8. Other pages in the site if the manifest property is not set, the requested resource is also accessed from the cache in the cache

9. When the manifest file changes, the resource request itself triggers the update

Click to see more information!

Offline caching differs from traditional browser caching:

1. Offline caching is for the entire application, and the browser cache is a single file

2. Offline cache off the screen or can open the page, browser cache does not

3. Offline cache can proactively notify the browser to update resources

Update

Once the app is cached, it remains cached until the following happens:
User empties browser cache
The manifest file is modified (see tips below)
App Cache updated by program

How to understand the browser cache, what are the advantages?

Browser cache: Includes caching of page HTML caches and images, js,css and other resources. For example, the browser cache is based on saving the page information to the user's local computer hard drive.

1, the advantages of caching:

1) The server responds faster: Because requests are being responded to from the cache server (closer to the client) rather than from the source server, the process takes less time and makes the server appear to respond faster.

2) Reduce network bandwidth consumption: Reduces client bandwidth consumption when replicas are reused, and customers can save bandwidth costs, increase the need to control bandwidth, and be more manageable.

HTML5 Offline Caching issues