iOS platform quickly releases HT for Web topology application

The iOS platform has always been a closed ecosystem, and iOS developers have to pay an annual fee to join the developer program to test app development on the iOS platform, and the app needs to be uploaded to the App Store for review by Apple before it can be released externally. If you are developing an in-house application, you will have to pay a higher fee to purchase a business account.

For today's HTML5 applications, we can pack them with phonegap and post them like native apps, or ask them to access them directly from the browser. The advantage of the previous approach is that the user experience is good, users can use them like the native app, the disadvantage is that the release is cumbersome, and to wait for the Apple audit. The latter one does not have to consider the issue of publishing at all, but the user experience is poor, after all, let the user open the browser, self-input URL to the user operation level of higher requirements. Today we present another approach that combines the advantages of the previous two approaches and is particularly suited for deploying enterprise internal applications.

If you have an iphone or ipad on hand, you can experiment with it in the following ways:

1. Open the link using the Safari browser on the iphone or ipad: http://pattern.dk/sun/, click the Send button at the bottom

2. Click Send To Home screen

3. Confirm Add

4. Check the new app icon on the main screen

You can see that there is an "app" on our home screen, and if you are careful with optimization, users simply cannot tell whether this is a native or HTML5 application, which greatly improves the user experience.

Isn't it amazing? Next we use the HT for Web topology application as an example, try to implement such a "high imitation" of the app, first look at our page in the iphone browser effect:

To make this page look like a native app, we need to add some special tags to the HTML page:

<!--page Zoom mode--><meta name= "viewport" content= "user-scalable=0, initial-scale=1.0" ><!--is full screen display-->? <meta name= "apple-mobile-web-app-capable" content= "yes" ><!--status bar transparent-->?<meta name= " Apple-mobile-web-app-status-bar-style "content=" Black-translucent "><!--app shows on the main screen the name-->?<meta name=" Apple-mobile-web-app-title "content=" HT "/>?<!--app icons displayed on the main screen-->?<link rel=" Apple-touch-icon "href=" res /icon.png ">?<!--Start screen-->?<!--iphone5-->?<link rel=" apple-touch-startup-image "href=" Res/girl_ Iphone5.png ">?<!--iphone6-->?<link rel=" apple-touch-startup-image "href=" Res/girl_iphone6.png "media= "Screen and (device-width:375px) and (DEVICE-HEIGHT:667PX) and (-webkit-device-pixel-ratio:2)"/>

Viewport's settings can refer to Apple's official documentation, which is very good.

The use of other META tags also has a good reference documentation, we recommend that you read carefully:

1. Configure the Web application

2. Supported META tags

One more detail to note is that if the resources in the page (JS scripts, pictures, etc.) are very numerous, each time the reload will affect the user experience, we can cache some resources:

<!--specify cache control file-->
The contents of this file are as follows:
CACHE Manifestcache:ht.jsres/girl_iphone5.pngres/girl_iphone6.pngres/1.pngres/2.pngres/icon.png
in this file, we cache ht.js and a bunch of picture files, these resources will only be loaded once, the second time the page will not be repeatedly loaded from the network, so the display is very fast, so that our page looks very much like a native app! 
The use of caching also has two very good documents:
1. HTML5 Offline cache
2. Store data on the client
Last section of the Operation video, look at the final effect, Youku Link: http://v.youku.com/v_show/id_XOTUyODA1NjQ0.html?firsttime=0&from=y1.4-2
iOS platform quickly releases HT for Web topology application