HTML5 offline Web application Combat: Five steps to create success

The "IT168 technology" HTML5 has been in full swing for nearly a decade, with the standardization of video, audio, image, animation, and computer interaction on the HTML 5 platform. More and more HTML features, support image upload drag, support localstorage, support Web SQL database, support file storage API and so on. It is a long way away and is committed to bringing the Web into a more mature application platform. Of all the cool features, what I like most is that it has the ability to cache Web apps offline.

　　Developing offline Web applications: three core functions

When developing a WEB application that supports offline, developers typically need to use the following three areas of functionality:

1. Offline resource caching: A way to indicate which resource files are required for an application to work offline. This allows the browser to cache the files locally when they are online. Thereafter, when the user accesses the application offline, the resource files are loaded automatically, allowing the user to work properly. HTML5, the cache manifest file indicates which resources need to be cached and supports both automatic and manual cache update methods.

2. On-line status detection: Developers need to know whether the browser is online, so that the online or offline status, to make corresponding processing. In HTML5, two ways to detect whether the current network is online is provided.

3. Local data storage: When offline, you need to be able to store the data locally so that you can sync to the server when you are online. To meet different storage requirements, HTML5 provides the DOM Storage and Web SQL Database two storage mechanisms. The former provides easy-to-use key/value for storage, while the latter provides basic relational database storage capabilities.

　　HTML5 launched the Web Storage (Web Storage) API

To compensate for the flaw in cookie capacity, WebStorage can address lightweight storage. HTML5 introduces the Web Storage (Web Storage) API, which includes Localstorage and Sessionstorage, which can store simple objects such as application state, and can be done well with local and session storage, However, when processing large amounts of structured data, the HTML5 "Web SQL Database" API interface is required.

In HTML5, networked storage is divided into 2 kinds of life cycle, one is session-based, the storage cycle is only the current session, when the page [Note 1] is closed, or is transferred to another site, the storage is destroyed;

• Sessionstorage.varname = "Generate new variable";
• Sessionstorage.varname = "variable operation";
• Delete Sessionstorage.varname; Delete a variable

The other is local storage, and when the page is opened next time, you can still access the data that was stored when the page was last opened, such as a locally stored site user name.

Usage is the same as session-based storage, except that the prefix name is changed to Localstorage

• Localstorage.varname = "Generate new variable";
• Localstorage.varname = "variable operation";
• Delete Localstorage.varname; Delete a variable

Web Storage

   Use Localstorage for persistent storage//Use Sessionstorage for per tab storage Savebutton.addeventlistener (' click '　　, function () {    window.localStorage.setItem (' value ', area.value);　　    window.localStorage.setItem (' timestamp ', (new Date ())). GetTime ());　　}, False); Textarea.value = Window.localStorage.getItem (' value ');

　　

　　Offline storage HTML5 Web SQL Database

WEB SQL Database provides basic relational database functionality to support complex, interactive data storage on the page. It can be used either to store user-generated data or as a local cache to fetch data from the server. For example, you can store e-mails, schedules, and other data in a database. The Web SQL database supports the concept of databases transactions, which ensures that even multiple browser windows operate on the same data without conflicting results.

It also introduces a set of APIs that use SQL to manipulate client databases (Client-side database), which are asynchronous (asynchronous). The SQL language used is SQLite 3.6.19. Which SQLite is a lightweight database, occupying very low resources, support Windows/linux/unix and other mainstream operating systems, and can be combined with many programming languages, such as C#,php,java,javascript, compared to Mysql, PostgreSQL, the two open-source database management system, is processing faster. Currently iOS and Android platforms support running Web SQL Database.

var db = Window.opendatabase ("DBName", "1.0", "description", 5*1024*1024);　　5MB db.transaction (Function (TX) {tx.executesql ("SELECT * from Test", [], Successcallback, errorcallback);　　});　　Web Workers Main.js:var worker = new Worker (' task.js ');　　Worker.onmessage = function (event) {alert (event.data);};　　Worker.postmessage (' data ');　　　　Task.js:self.onmessage = function (event) {//Do some work.　　Self.postmessage ("Recv ' d:" + event.data); };

　　

HTML5 IndexedDB: Lightweight NoSQL database

INDEXEDDB is an important part of Html5-webstorage and is a lightweight NoSQL database.

The INDEXEDDB defines a number of interfaces for the database object, which is defined as idbdatabase.

Browser object, implemented Idbfactory only indexeddb this instance.

　　Five steps to create an HTML5 offline Web App

In all the cool features offered by HTML5, creating an offline cache page is one of my favorite features, and here are five steps to quickly create a HTML5 offline Web App

　　1. First step: Create a valid HTML5 document, HTML5 DOCTYPE is easier to remember than XHTML.

Create a file called index.html, where you can learn how to use CSS3 to plan your site layout.

　　Http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

　　2. added. htaccess Support

The cache page We are creating is called the manifest file, assuming that the server you are using is Apache, and we need to add a new directive to the. htaccess file before creating the file.

Open the. htaccess file, which is deployed in the root directory of the Web site, adding the following code:

AddType text/cache-manifest. manifest

This directive ensures that every. manifest file text cache is available. If the file does not exist, the entire cache effect will not be implemented, and the page will not be cached offline.

　　3. Create a. manifest file

After we created the. manifest file, things became much more interesting. Create a new file, named Offline.manifest, and embed the following code.

CACHE MANIFEST

#This is a comment

CACHE

Index.html

Style.css

Image.jpg

Image-med.jpg

Image-small.jpg

Notre-dame.jpg

Now you have a perfect list of manifest. In fact, the principle is simple, after declaring the cache, you can list the files you want to cache offline. This is more than enough for caching a simple Web page, and HTML5 's cache has some other interesting features.

CACHE MANIFEST

#This is a comment

CACHE

Index.html

Style.css

NETWORK:

search.php

login.php

FALLBACK:

/api offline.html

In this example, the manifest file declares the cache, which is used for caching index.html and STYLE.CSS. At the same time, we declare the network to specify files that are not cached, such as the login page.

The final statement is fallback, which allows the user to be transferred to a specified page, such as in this case, if you do not plan to view the API resources offline, you can turn to the off.html page.

　　4. Link the manifest file to the HTML document.

After the manifest file and the main HTML document are ready, the only thing you need to do is link the manifest file to the HTML document.

The method of operation is simple, just add the manifest attribute in the HTML meta-count, the code is as follows:

　　5. Testing

HTML5 offline Web application Combat: Five steps to create success