Home>Web design tutorial>HTML tutorial

Implementation of HTML5 offline application and client storage

Author：Eve Cole Update Time：2025-01-25 09:00:03

Supporting offline Web application development is another focus of HTML5. The so-called offline web applications are applications that can still run even when the device cannot access the Internet.

Developing offline web applications requires several steps. The first is to make sure the app knows whether the device has Internet access so it can take the correct action next. Then, the application must also have access to certain resources (images, Javascript, CSS, etc.) in order to work properly. Best, there must be a local space for users to save data, and reading and writing will not be hindered regardless of whether they have access to the Internet.

HTML5 and its related APIs make developing offline applications a reality.

Offline detection

To know whether the device is online or offline, HTML5 defines a navigator.onLine attribute. A value of true indicates that the device can access the Internet, and a value of false indicates that the device is offline.

 if (navigator.onLine) { // Work normally} else { // Perform tasks in offline state}

Since navigator.onLine has certain compatibility issues, in addition to the navigator.onLine attribute, in order to better determine whether the network is available, HTML5 also defines two events, online and offline.

These two events are triggered on the window object when the network switches between offline and online:

 window.addEventListener('online', function() { // Works normally}); window.addEventListener('offline', function() { // Performs tasks when offline});

In practical applications, it is best to obtain the initial state through navigator.onLine after the page is loaded. Then use the above two events to determine whether the network connection status changes. When the above event is triggered, the value of the navigator.onLine property will also change, but this property must be manually polled to detect changes in network status.

application cache

HTML5's application cache, or appcache for short, is specifically designed for developing offline web applications. Appcache is a cache area separated from the browser's cache. To save data in this cache, use a manifest file that lists the resources to be downloaded and cached. Description file example:

 CACHE MANIFEST# Commentfile.jsfile.css

Then quote in html:

 <html manifest=./xxx.manifest>

The MIME type of the xxx.manifest file must be text/cache-manifest.

The core of this API is the applicationCache object. This object has a status attribute. The value of the attribute is a constant, indicating the following current status of the application cache:

  • 0: No cache, that is, there is no application cache related to the page
  • 1: Idle, that is, the application cache has not been updated
  • 2: Checking, that is, downloading the description file and checking for updates
  • 3: Downloading, that is, the application cache is downloading the resources specified in the description file.
  • 4: The update is completed, that is, the application cache has updated the resources, and all resources have been downloaded and can be used through swapCache().
  • 5: Abandoned, that is, the application cache description file no longer exists, so the page can no longer access the application cache.

Related events:

  • checking: Triggered when the browser is looking for updates to the app cache
  • error: triggered when an error occurs during checking for updates or downloading resources
  • noupdate: Triggered when checking the description file and finding that the file has no changes.
  • downloading: Triggered when downloading application cache resources starts
  • progress: Triggered continuously during the process of file download application cache
  • updateready: Triggered when the new application cache of the page has been downloaded and can be used through swapCache()
  • cached: Triggered when the application cache is fully available

Generally speaking, these events will be triggered in the order mentioned above as the page loads. The above events can also be triggered manually by calling the update() method.

data storage

Cookies

HTTP Cookies, usually called cookies directly, are used on the client to store session information. The standard requires the server to send the Set-Cookie HTTP header as part of the response to any HTTP request, which contains session information. Server response header example:

HTTP/1.1 200 OK

Content-type: text/html

Set-Cookie: name=value

Other-header: other-header-value

The browser then Set-Cookies the session information, and then adds the Cookie HTTP header to each request to send the information back to the server, as shown below:

GET /index.html HTTP/1.1

Cookie: name=value

Other-header: other-header-value

The additional information sent back to the server can be used to uniquely verify which request the client came from.

Complete cookies include:

  1. Name: A name that uniquely identifies the cookie. Must be URL encoded.
  2. Value: The string value stored in the cookie. Must be URL encoded.
  3. Domain: The domain for which the cookie is valid.
  4. Path: For that path in the specified domain, a cookie should be sent to the server.
  5. Expiration time: A timestamp indicating when the cookie should be deleted.
  6. Security flag: When specified, the cookie is only sent to the server when using an SSL connection.
Copy code
Related Articles