Scenarios for handling touch icon in Android

Apple's touch icon is relatively familiar to us, it is Apple to support Web applications (or Web pages) to add to the desktop needs of the icon, with these touch icon Web links more and native application more similar. Because of the wide range of devices such as Apple device Ipod,iphone,ipad, many Web pages provide the icon resource for touch icon. Since there is not an early standard in Android, we still need to use Apple's touch Icon when we want to add a webpage to the desktop.

Touch Icon

When we want a Web page to be perfectly added to the desktop, usually we need to set up a PNG image file as a apple-touch-icon. Like what

<span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;" ><link rel= "Apple-touch-icon" href= "/custom_icon.png" ></span>

If you want to support the iphone and ipad, we need to use the Sizes property to create multiple images, and the default sizes value is 60 x.

<span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;" ><link rel= "Apple-touch-icon" href= "touch-icon-iphone.png" ><link rel= "Apple-touch-icon" sizes= "76x76" href= "Touch-icon-ipad.png" ><link rel= "Apple-touch-icon" sizes= "120x120" href= "Touch-icon-iphone-retina.png" ><link rel= "Apple-touch-icon" sizes= "152x152" href= "Touch-icon-ipad-retina.png" ></span>

before the IOS7, the Apple system will be added to the desktop of the icon to fillet and other visual processing, in order not to allow processing, we can use apple-touch-icon-precomposed as the value of the REL implementation.

For more information on Touch icon, visit the Fruit Developer website to learn more.

Defective implementations in Android
The Android WebView provides a callback to handle touch icon, Onreceivedtouchiconurl (WebView view, String Url,boolean precomposed) This method returns the URL of the touch icon that is useful to us, and whether it is pre-assembled (no visual processing is required in iOS). Although there is such data, we can deal with it, but there is a problem, that is, we do not determine the size of the file, to select the appropriate image.

For example, the next page of the source code, where the order of sizes is irregular

<span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;" ><link rel= "apple-touch-icon-precomposed" sizes= "72x72" href= "http://www.qiyipic.com/20130423143600/fix/ H5-72x72.png "><link rel=" apple-touch-icon-precomposed "sizes=" 114x114 "href=" http://www.qiyipic.com/ 20130423143600/fix/h5-114x114.png "><link rel=" apple-touch-icon-precomposed "sizes=" 57x57 "href="/HTTP/ Www.qiyipic.com/20130423143600/fix/H5-57x57.png "><link rel=" apple-touch-icon-precomposed "  href=" http ://www.qiyipic.com/20130423143600/fix/h5-0x0.png "></span>

Load Web page, Onreceivedtouchiconurl output log

<span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;" ><link rel= "apple-touch-icon-precomposed" sizes= "72x72" href= "http://www.qiyipic.com/20130423143600/fix/ H5-72x72.png "><link rel=" apple-touch-icon-precomposed "sizes=" 114x114 "href=" http://www.qiyipic.com/ 20130423143600/fix/h5-114x114.png "><link rel=" apple-touch-icon-precomposed "sizes=" 57x57 "href="/HTTP/ Www.qiyipic.com/20130423143600/fix/H5-57x57.png "><link rel=" apple-touch-icon-precomposed "  href=" http ://www.qiyipic.com/20130423143600/fix/h5-0x0.png "></span>

From the above output, basically the back (writing) elements are printed first, so the defect of this callback is as follows

1. Since the touch icon URL address does not have a hard rule, you cannot determine which Icon to use according to the URL contains some dimensions

2. Since the Web authoring Touch icon element is relatively arbitrary, it is not possible to decide which icon to use according to the Onreceivedtouchiconurl call

3. There is no sizes attribute value in the callback, it is not OK to use which icon

4. If we choose the highest quality picture, then the appropriate compression processing may be able to solve the problem, but the full icon download or according to head header information always feel not good.

Improvement Methods

Since WebView does not have a ready-made method to meet our needs, we have to implement it ourselves. In fact, the implementation of the method is relatively simple is the JS script injection detection page elements of touch icon, return JSON data.

JavaScript methods

The following JS code functions to find all the link elements for touch icon, including the normal and marked as precomposed. The properties of these link elements are then stored in the JSON data and finally returned to the corresponding callback in the Java code.

<span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;"  >var touchicons = [];function gathertouchicons (elements) {var normaltouchiconlength = elements.length;  var currentelement;      for (var i =0; i < normaltouchiconlength;i++) {currentelement = elements[i];      var size;      if (Currentelement.hasattribute (' sizes ')) {size = Currentelement.sizes[0];      } else {size = ';      } var info = {' Sizes ': size, ' rel ': Currentelement.rel, ' href ': currentelement.href};  Touchicons.push (info);  }}function obtaintouchicons () {normalelements = Document.queryselectorall ("link[rel= ' Apple-touch-icon ']");  Precomposedelements = Document.queryselectorall ("link[rel= ' apple-touch-icon-precomposed ']");  Gathertouchicons (normalelements);  Gathertouchicons (precomposedelements);  var info = json.stringify (touchicons); Window.app_native.onReceivedTouchIcons (document. URL, info);} Obtaintouchicons (); </span> 

java code

Here for the sake of understanding or all put out the demo source, In the demo, when the page is loaded, the above JS code is injected to get the touch icon information and then returned to the Java callback method. If you are not sure how the Java code implements the improvements, you can click how Android apps written by Java code implement security

<span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;" >package Com.example.obtaintouchicon;import Java.io.bufferedreader;import Java.io.filenotfoundexception;import Java.io.ioexception;import Java.io.inputstream;import Java.io.inputstreamreader;import android.app.Activity; Import Android.os.bundle;import Android.util.log;import Android.webkit.javascriptinterface;import Android.webkit.webchromeclient;import Android.webkit.webview;import Android.webkit.webviewclient;public Class  Mainactivity extends Activity {protected String LogTag = "mainactivity";      @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);      WebView WebView = new WebView (this);      Webview.getsettings (). Setjavascriptenabled (True);  Webview.setwebviewclient (New Webviewclient () {@Override public void onpagefinished (WebView view, String              URL) {super.onpagefinished (view, URL); Final String Touchiconjscode = gettouchiconjscodE ();              LOG.I (LogTag, "onpagefinished url =" + URL + "; touchiconjscode=" + Touchiconjscode);          View.loadurl ("javascript:" + Touchiconjscode);      }      });      Webview.addjavascriptinterface (New Jsobject (), "app_native");  Webview.loadurl ("http://192.168.1.5:8000/html/touchicon.html"); Private class Jsobject {@JavascriptInterface public void onreceivedtouchicons (string url, String jso      N) {log.i (LogTag, "onreceivedtouchicons url=" + URL + "; json=" + json);      }} private String Gettouchiconjscode () {StringBuilder total = new StringBuilder ();      InputStream inputstream = null;      BufferedReader bufferreader = null;          try {InputStream = Getassets (). Open ("Touchicon.js");          Bufferreader = new BufferedReader (new InputStreamReader (InputStream));          String Line;          while (line = Bufferreader.readline ())! = null) {total.append (line); }} catch (FILENOTFOUndexception e) {e.printstacktrace ();      } catch (IOException e) {e.printstacktrace ();              } finally {if (null! = InputStream) {try {inputstream.close ();              } catch (IOException e) {e.printstacktrace ();  }}} return Total.tostring (); }}</span>

The JSON data returned

<span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;" >[  {      "sizes": "72x72",      "rel": "apple-touch-icon-precomposed",      "href": "http://www.qiyipic.com/ 20130423143600/fix/h5-72x72.png "  },  {      " sizes ":" 114x114 ",      " rel ":" Apple-touch-icon-precomposed ", "      href": "Http://www.qiyipic.com/20130423143600/fix/H5-114x114.png"  },  {      "sizes": "57x57",      "rel": "apple-touch-icon-precomposed",      "href": "http://www.qiyipic.com/ 20130423143600/fix/h5-57x57.png "  },  {      " sizes ":" ",      " rel ":" Apple-touch-icon-precomposed ",      "href": "Http://www.qiyipic.com/20130423143600/fix/H5-0x0.png"  }] </span>

We can handle the resulting JSON data as needed.

Will Google improve?

The answer is yes, and it has improved, but Google is not modifying the onreceivedtouchiconurl approach, but Google is pushing its own set of rules.

On Chrome, Google adds an element that Google provides as a way to define metadata for a Web program.

<span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;" ><link rel= "manifest" href= "Manifest.json" ></span>

In the metadata JSON, you can customize the title, the start page, whether the program is horizontal or vertical screen display. A simple JSON example is as follows, where we can see several icons like touch icon in icons, src for icon path, sizes for size, type is mimetype, Density refers to the screen density in Android (so it's more Android).

<span style= "FONT-FAMILY:ARIAL;FONT-SIZE:14PX;" >{"name": "Web application Manifest Sample", "Icons": [{"src": "Launcher-icon-0-75x.png", "Sizes": "3 6x36 "," type ":" Image/png "," Density ":" 0.75 "}, {" src ":" Launcher-icon-1x.png "," Sizes ":" 48x4 8 "," type ":" Image/png "," Density ":" 1.0 "}, {" src ":" Launcher-icon-1-5x.png "," Sizes ":" 72x72 "      , "type": "Image/png", "Density": "1.5"}, {"src": "Launcher-icon-2x.png", "Sizes": "96x96",      "Type": "Image/png", "Density": "2.0"}, {"src": "Launcher-icon-3x.png", "Sizes": "144x144", "Type": "Image/png", "Density": "3.0"}, {"src": "Launcher-icon-4x.png", "Sizes": "192x192", " Type ":" Image/png "," Density ":" 4.0 "}]," Start_url ":" Index.html "," Display ":" standalone "," orientation ":" Landscape "}</SPAN> 

But because the standard implementation rate is relatively low at the moment, we still need to use Apple's touch icon.

SOURCE Download:Http://pan.baidu.com/s/1dDD3gZZ

Scenarios for handling touch icon in Android