The eight characteristics of HTML5 to develop mobile WebApp

The WebApp is based on HTML5+JS+CSS3. But WebApp is also a browser-based micro-site development. That's why we need to have a deep understanding of the features of HTML5 so that we have the ability to develop and design apps. A more rational use of the original app with the WebApp combination.

and the most important sharing function in the app, it must be in the form of a Web page. So. HTML5 must learn.

Why is it that HTML5 is suitable for mobile WebApp development?

first feature: Offline caching

The HTML5 Web Storage API can be seen as an enhanced cookie. It is not limited by data size, has better elasticity and architecture, and is able to write data to native ROM. You can also recover data when the browser is turned off again, to reduce network traffic.

Web storage is a very important feature introduced by HTML5, able to store data locally in the client, similar to HTML4 cookies, but more powerful than cookies, and the cookie size is limited to 4kb,web Storage official recommendation for each site 5MB.

The Web storage is divided into two types: Sessionstorage and Localstorage

The literal meaning can be very clearly seen, sessionstorage to save the data in the session. The browser is off and it's gone. Localstorage, however, keeps the data on the client locally.

Whether it's sessionstorage, or localstorage. The APIs that can be used are the same, often used for example the following (in the case of Localstorage):

1, save data: Localstorage.setitem (Key,value);

2, read the data: Localstorage.getitem (key);

3. Delete individual data: Localstorage.removeitem (key);

4, delete all data: Localstorage.clear ();

5, the Key:localStorage.key (index) of an index is obtained;

Mobile app designers want to know when to let users download offline cache (note the difference between online and offline apps).

second feature: Audio and video free embedding, multimedia form more flexible

Native development method for text and audio and video mixed with the multimedia content processing is relatively troublesome, you need to split the text, pictures, audio, video. Parse the appropriate URLs and handle them in different ways, respectively.

HTML5 is completely unrestricted in this respect. Can be put together for processing.

Mobile app designers need to know that the text and multimedia are mixed in the information presentation of the news category, microblog and social applications. Instead of embedding WebView specifically. Will be a wonderful thing, at least now the native way to achieve it is still difficult.

third feature: geo-positioning

Location-specific navigation software is no longer dedicated to positioning and navigation. The map also does not have to download a large map package, which can be solved by caching. Where to next. More flexible.

Mobile app designers need to know that there are more and more applications that embed LBS functionality today. This is one of the biggest advantages of mobile devices compared to desktop PCs, and HTML5 can magnify this advantage again, and think about how to use it in your design application!

Fourth feature: Canvas drawing. Improve the ability to paint on mobile platforms

Use the Canvas API to easily draw heat maps to collect user experience data. Supports general editing of picture movement, rotation, zooming, etc. 2D and 3D are also supported.

Fifth feature: A rich interactive approach

Enhance interactivity: Drag-and-drop, undo historical operations, text selection, and more. Example

transition– component's move effect

transform– component deformation effect

animation– add motion and warp animation support

Plus JS animation effect and so on. HTML5 provides a rich interactive approach.

Mobile app designers play as much as you can imagine!

Sixth feature: Low cost of development and maintenance

This is a lower development and maintenance cost relative to native app development; Make the page smaller, reduce unnecessary spending by the user, and better performance to lower the power consumption; Easy to upgrade. Open to use the latest version number. Without the hassle of downloading the upgrade package again, the offline cache is updated directly during use.

Seventh feature: The support of CSS3 visual designer's Auxiliary tool.

CSS3 supports the embedding of fonts and layout of layouts. And the most impressive animation features.

selector– more Resilient Selector

webfonts– Embedded Fonts

layout– variety of typesetting options

stlying radius Gradient shadow– rounded corners, gradients, shadows

Border background support for background– borders

Use CSS3 to complete part of the visual work, loading speed quickly. Save code and pictures, and save bandwidth for users.

Eighth feature: HTML5 call phone camera and mobile phone albums, contacts and other functions

This article two fly individual projects are: the financing (www.ya-jing.cn)

The eight characteristics of HTML5 to develop mobile WebApp