Home > Article > Web Front-end > Does html5 support offline applications?

Does html5 support offline applications?

青灯夜游Original: 2022-08-01 17:57:192087browse

html5 supports offline applications. Offline application is a new feature of HTML5, which uses the local caching mechanism so that users can still use web pages or applications without a network. In order for the web application to work normally when offline, all resource files that constitute the web application, such as HTML files, CSS files, and JavaScript script files, must be placed in the local cache so that when the server is not connected to the network You can also use resource files in the local cache to run the application normally.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

HTML5 has added offline applications. Using the local caching mechanism, offline applications allow us to use web pages or applications even when there is no network. When the client does not have a local connection with the server of the web application, the web application can be used locally on the client to perform related operations normally.

In order for the web application to work normally when offline, all resource files that constitute the web application, such as HTML files, CSS files, and JavaScript script files, must be placed in the local cache. When the server is not connected to the network, the resource files in the local cache can also be used to run the web application normally.

The use of offline applications requires the following steps:

Offline detection (determine whether the Internet is connected)
Access certain Resources
There is a local space for saving data (regardless of whether you are online or not, it does not hinder reading and writing)

Use HTML5 offline web application

1. How to check browser support

  if(window.applicationCache){
        //浏览器支持离线应用
  }

2. About the description file
The description file is used to list the cache and Resources that do not need to be cached for use when offline.
The extension of the description file used to be .manifest, but now it is recommended to use .appcache, and the description file needs to be configured with the correct MIME-type, that is, "text/cache-manifest", which must be configured on the web server (the file encoding must is UTF-8). Different servers have different configuration methods, which are not detailed here.

The first line must start with the following string

    CACHE MANIFEST

The rest is the URL of the file to be cached, one per line (relative URLs are relative to the manifest file, not relative to the file )

    #以“#”开头的是注释
    common.css
    common.js

In this way, all the files listed in this file will be cached

In the manifest, you can use a special area header to identify the type of manifest item after the header information. The above most Simple caching belongs to the "CACHE:" area.
Like this

    #该头信息之后的内容需要缓存    CACHE:
    common.css
    connom.js

The files listed in the area starting with "NETWORK:" are always obtained online and are not cached

NETWORK: header information support The wildcard "*" indicates that any resources not explicitly listed will be loaded through the network.

    #该头信息之后的内容不需要缓存，总是从线上获取
    NETWORK:
    a.css
    #表示以name开头的资源都不要缓存
    name/

The content in the area starting with "FALLBACK:" provides a backup when cached resources cannot be obtained. Select resource path
The content in this area, each line contains two URLs (the first URL is a prefix, any matching resources will not be cached, the second URL indicates the resources that need to be cached)

    FALLBACK:
    name/  example.html

A list can have any number of areas, and there are no restrictions on locations.

3. Build an offline application
Suppose we want to build a single-page application containing css, js, and html, and at the same time add offline support to this single-page application.

To associate a description file with a page, you need to use the manifest attribute of the html tag to specify the path to the description file

    <html manifest=&#39;./offline.appcche&#39;>

The first step in developing an offline application is to detect whether the device is offline

HTML5 has added the navigator.onLine attribute
When this attribute is true, it means online, and when the value is false, it means offline

  if(navigator.onLine){      //联网  }else{      //离线  }

** Note: IE6 and above browsers and other standard browsers support this attribute **

online event (supported by IE9 browser)

When the network is offline This event is triggered when it becomes online. This event is triggered on the window without refreshing.

 window.online = function(){        //需要触发的事件    }

offline event (IE9 browser support)
When the network changes from online to offline This event is triggered when, just like the online event, this event is triggered on the window and does not need to be refreshed

window.offline = function(){      //需要触发的事件  }

Application cache

The application cache (Application Cache) is from A cache area separated from the browser's cache (the size depends on the specific browser, usually 5M)

The difference between application cache and web page cache:

The application cache is The entire web application service, the web page cache serves a single web page
The application cache only caches the specified resources required by the specified page (can be controlled manually), and any web page has a web page cache (browser default behavior)
The application cache will not disappear when the browser cache is cleared
The application cache will not be like the web cache, the old data will be replaced by the latest new data
The application cache can be accessed offline , Web page cache must be accessed online
Application cache is reliable and controllable, web page cache is uncontrollable

Advantages of application cache

离线浏览
速度更快--已缓存资源加载更快
减少负载--浏览器只从服务器下载更新过的文件

一个web应用首次下载并缓存之后，任何加载请求都优先来自于缓存，因此可以实现离线缓存。如果不需要使用离线缓存了，就需要在服务器端删除描述文件，或者删除HTML页面中的manifest属性。

一旦应用被缓存，则缓存始终不变。那么，怎样才能改变缓存

用户清空应用缓存
manifest文件被修改
使用update()方法更新缓存

如果服务器上的文件有所修改的话，那么修改描述文件中注释行的日期或者版本号是一个不错的使浏览器重新缓存文件的办法

此外，我们还可以使用HTML5提供的API来操作和更新缓存

applicationCache API

applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可以触发一系列与缓存状态相关的事件。
这个对象有一个status属性，值为常量，表示缓存状态

0：没有与页面相关的应用缓存（未缓存）
1：应用缓存未得到更新（空闲）
2：正在下载描述文件并检查更新（检查中）
3：应用缓存正在下载描述文件中指定的资源（下载中）
4：应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过swapCache()来使用了（更新就绪）
5：应用缓存的描述文件不存在了，页面无法再访问应用缓存（已过期）

这个对象有以下事件，表示其状态的改变

每次载入一个设置了manifest属性的HTML文件，首先会触发checking事件
如果应用程序已经缓存，并且清单文件没有改动，则浏览器触发noupdate事件
如果应用程序已经缓存，并且清单文件发生改动，则浏览器触发downloading事件，下载完毕后触发updateready事件
如果应用程序未缓存，则downloading事件和progress事件都会触发，但是下载完成后触发cached事件而不是updateready事件
如果处于离线，无法检测清单状态，则触发error事件，如果引用一个不存在的清单文件，也会触发error事件
如果处于在线，应用也缓存了，但是清单文件不存在，则会触发obsolete事件，并将应用程序从缓存中清除。

一般来讲，这些事件会随着页面加载按上述顺序依次触发

update()方法

通过update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件

    applicationCache.update();

update()一经调用，应用缓存就会去检查描述文件是否更新，触发checking事件，然后页面就会像刚刚加载一样，继续执行后续操作。如果触发了cached事件，则说明应用缓存已经准备就绪，不会再发生其他操作。

swapCache()方法

如果触发了updateready事件，则说明新版本的应用缓存已经可用，需要调用swapCache()方法来启用新的应用缓存。

    applicationCache.onupdateready = function(){
        applicationCache.swapCache();
    };

浏览器检查清单文件，以及更新缓存的操作是异步的，因此可能是在载入旧缓存之后进行，因此可能需要载入两次才能显示最新的内容，因此需要提示用户

    window.applicationCache.onupdateready = function(){
        var con = comfirm(&#39;有新内容可用，是否重新加载？&#39;);
        if(con){
            location.reload();
        }
    }

Does html5 support offline applications?

Use HTML5 offline web application

Application cache

applicationCache API

update()方法

swapCache()方法

Related articles