Android中處理apple-touch-icon詳解

更新時間：2015年01月19日 08:48:50 投稿：junjie

這篇文章主要介紹了Android中處理apple-touch-icon詳解,在Android如果想把網(wǎng)頁放到桌面上,也需要使用Touch Icon圖標(biāo)才可實現(xiàn),本文即講解Android中處理Touch Icon的一些知識,需要的朋友可以參考下

蘋果的Touch Icon相對我們都比較熟悉，是蘋果為了支持網(wǎng)絡(luò)應(yīng)用（或者說網(wǎng)頁）添加到桌面需要的圖標(biāo)，有了這些Touch Icon的網(wǎng)頁鏈接更加和Native應(yīng)用更相像了。由于蘋果設(shè)備IPod，IPhone,IPad等設(shè)備廣泛，很多網(wǎng)頁都提供了touch icon這種圖標(biāo)資源。由于Android中并沒有及早的有一份這樣的標(biāo)準(zhǔn)，當(dāng)我們想把網(wǎng)頁添加到桌面時，仍然需要使用蘋果的Touch Icon。

Touch Icon

當(dāng)我們想讓一個網(wǎng)頁比較完美地添加到桌面，通常情況下我們需要設(shè)置一個png圖片文件作為apple-touch-icon。比如：

復(fù)制代碼代碼如下:

如果想支持IPhone和IPad，我們需要使用sizes屬性來制定多個圖片，默認(rèn)sizes的值為60 x 60。

復(fù)制代碼代碼如下:

<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">

在IOS7之前，蘋果系統(tǒng)會對添加到桌面的圖標(biāo)進(jìn)行圓角化等視覺上的處理，為了不讓其處理，我們可以使用apple-touch-icon-precomposed來作為rel的值實現(xiàn)。

更多關(guān)于Touch Icon的信息，可以訪問水果開發(fā)者網(wǎng)站了解更多。

Android中有缺陷的實現(xiàn)

在Android WebView提供了處理Touch Icon的回調(diào)，onReceivedTouchIconUrl(WebView view, String url,boolean precomposed)該方法返回了對我們有用的touch icon的url，和是否為預(yù)組合（在IOS中不需要進(jìn)行視覺處理）。雖然有這些數(shù)據(jù)，我們可以進(jìn)行處理，但是這其中是有問題的，就是我們不好確定文件的大小，來選擇適合的圖片。

舉個例子,如下一個網(wǎng)頁的源碼，其中sizes的順序不規(guī)律

復(fù)制代碼代碼如下:

加載網(wǎng)頁，onReceivedTouchIconUrl輸出的日志

復(fù)制代碼代碼如下:

I/MainActivity( 6995): onReceivedTouchIconUrl url=http://www.qiyipic.com/20130423143600/fix/H5-0x0.png;precomposed=true

I/MainActivity( 6995): onReceivedTouchIconUrl url=http://www.qiyipic.com/20130423143600/fix/H5-57x57.png;precomposed=true

I/MainActivity( 6995): onReceivedTouchIconUrl url=http://www.qiyipic.com/20130423143600/fix/H5-114x114.png;precomposed=true

I/MainActivity( 6995): onReceivedTouchIconUrl url=http://www.qiyipic.com/20130423143600/fix/H5-72x72.png;precomposed=true

從上面的輸出來看，基本上是后面（書寫）的元素先打印出來，所以這個回調(diào)的缺陷如下

1.由于Touch Icon url地址沒有硬性規(guī)定，不能根據(jù)url包含某些尺寸來判斷使用哪個icon
2.由于網(wǎng)頁編寫touch icon元素相對隨意，不能根據(jù)onReceivedTouchIconUrl調(diào)用先后來決定使用哪個icon
3.回調(diào)中沒有sizes屬性值，不好確定使用哪個icon
4.如果我們選取質(zhì)量最高的圖片，然后進(jìn)行適當(dāng)壓縮處理或許可以解決問題，但是將全部icon下載下來或者根據(jù)Head頭信息總感覺不怎么好。

改進(jìn)方法

既然WebView沒有現(xiàn)成的方法滿足我們的需求，只好自己來實現(xiàn)。其實實現(xiàn)方法還是比較簡單地就是js腳本注入檢測網(wǎng)頁元素中得touch icon，返回json數(shù)據(jù)。

JavaScript方法

下面的JS代碼所做的功能為查找所有為touch icon的link元素，包含正常的還標(biāo)記為precomposed。然后將這些link元素的屬性存入json數(shù)據(jù)，最后返回給Java代碼中對應(yīng)的回調(diào)。

復(fù)制代碼代碼如下:

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代碼

這里為了便于理解還是全部貼出了demo的源碼，demo中當(dāng)網(wǎng)頁加載完成之后注入上面的js代碼獲取touch icon信息，然后返回給java的回調(diào)方法中。如果不清楚Java和JavaScript交互，可以訪問Android中Java和JavaScript交互了解更多。

復(fù)制代碼代碼如下:

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 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();
}
}

返回的JSON數(shù)據(jù)

復(fù)制代碼代碼如下:

[

  {

      "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"

  }

]

我們可以對得到的JSON數(shù)據(jù)按照需要處理。

Google會改進(jìn)么

答案是會，而且已經(jīng)改進(jìn)，但Google修改的不是onReceivedTouchIconUrl這個方法，而是Google正在推行自己的一套規(guī)則。

在Chrome上，Google增加了這樣一個元素，這是Google提供的為網(wǎng)頁程序定義元數(shù)據(jù)的方法。

復(fù)制代碼代碼如下:

在元數(shù)據(jù)json中，你可以自定義title，起始頁，程序是橫屏還是豎屏展示。一個簡單地json實例如下，這里我們可以看到其中icons中存在多個類似touch icon的圖標(biāo)，src代表圖標(biāo)路徑，sizes代表大小，type就是mimetype，density指的是Android中的屏幕密度（這樣更加Android化了）。

復(fù)制代碼代碼如下:

{

  "name": "Web Application Manifest Sample",

  "icons": [

    {

      "src": "launcher-icon-0-75x.png",

      "sizes": "36x36",

      "type": "image/png",

      "density": "0.75"

    },

    {

      "src": "launcher-icon-1x.png",

      "sizes": "48x48",

      "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"

}