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-web development. That's why we need to understand HTML5 's features in order to make it easier for us to combine native apps with WebApp when developing and designing apps.

Why is HTML5 suitable for mobile WebApp development?

first feature: Offline caching

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

Web storage is a very important feature introduced by HTML5, which stores data locally on the client, similar to HTML4 cookies, but is much more powerful than cookies, and the cookie size is limited to 4kb,web Storage is officially recommended for each website 5MB.

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

It is clear from the literal meaning that Sessionstorage saves the data in the session and the browser shuts down, while Localstorage keeps the data on the client side;

Whether it is sessionstorage, or localstorage, can use the same API, commonly used are 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 corresponding URL and processed in different ways.

HTML5 is completely unrestricted in this respect and can be handled entirely together.

Mobile app Designer to know, if the news, microblogging, social applications of information presentation in the implementation of text and multimedia mix, without specifically embedding WebView, will be a much better thing, at least now the native way to realize the difficulties.

third feature: geo-positioning

Location positioning, so that positioning and navigation is no longer the exclusive navigation software, the map does not have to download a very large map package, can be resolved through the cache, where to where, more flexible.

Mobile app Designer to know, now embedded in the LBS function more and more, this is the mobile device and desktop PC is one of the biggest advantages, HTML5 can put this advantage again, think about how to use it in your design application!

Fourth feature: Canvas drawing to enhance the graphics capabilities of the mobile platform

Using the canvas API, you can easily draw a heat map to collect user experience data and support regular edits such as moving, rotating, zooming, and so on. 2D and 3D are also supported.

Fifth feature: A rich interactive approach

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

transition– component's move effect

transform– component deformation effect

animation– adding motion and morphing to animation support

Coupled with JS animation effects and so on, HTML5 provides a very rich interactive way. 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 pages smaller, reduce unnecessary spending by users, and better performance for lower power consumption; Easy to upgrade, open to use the latest version, eliminating the hassle of re-downloading the upgrade package, the use of the process directly updated offline cache.

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

CSS3 supports the embedding of fonts, layout, 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, saving code and pictures, but also for users to save bandwidth.

These effects are very convenient to implement with HTML5, and as with native development, it is estimated that those client developers are embarrassed.

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