跨平台PhoneGap技術架構三：PhoneGap底層原理（中）

越來越發現把自己的思路理清楚並且能夠給別人講明白是件很困難的事情，技術博客不等於小說、散文，不能天馬行空，思維必須嚴謹，思路必須清晰。

寫技術博客要隨時審視自己的思路是不是還連貫，要不斷返回去看代碼，再從代碼理清思路。有時還要查找資料來把某個點解釋清楚，當然其中會有很多自己不太清楚的地方，所以也希望博友能一起交流、討論，給指出不正確的地方，博客確實是一個互相進步的很好的手段。

好了，不多說了，進入正題。

昨天講解了DroidGap類，DroidGap繼承Activity，在DroidGap的init()初始化方法中設置了WebView，今天主要講解CordovaWebView類以及CordovaWebviewClient類和CordovaChromeClient類。

CordovaWebView類

public class CordovaWebView extends WebView {...}

CordovaWebView類繼承WebView類，在上一篇博文中已經對WebView類做了簡要的介紹。PhoneGap針對不同平台的WebView做了擴展和封裝，使WebView這個組件變成可訪問設備本地API的強大瀏覽器，所以開發人員在PhoneGap框架下可通過JavaScript訪問設備本地API。

可以說，CordovaWebView是整個PhoneGap的核心組件。

  /**
     * Constructor.
     *
     * @param context
     */
    public CordovaWebView(Context context) {
        super(context);
        if (CordovaInterface.class.isInstance(context))
        {
            this.cordova = (CordovaInterface) context;
        }
        else
        {
            Log.d(TAG, "Your activity must implement CordovaInterface to work");
        }
        this.loadConfiguration();
        this.setup();
    }

CordovaWebView類的構造函數中，需要傳入Context，並且Context必須是CordovaInterface的實現類（這里需要特別注意）。構造函數里調用loadConfiguration()和Setup()方法。在CordovaWebView類的構造函數重載方法中，還有setWebChromeClient和setWebViewClient對CordovaWebView的設置，原因在上篇最后也有講到，這兩個類的具體講解在下面。

    /**
     * Load Cordova configuration from res/xml/cordova.xml.
     * Approved list of URLs that can be loaded into DroidGap
     *      <access origin="http://server regexp" subdomains="true" />
     * Log level: ERROR, WARN, INFO, DEBUG, VERBOSE (default=ERROR)
     *      <log level="DEBUG" />
     */
    private void loadConfiguration() {
        int id = getResources().getIdentifier("cordova", "xml", this.cordova.getActivity().getPackageName());
         // int id = getResources().getIdentifier("cordova", "xml", this.cordova.getPackageName());
        if (id == 0) {
            LOG.i("CordovaLog", "cordova.xml missing. Ignoring...");
            return;
        }
        XmlResourceParser xml = getResources().getXml(id);
        int eventType = -1;
        while (eventType != XmlResourceParser.END_DOCUMENT) {
            if (eventType == XmlResourceParser.START_TAG) {
                String strNode = xml.getName();
                if (strNode.equals("access")) {
                    String origin = xml.getAttributeValue(null, "origin");
                    String subdomains = xml.getAttributeValue(null, "subdomains");
                    if (origin != null) {
                        this.addWhiteListEntry(origin, (subdomains != null) && (subdomains.compareToIgnoreCase("true") == 0));
                    }
                }
                else if (strNode.equals("log")) {
                    String level = xml.getAttributeValue(null, "level");
                    LOG.i("CordovaLog", "Found log level %s", level);
                    if (level != null) {
                        LOG.setLogLevel(level);
                    }
                }
                else if (strNode.equals("preference")) {
                    String name = xml.getAttributeValue(null, "name");
                    String value = xml.getAttributeValue(null, "value");

                    LOG.i("CordovaLog", "Found preference for %s=%s", name, value);
                    Log.d("CordovaLog", "Found preference for " + name + "=" + value);

                    // Save preferences in Intent
                    this.cordova.getActivity().getIntent().putExtra(name, value);
                }
            }
            try {
                eventType = xml.next();
            } catch (XmlPullParserException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        // Init preferences
        if ("true".equals(this.getProperty("useBrowserHistory", "false"))) {
            this.useBrowserHistory = true;
        }
        else {
            this.useBrowserHistory = false;
        }

        if ("true".equals(this.getProperty("fullscreen", "false"))) {
            this.cordova.getActivity().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
            this.cordova.getActivity().getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
    }

loadConfiguration()的作用是從res/xml/cordova.xml文件中加載Cordova配置信息，包括允許加載本地網頁等，xml文件沒幾行，不細說。

   /**
     * Initialize webview.
     */
    @SuppressWarnings("deprecation")
    private void setup() {

        this.setInitialScale(0);
        this.setVerticalScrollBarEnabled(false);
        this.requestFocusFromTouch();

        // Enable JavaScript
        WebSettings settings = this.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);

        //Set the nav dump for HTC
        settings.setNavDump(true);

        // Enable database
        settings.setDatabaseEnabled(true);
        String databasePath = this.cordova.getActivity().getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
        settings.setDatabasePath(databasePath);

        // Enable DOM storage
        settings.setDomStorageEnabled(true);

        // Enable built-in geolocation
        settings.setGeolocationEnabled(true);

        //Start up the plugin manager
        try {
            this.pluginManager = new PluginManager(this, this.cordova);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

setup()方法初始化WebView配置，包括設置WebView初始化視圖大小、是否允許垂直滾動條、觸摸焦點信息。

因為PhoneGap的強大之處在於可以在Web端直接調用底層API，包括照相機、指南針、GPS等設備，其實現這些功能是通過JavaScript與底層交互實現的，所以在接下來設置settings.setJavaScriptEnabled(true)也就理所當然的事情了。

然后設置了數據庫database、DOM storage和地理位置應用geolocation等信息，這里也不細講。

需要着重提到的一點是最后PhoneGap插件的初始化。沒錯，PhoneGap插件的初始化是在這里進行的。PhoneGap插件管理機制是PhoneGap實現跨平台的基礎。pluginManager類在后面也會講到。

 

在上篇中講到了DroidGap類loadUrl()方法，我們可以把它看成是整個PhoneGap應用的入口函數。實際DroidGap類的loadUrl()方法調用了CordovaWebView類的loadUrl()方法：

   /**
     * Load the url into the webview.
     *
     * @param url
     */
    @Override
    public void loadUrl(String url) {
        if (url.equals("about:blank") || url.startsWith("javascript:")) {
            this.loadUrlNow(url);
        }
        else {

            String initUrl = this.getProperty("url", null);

            // If first page of app, then set URL to load to be the one passed in
            if (initUrl == null || (this.urls.size() > 0)) {
                this.loadUrlIntoView(url);
            }
            // Otherwise use the URL specified in the activity's extras bundle
            else {
                this.loadUrlIntoView(initUrl);
            }
        }
    }

代碼不多，也比較好理解，自己看吧，不細講了。O(∩_∩)O~

    /**
     * Load the url into the webview.
     *
     * @param url
     */
    public void loadUrlIntoView(final String url) {
        LOG.d(TAG, ">>> loadUrl(" + url + ")");

        this.url = url;
        if (this.baseUrl == null) {
            int i = url.lastIndexOf('/');
            if (i > 0) {
                this.baseUrl = url.substring(0, i + 1);
            }
            else {
                this.baseUrl = this.url + "/";
            }

 //           this.pluginManager.init();

            if (!this.useBrowserHistory) {
                this.urls.push(url);
            }
        }

        // Create a timeout timer for loadUrl
        final CordovaWebView me = this;
        final int currentLoadUrlTimeout = me.loadUrlTimeout;
        final int loadUrlTimeoutValue = Integer.parseInt(this.getProperty("loadUrlTimeoutValue", "20000"));

        // Timeout error method
        final Runnable loadError = new Runnable() {
            public void run() {
                me.stopLoading();
                LOG.e(TAG, "CordovaWebView: TIMEOUT ERROR!");
                if (viewClient != null) {
                    viewClient.onReceivedError(me, -6, "The connection to the server was unsuccessful.", url);
                }
            }
        };

        // Timeout timer method
        final Runnable timeoutCheck = new Runnable() {
            public void run() {
                try {
                    synchronized (this) {
                        wait(loadUrlTimeoutValue);
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }

                // If timeout, then stop loading and handle error
                if (me.loadUrlTimeout == currentLoadUrlTimeout) {
                    me.cordova.getActivity().runOnUiThread(loadError);
                }
            }
        };

        // Load url
        this.cordova.getActivity().runOnUiThread(new Runnable() {
            public void run() {
                Thread thread = new Thread(timeoutCheck);
                thread.start();
                me.loadUrlNow(url);
            }
        });
    }

這里需要細講一下。Android WebView里並沒有對加載超時的處理，PhoneGap自己實現了加載超時處理的方法。雖然看不看這里並不會影響對PhoneGap整個機制的理解，但拿出來講一下對以后可能也會很有用處。

從代碼的第26行注釋看起，CordovaWebViewClient類有一個屬性LoadUrlTimeout，這里不要被其定義為int類型迷惑，實際這個變量完全可以是boolean布爾值，因為它只有兩個值：0和1。在頁面開始加載時currentLoadUrlTimeout初始化為me.loadUrlTimeout（這個值初始化為0），在頁面加載完成（注意：這里CordovaWebViewClient派上用場了），即CordovaWebViewClient類里OnpageFinished()方法中appView.LoadUrlTimeout被置成1。定義了loadError和runOnUiThread兩個線程。然后起了一個在Timeout之后執行的線程，具體執行那個線程就看頁面是否加載完成，即OnpageFinished()方法中appView.LoadUrlTimeout是否被置成了1。

 

CordovaWebViewClient類

CordovaWebViewClient類主要處理各種通知、請求事件的，重寫了WebView類的一些方法，這里主要講解其中onPageStarted()和onPageFinished()兩個方法。

    /**
     * Notify the host application that a page has started loading. 
     * This method is called once for each main frame load so a page with iframes or framesets will call onPageStarted 
     * one time for the main frame. This also means that onPageStarted will not be called when the contents of an 
     * embedded frame changes, i.e. clicking a link whose target is an iframe. 
     * 
     * @param view          The webview initiating the callback.
     * @param url           The url of the page.
     */
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // Clear history so history.back() doesn't do anything.
        // So we can reinit() native side CallbackServer & PluginManager.
        if (!this.appView.useBrowserHistory) {
            view.clearHistory();
            this.doClearHistory = true;
        }

        // Create callback server and plugin manager
        if (this.appView.callbackServer == null) {
            this.appView.callbackServer = new CallbackServer();
            this.appView.callbackServer.init(url);
        }
        else {
            this.appView.callbackServer.reinit(url);
        }

        // Broadcast message that page has loaded
        this.appView.postMessage("onPageStarted", url);
    }

從文檔注釋我們可以看出，onPageStarted方法用於通知主應用程序Web頁面開始加載了。其中在頁面加載時比較重要的一步是創建CallbackServer對象並初始化。（CallbackServer類可是實現插件異步執行的重頭戲啊，好緊張啊，寫了這么久CallbackServer終於出現了啊o(╯□╰)o）

    /**
     * Notify the host application that a page has finished loading.
     * This method is called only for main frame. When onPageFinished() is called, the rendering picture may not be updated yet.
     * 
     *
     * @param view          The webview initiating the callback.
     * @param url           The url of the page.
     */
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        LOG.d(TAG, "onPageFinished(" + url + ")");

        /**
         * Because of a timing issue we need to clear this history in onPageFinished as well as
         * onPageStarted. However we only want to do this if the doClearHistory boolean is set to
         * true. You see when you load a url with a # in it which is common in jQuery applications
         * onPageStared is not called. Clearing the history at that point would break jQuery apps.
         */
        if (this.doClearHistory) {
            view.clearHistory();
            this.doClearHistory = false;
        }

        // Clear timeout flag
        this.appView.loadUrlTimeout++;

        // Try firing the onNativeReady event in JS. If it fails because the JS is
        // not loaded yet then just set a flag so that the onNativeReady can be fired
        // from the JS side when the JS gets to that code.
        if (!url.equals("about:blank")) {
            this.appView.loadUrl("javascript:try{ cordova.require('cordova/channel').onNativeReady.fire();}catch(e){_nativeReady = true;}");
            this.appView.postMessage("onNativeReady", null);
        }

        // Broadcast message that page has loaded
        this.appView.postMessage("onPageFinished", url);

        // Make app visible after 2 sec in case there was a JS error and Cordova JS never initialized correctly
        if (this.appView.getVisibility() == View.INVISIBLE) {
            Thread t = new Thread(new Runnable() {
                public void run() {
                    try {
                        Thread.sleep(2000);
                        cordova.getActivity().runOnUiThread(new Runnable() {
                            public void run() {
                                appView.postMessage("spinner", "stop");
                            }
                        });
                    } catch (InterruptedException e) {
                    }
                }
            });
            t.start();
        }

        // Shutdown if blank loaded
        if (url.equals("about:blank")) {
            if (this.appView.callbackServer != null) {
                this.appView.callbackServer.destroy();
            }
            appView.postMessage("exit", null);
        }
    }

上文已經提到在onPageFinished方法中會執行this.appView.loadUrlTimeout++，定時器loadUrlTimeout的值被置為1，表明頁面加載完成。如果沒有執行到此，說明加載超時，在CordovaWebView類的loadUrlIntoView()方法中判斷if(currentLoadUrlTimeout ==me.loadUrlTimeout)，則執行loadError線程。

CordovaChromeClient類

WebChromeClient是輔助WebView處理Javascript的對話框，網站圖標，網站title，加載進度等，一般的WebView可以不設置ChromeClient，比如你的WebView不需要處理JavaScript腳本。前面已經提到為什么PhoneGap要設置ChromeClient，不再多說。

引用某位大俠的話說，關於Java/JS互調，在android sdk文檔中,也有用JsInterface和loadUrl做到交互的示例。PhoneGap並沒有選擇用JsInterface，而是使用攔截prompt這種hack做法。

對JavaScript消息的攔截是在onJsPrompt()方法中實現並處理的。

    /**
     * Tell the client to display a prompt dialog to the user.
     * If the client returns true, WebView will assume that the client will
     * handle the prompt dialog and call the appropriate JsPromptResult method.
     *
     * Since we are hacking prompts for our own purposes, we should not be using them for
     * this purpose, perhaps we should hack console.log to do this instead!
     *
     * @param view
     * @param url
     * @param message
     * @param defaultValue
     * @param result
     */
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

        // Security check to make sure any requests are coming from the page initially
        // loaded in webview and not another loaded in an iframe.
        boolean reqOk = false;
        if (url.startsWith("file://") || url.indexOf(this.appView.baseUrl) == 0 || this.appView.isUrlWhiteListed(url)) {
            reqOk = true;
        }

        // Calling PluginManager.exec() to call a native service using 
        // prompt(this.stringify(args), "gap:"+this.stringify([service, action, callbackId, true]));
        if (reqOk && defaultValue != null && defaultValue.length() > 3 && defaultValue.substring(0, 4).equals("gap:")) {
            JSONArray array;
            try {
                array = new JSONArray(defaultValue.substring(4));
                String service = array.getString(0);
                String action = array.getString(1);
                String callbackId = array.getString(2);
                boolean async = array.getBoolean(3);
                String r = this.appView.pluginManager.exec(service, action, callbackId, message, async);
                result.confirm(r);
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }

        // Polling for JavaScript messages 
        else if (reqOk && defaultValue != null && defaultValue.equals("gap_poll:")) {
            String r = this.appView.callbackServer.getJavascript();
            result.confirm(r);
        }

        // Do NO-OP so older code doesn't display dialog
        else if (defaultValue != null && defaultValue.equals("gap_init:")) {
            result.confirm("OK");
        }

        // Calling into CallbackServer
        else if (reqOk && defaultValue != null && defaultValue.equals("gap_callbackServer:")) {
            String r = "";
            if (message.equals("usePolling")) {
                r = "" + this.appView.callbackServer.usePolling();
            }
            else if (message.equals("restartServer")) {
                this.appView.callbackServer.restartServer();
            }
            else if (message.equals("getPort")) {
                r = Integer.toString(this.appView.callbackServer.getPort());
            }
            else if (message.equals("getToken")) {
                r = this.appView.callbackServer.getToken();
            }
            result.confirm(r);
        }

        // Show dialog
        else {
            final JsPromptResult res = result;
            AlertDialog.Builder dlg = new AlertDialog.Builder(this.cordova.getActivity());
            dlg.setMessage(message);
            final EditText input = new EditText(this.cordova.getActivity());
            if (defaultValue != null) {
                input.setText(defaultValue);
            }
            dlg.setView(input);
            dlg.setCancelable(false);
            dlg.setPositiveButton(android.R.string.ok,
                    new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            String usertext = input.getText().toString();
                            res.confirm(usertext);
                        }
                    });
            dlg.setNegativeButton(android.R.string.cancel,
                    new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            res.cancel();
                        }
                    });
            dlg.create();
            dlg.show();
        }
        return true;
    }

onJsPrompt到底攔截了哪些信息呢？

從傳入參數來說，比較重要的有兩個：message和defaultValue。

message字符串存放了插件的應用信息，如Camera插件的圖片質量、圖片是否可編輯，圖片返回類型等。

defaultValue字符串存放了插件信息：service（如Camera）、action（如getPicture()）、callbackId、async等。

攔截到這些信息后就會調用this.appView.pluginManager.exec(service, action, callbackId, message, async)去執行。

當然onJsPrompt不只實現插件調用信息，還有JavaScript polling輪詢信息、CallbackServer調用信息等處理。

 

呃，今天寫到這里吧，歡迎大家批評指正，也可以相互交流。