Apple's touch icon is relatively familiar to us, is Apple in order to support the Web application (or the Web page) to add to the desktop needs of the icon, with these touch icon of the Web links more and native application more similar. Because the Apple equipment ipod,iphone,ipad and so on a wide range of devices, many Web pages have provided the touch icon resources. Since there is no such standard in Android, we still need to use the Apple touch Icon when we want to add a Web page to the desktop.
Touch Icon
When we want a Web page to be more perfectly added to the desktop, usually we need to set up a PNG picture file as a apple-touch-icon. Like what:
If you want to support the iphone and the ipad, we need to use the sizes attribute to create multiple pictures with the default sizes value of 60.
Before the IOS7, the Apple system will be added to the desktop icon for the visual processing, etc., in order to not allow it to deal with, we can use apple-touch-icon-precomposed as a REL value implementation.
For more information about touch icon, you can visit the Fruit Developer website to learn more.
Flawed implementations in Android
The Android WebView provides a callback for handling the touch icon, Onreceivedtouchiconurl (WebView view, String Url,boolean precomposed) This method returns the URL to our useful touch icon, and whether it is a pre combination (no visual processing is required in iOS). Although there are these data, we can deal with it, but there is a problem, that is, we are not sure of the size of the file, to select the appropriate picture.
For example, the source of the next page, where the order of sizes is irregular
Load Web page, Onreceivedtouchiconurl output log
From the above output, it is basically the back (writing) element first printed out, so the drawback of this callback is as follows
1. Because the touch Icon URL address has no hard rules, can not be based on the URL contains certain dimensions to determine the use of which Icon
2. Because the Web page to write touch icon element is relatively arbitrary, can not be based on Onreceivedtouchiconurl call to decide which icon to use
3. There is no sizes attribute value in the callback, it is not good to determine which icon to use
4. If we choose the highest quality picture, and then do the appropriate compression may solve the problem, but the full icon download down or according to head header information always feel not good.
Improvement methods
Since WebView has no ready-made way to meet our needs, we have to realize it ourselves. In fact, the implementation of the method is still relatively simple JS script injection detection page elements in the touch icon, return JSON data.
JavaScript method
The following JS code to do the function to find all the touch icon of the link element, including normal also 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.
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 ();
Java code
Here in order to facilitate understanding or all posted a demo of the source code, in the demo when the page is loaded after the completion of the injection of JS to get touch icon information, and then return to the Java callback method. If you are not aware of Java and JavaScript interactions, you can access the Java and JavaScript interactions in Android to learn more.
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 json) {
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 ();
}
}
The returned JSON data
We can deal with the resulting JSON data as needed.
Will Google improve?
The answer is yes and it has been improved, but Google is not onreceivedtouchiconurl this approach, but Google is pursuing its own set of rules.
On Chrome, Google added an element that Google has provided to define metadata for Web-page programs.
In meta-data json, you can customize title, start page, whether the program is horizontal or vertical screen display. A simple JSON instance is as follows, where we can see that there are many icons like touch icon in icons, SRC represents the icon path, sizes represents the size, type is mimetype, Density refers to the screen density in Android (which is more Android).
About Google's new set of standards, you can refer to the add to homescreen
But because of the current rate of implementation is relatively low, so we still need to use the Apple touch icon.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
