HTML5+CSS3 way to realize the bottleneck of Mobie app

The early stage of PC is also the traditional C/s mode, after evolution to B/s mode, and produced the SaaS, cloud computing and other concepts and applications. The biggest benefit of evolving from the client to the browser is that the client does not need to be updated, reducing the amount of update costs, and simply server-side updates. That's why the popular webqq, Google Docs, Photoshop page version is why. At the same time many software manufacturers are also making their web version, some of the domestic ERP manufacturers have started this path. The huge success of the IPhone and Android has opened the curtain on mobile internet companies that want to get a slice of the big market for mobile internet. Games, SNS, microblogging, video, local life services are vigorously developing mobile internet, launched its own app.

Mobie native app makes use of the official SDK and development language of mobile phone client software, it can be very good using the phone to provide some interface to operate the phone's hardware and software resources. With the popularity of HTML5 and CSS3 and WebKit's better support for HTML5 and CSS3, many people started using HTML5 and CSS3 to make Mobie apps. As mentioned earlier, the biggest advantage of using the Web to make Mobie apps is that the client does not need to update, and the data shows that many mobile phone users are not constantly updating his app, and that it costs less to modify the app's interface relative to the native app,web approach. Therefore, for the flexibility of the interface has a higher demand for the app, the more inclined to use the Web to implement Mobie app.

Both Android and iphone offer WebView controls, which are essentially a WebKit browser kernel for parsing HTML, CSS, and JS code. So, native app can call WebView space to showcase our web pages. At the same time, because of the better support for CSS3, native that gorgeous interface can be achieved with html+css better, to achieve a realistic native app effect.

However, the Web implementation Mobie app has some bottlenecks. The following is my project in actual combat, if you reader have a good solution, please do not hesitate to enlighten.

First, according to Baidu Mobile Internet development Trend Report 2010q4,iphone Download a 1.407k Web page, set up a connection time is about 1.35s, the transmission time is about 0.15s. This causes the app to be in a screen state when the connection is established. That is to say this app in more than a second time, completely in the screen state, plus 3G, GPRS network instability, and sometimes waiting for the app to respond to a few seconds or even 1 seconds of time, which is the speed of life Mobie app, is undoubtedly a fatal flaw.

Second, it is said that the native app also needs to establish a TCP connection, which also takes so long. Quite right, so what are the common solutions now? Boot screen +loading picture, with these two, the program will not be in suspended animation, the user has patience to continue to wait. So can web apps do the same. First, the program opens the same display boot screen, screen after the Switch interface (webview), webview If no loading picture is still in the establishment of the connection, still in the screen state. Because we cannot preload the program during the boot screen time. Then, use the native method to mask the webview outside the loading picture, but WebView does not provide an interface for Web page start rendering, which provides the interface for Web page load completion. In other words, if you put a loading picture on the WebView by native, the picture will be able to disappear when the page is completely loaded, which can also affect the user experience. Here is another way to achieve the effect of this loading picture: Place a static page locally, click to open a static page without establishing a connection. Then request the data in an AJAX way to replace the page content. This is also the way Nokia widgets are implemented, but the efficiency of this approach is rather low.

Third, it is difficult to implement local storage. Local storage is one of the important results of HTML5, but there are multiple versions of the system based on Android. The Android version of WebKit is not good for HTML5 and CSS3. The simple two examples are: input type= "number" will cause a lower version of Android WebKit direct crash,css3 of the fillet in the lower version of the Android WebKit will also appear obvious cracks. Now commonly used HTML5 backward compatibility scheme is through javascript+css+html to simulate some of the characteristics of HTML5, but too much JS exists in the Mobie app will not outweigh the gains.

Personally, the development trend of mobile Internet must also change from C/s mode to B/S mode. But the difficulty is that the handset-side browser more, the Web Standard support is not the same, adapt to a variety of resolution of the phone screen is also a very collapse of the thing. I believe that the future mobile Internet will also adapt to the current pattern: Web browsing information, app games, tools and so on.