• notice
  • Congratulations on the launch of the Sought Tech site

Does html5 support offline apps

This article introduces the relevant knowledge of "html5 does not support offline applications". During the operation of the actual case, many people will encounter such a dilemma. Next, let Xiaobian lead you to learn how to deal with these situations. ! I hope you read it carefully and learn something!

HTML5 supports offline applications. Offline application is a new feature of html5, using the local caching mechanism, so that users can still use the web page or application without the network. In order to make the web application work even when it is offline, all resource files that make up 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 the resource files in the local cache to run the application normally.

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

HTML5 adds offline applications. Using the local caching mechanism, offline applications allow us to use web pages or applications without a network. When the client does not establish a connection with the server of the web application locally, the client can also use the web application locally to perform related operations.

In order to make the web application work properly even when it is offline, all resource files that make up 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. , you can also use the resource files in the local cache to run the web application normally.

The use of offline applications requires the following steps:

  • Offline detection (to determine whether the Internet is connected)

  • access certain resources

  • There is a local space for saving data (whether online or not, it does not hinder reading and writing)

Offline web application using HTML5

1. How to check browser support

if(window.applicationCache){ 
        //The browser supports offline applications 
  }

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

The first line must start with the following string

    CACHE  MANIFEST

All that's left is the URLs of the files to cache, one per line (relative URLs are relative to the manifest file, not the file)

#Starting with "#" is the comment
     common .css 
    common .js

This way all files listed in this file will be cached

In the manifest, special zone headers can be used to identify the type of manifest item following the header information, the simplest cache above belongs to the "CACHE:" zone.
like this

#The content after this header needs to be cached     CACHE :
     common .css 
    connom .js

Files listed in areas starting with "NETWORK:" are always fetched online, not cached

NETWORK: The header information supports the wildcard "*", indicating that any resources not explicitly listed will be loaded through the network

#The content after the header information does not need to be cached, always get 
    NETWORK from online: 
    a.css #Indicates 
    that resources starting with name should not be cached 
    name/

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

FALLBACK: 
    name/   example.html

A manifest can have any number of areas, and there are no restrictions on the location.

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

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

    < html  manifest = './offline.appcche' >

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

  • HTML5 adds the navigator.onLine property.
    When the property is true, it means online, and when the value is false, it means offline.

  if (navigator.onLine){       // Online } else {       // Offline }

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

  • online event (supported by IE9+ browsers)

This event is triggered when the network changes from offline to online, and this event is triggered on the window, no need to refresh

 window.online =  function () {         //The event that needs to be triggered }
  • The offline event (supported by IE9+ browsers)
    is triggered when the network changes from online to offline. Like the online event, this event is triggered on the window without refreshing.

window .offline =  function () {       //The event that needs to be triggered }

application cache

Application Cache (Application Cache) is a cache area separated from the browser's cache (the size depends on the specific browser, generally 5M)

The difference between application caching and web caching:

  • Application caching serves the entire web application, and web caching serves individual web pages

  • The application cache only caches the specified resources required by the specified page (which can be controlled manually), and any web page has a web page cache (the default behavior of the browser)

  • App cache doesn't disappear with clearing browser cache

  • The application cache is not like the web cache, the old data will be replaced by the latest new data

  • Application cache can be accessed offline, web cache must be accessed online

  • Application caching is reliable and controllable, but web page caching is uncontrollable

Advantages of Application Caching

  • Browse offline

  • Faster -- cached resources load faster

  • Reduced load -- the browser only downloads updated files from the server

After a web application is downloaded and cached for the first time, any load request comes from the cache first, so offline caching can be implemented. If you do not need to use offline cache, you need to delete the description file on the server side, or delete the manifest attribute in the HTML page.

Once an app is cached, the cache never changes. So, how can I change the cache

  • User clears app cache

  • manifest file is modified

  • Use the update() method to update the cache

If the file on the server has been modified, then modifying the date or version number of the commented line in the description file is a good way to make the browser re-cache the file

In addition, we can also use the API provided by HTML5 to manipulate and update the cache

applicationCache API

The applicationCache API is an interface for manipulating the application cache. The new window.applicationCache object can trigger a series of events related to the state of the cache.
This object has a status property whose value is constant, indicating the cache status

  • 0: No app cache associated with the page (not cached)

  • 1: The app cache is not getting updated (idle)

  • 2: Downloading description file and checking for updates (checking)

  • 3: The application cache is downloading the resource specified in the description file (downloading)

  • 4: The application cache has updated resources, and all resources have been downloaded, and can be used through swapCache() (update ready)

  • 5: The description file of the application cache no longer exists, and the page can no longer access the application cache (expired)

This object has the following events, which represent changes in its state

  • Every time you load an HTML file with the manifest attribute set, the checking event will be triggered first.

  • If the application is already cached and the manifest file has not changed, the browser fires the noupdate event

  • If the application has been cached and the manifest file is changed, the browser triggers the downloading event, and the updateready event is triggered after the download is complete

  • If the app is not cached, both the downloading event and the progress event fire, but the cached event is fired instead of the updateready event when the download is complete

  • If it is offline and cannot detect the manifest state, the error event will be fired. If a non-existing manifest file is referenced, the error event will also be fired.

  • If it is online and the app is cached, but the manifest file doesn't exist, the obsolete event is fired and the app is flushed from the cache.

Typically, these events are fired in the order described above as the page loads

update() method

Manual intervention is also possible through the update() method, allowing the application cache to trigger the above events to check for updates

    applicationCache.update ( );

Once update() is called, the application cache will check whether the description file is updated, trigger the checking event, and then the page will continue to perform subsequent operations as if it was just loaded. If the cached event is fired, the application cache is ready and no further operations will occur.

swapCache() method

If the updateready event is triggered, the new version of the application cache is already available, and the swapCache() method needs to be called to enable the new application cache.

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

The browser checks the manifest file and updates the cache asynchronously, so it may be after the old cache is loaded, so it may take two loads to display the latest content, so the user needs to be prompted

window.applicationCache.onupdateready =  function () {
         var  con = comfirm( 'New content available, reload?' );
         if (con){ 
            location.reload(); 
        } 
    }

The content of "html5 does not support offline applications" is introduced here, thank you for reading. 

Tags

Technical otaku

Sought technology together

Related Topic

1 Comments

author

lipitor 40mg generic & lt;a href="https://lipiws.top/"& gt;order lipitor pill& lt;/a& gt; order generic lipitor

Ftnqbl

2024-03-07

Leave a Reply

+