Downloaded 32 times
![10の弊社事例https://first-flight.sony.com/pj/2/HUIS%20REMOTE%20CONTROLLERHUIS カスタマイズアプリElectron を用いて実装2016.3.28 OSS として公開・開発中https://github.com/sony/huis-ui-creatorリモコンをあなたらしく。HUIS[ハウス] REMOTE CONTROLLERhttp://huis.jp/](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2f201604050cordovaelectronelinux-160407111014%2f75%2fcordova-electron-10-2048.jpg&f=jpg&w=240)
![14plugin の例• WebApp(JavaScript)からpluginを呼び出すコード• Platform 問わず共通• plugin内でJavaScriptから呼び出される部分のコード• Platform 毎にAPIが違う• Android (Java) の場合の例public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {// functionAif (action.equals("actionA")) {int int_value = args.getInt(0);this.actionA(int_value, callbackContext);return true;}// functionBelse if (action.equals("actionB")) {this.actionB(callbackContext);return true;}return false;}cordova.exec( win_callback, fail_callback, "service名", "action名", [引数の配列] );WebViewcordova appWebApppluginpluginCordova](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2f201604050cordovaelectronelinux-160407111014%2f75%2fcordova-electron-14-2048.jpg&f=jpg&w=240)
YS
Uploaded byYasuharu Seki
PPTX, PDF5,655 views
cordova/electronの構造を知る
2016.4.7 第８回 Apache Cordova 勉強会で使用した資料
Recommended
![[AWSマイスターシリーズ]AWS Storage Gateway](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f20130515aws-meister-regenerate-storagegwpublic-130515065411-phpapp02-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![[Cloud OnAir] Google Cloud へのデータ移行 2019年1月24日 放送](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f124-190124123019-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
What's hot
Similar to cordova/electronの構造を知る
cordova/electronの構造を知る
- 1.1Hybrid FWs: Cordova/Electronの構造を知るソニー株式会社UXプラットフォーム UX・マーケティング本部 クラウド＆サービスアプリ開発運用部門 １部 2 課関 康治number of U.S. states state capitols I've visited.yasuharu.seki.7ahirun0426Yasuharu.Seki@jp.sony.com
- 2.2本日の AgendaHybrid Appを実現する FWs ２つを深掘りしてみる• 概論• Hybrid App とは / 特長と課題• Cordova / Electron 概要• Cordova の構造を知る• Cordova Android• Cordova Android + Crosswalk• Cordova iOS• Cordova ubuntu• Cordova 上で新 Platform に対応するには？• Electron の構造を知る• Cordova vs Electron• 終わりに
- 3.
- 4.4Hybrid App とは～ もう一つのアプリ実装法 ～Native Applicationの例UI AppLogicDriverJava/Objective-C/C++Hybrid フレームワークJavaScript ・Native 通信用APIを通じてデータをやり取り・プラグイン機構を用いて機能拡張WebViewUI AppLogicDriverAPIHybrid Applicationvsアプリ組込ブラウザでWebApp を動かすブラウザからNative Library を操作可能
- 5.5Hybrid App 特長と課題特長-アプリとして利用可能なリソース全てにアクセス可能- UIの実現が比較的楽 (HTMLでページ作成とNative実装での実現の比較)- 複数の Platform 間で JavaScript ソースコードの共有が期待できる課題- アプリ中で browser を手配する必要がある- browser は通常 sandbox 化されており、native library を直接操作できるようになっていない- 必要とする native library が用意されているかどうかは コミュニティ次第WebViewUI AppLogicDriverAPIアプリの中でbrowser をどのように実現しているかbrowser 内部と外部のnative library とでどのようにやり取りしているかplugin や tool 等のecosystem がどの程度充実しているか注目すべき点
- 6.
- 7.7とは• Apache foundationが提供している Hybrid App Framework• 2009: Nitobi PhoneGap として誕生• 2011: Adobe が Nitobi を買収 ⇒ Adobe PhoneGap に• 2011: Apache foundation にコード寄贈 ⇒ Apache Cordova に• 多くのプラットフォームに対応• https://cordova.apache.org/contribute/• 各社の mobile app 開発 Framework の基礎技術として使われている• IBM MobileFirst Platform (IBM)• Oracle ADF Mobile (Oracle)• SAP Mobile Platform (SAP)• monaca (Asial)• ionic (Drifty)
- 8.
- 9.9とは• GitHub.com が提供しているデスクトップ向けHybrid App Framework• Atom Editor の下回りとして開発• 2015.4.17 に Electron という名前でリリース• Electron を使った desktop アプリ増加中• Visual Studio Code• slack desktop app• wordpress.com desktop app• etc. etc.• http://electron.atom.io/• 動作プラットフォームVisual Studio CodeElectron アプリの例第６回 Apache Cordova 勉強会で Asial 田中さんより紹介がありました
- 10.10の弊社事例https://first-flight.sony.com/pj/2/HUIS%20REMOTE%20CONTROLLERHUIS カスタマイズアプリElectron を用いて実装2016.3.28OSS として公開・開発中https://github.com/sony/huis-ui-creatorリモコンをあなたらしく。HUIS[ハウス] REMOTE CONTROLLERhttp://huis.jp/
- 11.
- 12.12OS (Platform)WebViewcordova app構造と設計思想WebApp(JavaScript)cordovaJavaScriptlibrarycordovaNativelibrary cordova plugin (Native)cordova plugin (Native)設計思想： 出来る限り OS(環境)側で用意される機構を用いる• WebView は OS の物を用いる• OS 毎に WebView の調達方法が異なる• Native Layer との通信法は各環境毎に調達• かなり Hack に近いことをしているJS⇔Native の通信方法はCordova で用意。(かなりHack)WebView の実現法はtarget platform 毎に異なるPlatformCordovaApplication注目
- 13.13WebViewcordova appJS ⇔Native 通信のフローWebApp (JavaScript) cordova JS lib cordova native libcordova plugin (Native)cordova plugin (Native)アクションJS ⇒ Native 通信Native ⇒ JS 通信結果通知CordovaAPIcordova.exec()処理終了callbackCordovapluginAPIplugin 呼び出し処理終了通知互いに独立互いに独立アプリ開発者は Cordova API とCordova plugin API のみ知っていれば良いplugin処理callbackとなる関数objectを保持する呼出状態保持するかはPF毎の実装次第
- 14.14plugin の例• WebApp(JavaScript)からpluginを呼び出すコード•Platform 問わず共通• plugin内でJavaScriptから呼び出される部分のコード• Platform 毎にAPIが違う• Android (Java) の場合の例public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {// functionAif (action.equals("actionA")) {int int_value = args.getInt(0);this.actionA(int_value, callbackContext);return true;}// functionBelse if (action.equals("actionB")) {this.actionB(callbackContext);return true;}return false;}cordova.exec( win_callback, fail_callback, "service名", "action名", [引数の配列] );WebViewcordova appWebApppluginpluginCordova
- 15.
- 16.16cordova native libAndroidPlatform の構成MainActivity extends CordovaActivitySystemWebViewEngineimplements CordovaWebViewEngine android.webkit.WebViewを継承WebView: Android OS に付随の android.webkit.WebView を用いる1. MainActivity 起動2. SystemWebViewEngine, SystemWebView を作成3. cordova native lib を生成4. _cordovaNative オブジェクトを addJavaScriptInterface() で JS engine に登録5. WebApp 起動6. cordova JS library 初期化SystemWebView extends WebViewWebApp (JavaScript)cordovaJSlibrary_cordovaNativewebView.addJavaScriptInterface() で登録OS Version 毎に挙動が異なるアプリのファイルサイズは小さい
- 17.17JS_OBJECT形式_cordovaNative を通じて通信• 起動時に登録された_cordovaNative の exec() を実行することで、Java層の CordovaBridge.jsExec が呼び出される• 登録には addJavaScriptInterface() を利用cordova native libAndroid Platform: JS ⇒ Native 通信法WebViewcordova JS library_cordovaNativePROMPT形式window.prompt() ⇒WebChromeClient.onJsPrompt() を利用• JS層で window.prompt() を実行すると、Chrome のイベントとして onJsPrompt() が呼び出される• onJsPrompt() に渡されてきたメッセージを cordova native libがよしなに判断 ⇒ plugin コールするcordova native libWebViewcordova JS library_cordovaNativeprompt()onJsPrompt()通常は JS_OBJECT形式fallback として PROMPT 形式を使う
- 18.18Android Platform: Native⇒ JS 通信法POLLING形式50ms 毎に問い合わせ• JS側libが50ms毎にretrieveJsMessages()を実行してNative側のmessage queueの内容を確認• 確認には JS ⇒ Native の通信法を用いるLOAD_URL形式webView.loadUrl() で JS 実行• Native側でcallbackFromNative() を呼び出す JS コードを生成• loadUrl() のURL 引数に '#"https://www.slideshare.net/slideshow/cordovaelectron/60604925#19">19
- 20.
- 21.21とはOS の WebViewの代わりに、アプリに組み込んだ Chromium をブラウザとして利用する・OSに拠らず最新の API が利用可能・動作確認の対象が Crosswalk のみに絞れる・アプリの配布ファイルサイズが ～20MB 位増加するOS (Platform)WebViewcordova appWebApp (JavaScript)cordovaJavaScriptlibrarycordovaNativelibrary cordova plugincordova pluginOS (Platform)cordova appcordova plugincordova pluginCrosswalkWebApp (JavaScript)cordovaJavaScriptlibrarycordovaNativelibrary
- 22.22cordova native libAndroidPlatform の構成MainActivity extends CordovaActivitySystemWebViewEngineimplements CordovaWebViewEngine android.webkit.WebViewを継承WebView: Android OS に付随の android.webkit.WebView を用いる1. MainActivity 起動2. SystemWebViewEngine, SystemWebView を作成3. cordova native lib を生成4. _cordovaNative オブジェクトを addJavaScriptInterface() で JS engine に登録5. WebApp 起動6. cordova JS library 初期化SystemWebView extends WebViewWebApp (JavaScript)cordovaJSlibrary_cordovaNativewebView.addJavaScriptInterface() で登録
- 23.23cordova native libAndroid+ Crosswalk の構成MainActivity extends CordovaActivityXWalkWebViewEngineimplements CordovaWebViewEngine ChromiumのWebViewを継承WebView: Crosswalk に包含された Chromium の WebView を用いる1. MainActivity 起動2. SystemWebViewEngine, SystemWebView を作成3. cordova native lib を生成4. _cordovaNative オブジェクトを addJavaScriptInterface() で JS engine に登録5. WebApp 起動6. cordova JS library 初期化XWalkCordovaView extends XWalkViewWebApp (JavaScript)cordovaJSlibrary_cordovaNativewebView.addJavaScriptInterface() で登録通常の Android 版と同じ動作• 初期化• JS ⇔ Native 通信
- 24.
- 25.25cordova native libraryiOSPlatform の構成AppDelegateCDVViewController : UIWebViewDelegateWebView: iOS に付属の UIWebView を利用1. AppDelegate 起動2. (アプリ実装) CDVViewController を継承した ViewController を作成3. AppDelegate.viewController に作成した ViewController を登録4. viewDidLoad で config.xml に記述してある WebApp 起動ファイルを読み込む5. cordova JS library 初期化WebApp (JavaScript)cordovaJSlibraryiOSAPI* CDVViewController に iOS API コールされた際のフックが内蔵されているcordova-ios 4.0 から iOS8,9 向けにWKWebView が利用可能⇒ cordova-plugin-wkwebview-engine を追加インストール
- 26.26stringByEvaluatingJavaScriptFromString形式UIWebKit 標準の Native⇒ JS 実行法で通信• cordova JS library をコールするJavaScriptコードを native lib で生成• webview:stringByEvaluatingJavaScriptFromString: を利用して生成したコードをWebView で実行cordova native libiOS Platform: Native ⇒ JS 通信法WebViewcordova JS libraryWKWebView ではevaluate#"https://www.slideshare.net/slideshow/cordovaelectron/60604925#27">27iOS Platform: JS⇒ Native 通信法IFRAME形式iframe にURL読み込むことで通知• キューにコマンドをプール• WebView 内の iframe にダミーページを読み込む• native lib がページ読み込みトリガをフック• Native側からJS側にのキューを読み込むXHR形式XMLHTTPRequest()発行で通知• キューにコマンドをプール• native lib が httpd として動作• XMLHTTPRequest() をローカルで実行• httpd が XHR をフック• Native側からJS側のキューを読み込むWKWebKit形式標準の JS⇒Native通信• window.webkit.messageHandlers を用いて native のライブラリをコールcordova native libWebViewcordova JS librarycommand queue…loadpagecordova native libWebViewcordova JS librarymessageHandlersiframe通知checkcommandcommandcommandcordova native libWebViewcordova JS librarycommand queue…XMLHTTPRequest()checkcommandcommandcommandデフォルトは IFRAME 形式WKWebKit が使える場合は WKWebKit 方式WKWebKit は iOS 8,9 のみの対応＆ 要 webview engine plugin 追加
- 28.
- 29.29cordova native libraryubuntuPlatform の構成QQmlApplicationEngineWebContext (com.canonical.Oxide)WebView: Qtのライブラリ com.canonical.Oxide を使用• Chromium ベースの WebView をQtで扱えるようにしたもの• ubuntu 提供元である Canonical Ltd. が作成• cordova ubuntu も canonical がメインコントリビュータ• 主に ubuntu OS (phone用) 向けに提供しているNative 通信法：Oxide の Message API を用いる• window.oxide.sendMessage() を実行することで JS ⇒ Native 呼び出し可能• webView.rootFrame.sendMessage() を実行することで Native ⇒ JS 呼び出し可能WebApp (JavaScript)cordovaJSlibraryOxideMessage APICordovaViewInternal
- 30.
- 31.31他 PF に移植する場合の作業WebViewを提供するブラウザの調達1. OS/Platform/Framework に標準のブラウザを採用• インストーラのファイルサイズが小さくなる• OS等のバリエーション毎に動作が異なる可能性がある (検証・修正工数の増大)2. 調達したブラウザをアプリに結合する• ブラウザの挙動が固定できる• JS⇔Native通信法の選択肢が比較的広い• インストーラフットプリントの大型化• ブラウザバージョンアップへの追従工数が必要JavaScript⇔Native の通信法を確保• 正規の方法があればそれを採用• Hack での通信法確保が必要になる場合もその他• 使用したい plugin を移植する必要あり• Cordova CLI へ platform 追加したい場合は cordova project へ upstream する必要あり
- 32.
- 33.33Electron構造と設計思想ChromiumNode plugin(Native)設計思想： WebView(Chromium) と node をアプリに組み込んでしまう• WebView は組み込まれた Chromium の物を利用する• Native Layer とのやり取りは node が受け持つ• WebView と node 間のやり取りは Chromium の IPC 機能を利用するChromiumElectronApplicationnodeWebViewv8 v8node.jsNode plugin(Native)WebApp(Browser part)ChromiumIPCBlinkWebApp(Renderer part)
- 34.
- 35.35課題Electron の課題• Electronの開発はほぼ１人の肩に掛かっている (zcbenz)• リソースも足りていない状況• Chromium/node を抱え込んでいる• 配布ファイルサイズが大きくなってしまう (～20MB位)• Chromium 以外のブラウザを利用したい場合の対応は難しい• 最新の Chromium/node Update 反映にタイムラグがあるCordova/Electron 両対応 Hybrid App を開発する際の課題• Cordova / Electron では、WebAppの構成が異なる• アプリコードの使い回しをする際にはハードルになりそう
- 36.
- 37.37Cordova vs Electron比較開発者 Apache Foundation GitHub.com (@zcbenz)ターゲットアプリ (原則) モバイルアプリ デスクトップアプリＰＦ Android, iOS, Ubuntu, Windows desktop,browserAmazon Fire OS, Blackberry, FireFox OS, Mac OS X, Web OS, Windowsphone 8Windows, Mac OS X, LinuxWebView (原則) OS付随のブラウザを使用 内包する Chromium を使用WebApp構成 ソリッド スレッドが明示的にBrowser(main)/Renderer(UI) で分かれているplugin cordova plugin (Cordova が提供する API) node module (node が提供)plugin repository npm (ecosystem:cordova) n/a
- 38.
- 39.39終わりに現況で Hybrid アプリケーションを実現する場合に使える、２つの代表的なFWsの構造を確認してみた。それぞれの構成を大まかに理解できたのであれば嬉しい。ご清聴ありがとうございました
Editor's Notes
- #3 Hybrid App を実現するための OSS フレームワークはいくつか存在します。今回はその中で Apache Cordova と Electron について、その内部構造がどうなっているかを深掘りしていきたいと思います。Cordova の内部構造は対象OS毎に大きく異なります。ここではAndroid/iOS/Ubuntu向けのCordova実装がどうなっているかを紐解き、仮に別のOS上に Cordova を移植したい場合にはどのような作業を行うべきなのかを明らかにしていきます。また、Electron は Cordova とは異なるアプローチで Hybrid App の実現をしています。これらを対比することで、Hybrid App を実現する仕組みについてより深く理解できればと思っています。
- #13 WebApp - [Cordova JS lib] - (WebView) - [Cordova Native lib] - Native implmentation
- #17 src/io/cordova/hellocordova/MainActivity.javaCordovaActivity.java: 106 onCreate()CordovaActivity.java:134 makeWebView()CordovaWebViewImpl.javacreateEngine() にて SystemWebViewEngine を登録CordovaBridgeCordovaActivity.java:140 init() -> appView.init() は SystemWebViewEngine#init() を指すSystemWebViewEngine.java:89 init()SystemWebViewEngine.java:119 bridge = new CordovaBridge()addJavaScriptInterfaceSystemWebViewEngine.java:89 init()SystemWebViewEngine.java:250 exposeJsInterface()loadUrlMainActivity.java:32index.htmlcordova.js の読み込み・初期化
- #18 CordovaBridge# assets/www/cordova-js-src/exec.js- addJavaScriptInterface()JS側: _cordovaNative の retrieveJsMessages(bridgeSecret, true) をコールNative側: SystemWebViewEngine#exposeJsInterface() → webView.addJavaScriptInterface()☆ これだけだとダメな理由は？ ：deplicated になるから？ ：動作不安定？- prompt()JS側: prompt() で 値 と 'gap:', 'gap_bridge_mode:', 'gap_poll:', 'gap_init:' で始まる文字列を渡すNative側: SystemWebChromeClient#onJsPrompt() が発火 (ChromeのAPI [SystemWebChromeClient extends WebChromeClient]) URL の protocol の値に応じて動作を振り分け 現在は基本 addJavaScriptInterface() [JS_OBJECT mode] で行う。 幾つかのバグのようなケースでのみ PROMPT モードに fallback する設計。
- #19 ☆ Network Online/Offline で JS 層にイベントがあることを通知しているCordovaWebViewImpl#sendPluginResult(PluginResult cr, String callbackId) -> NativeToJSMessageQueue#addPluginResult(PluginResult result, String callbackId) -> NativeToJSMessageQueue#enqueueMessage(JsMessage message) queue.add(message)BridgeMode#onNativeToJsMessageAvailable(final NativeToJSMessageQueue queue) で message をハンドル -> 実装は３種類 - NoOpBridgeMode JS側： pollOnce() を定期的(50ms毎)に実行 → JS->Native のコール法に基づいて Native の queue を取得 - LoadUrlBridgeMode CordovaWebViewImpl#init() で addBridgeMode() Native側: [API] LoadUrlBridgeMode#onNativeToJsMessageAvailable() → NativeToJsMessageQueue#popAndEncodeAsJs() → JsMessage#encodeAsJsMessage() で JS側の callbackFromNative() を呼ぶコードを生成 これを webView.loadUrl("#"https://www.slideshare.net/slideshow/cordovaelectron/60604925#26">#26 UIWebView (iOSのWebViewそのまま)# Cordova iOS 4.0.0 以降では WKWebView が利用可能にself.viewController = [[MainViewController alloc] init]; (AppDelegate.m:35)-> MainViewController : CDVViewController (MainViewController.h:32)-> CDVViewController : UIViewController <UIWebViewDelegate, CDVScreenOrientationDelegate> (CordovaLib/Classes/Public/CDVViewController.h:30)○ WebApp のロード法config.xml の <content src="[file]" /> を参照してロードする-> loadSettings でロード (CordovaLib/Classes/CDVViewController.m:169)-> [self.webView loadRequest:appReq]; (CordovaLib/Classes/CDVViewController.m:474)
- #28 # WKWebKit の参考# http://www.joshuakehn.com/2014/10/29/using-javascript-with-wkwebview-in-ios-8.htmlXHR: XMLHttpRequest() をローカルに対して行うiFrame: 登録している hash の値を変化させ、それを native 側で検知する７通りIFRAME_NAV: デフォルトXHR_NO_PAYLOADXHR_WITH_PAYLOADXHR_OPTIONAL_PAYLOADIFRAME_HASH_NO_PAYLOADIFRAME_HASH_WITH_PAYLOADWK_WEBVIEW_BINDING: iOS8,9 以後の WKWebKit ではこれを用いる# default: IFRAME_NAV, WKWebKit で動作している場合は WK_WEBVIEW_BINDING# それ以外は cordova.exec.setJsToNativeBridgeMode で明示的に設定○ WK_WEBVIEW_BINDING の場合： window.webkit.messageHandler (.cordova.postMessage(command)) (cordova-js-src/exec.js:180)○ それ以外の場合： ○ Native 側から stringByEvaluatingJavaScriptFromString を用いない場合 - XHR_NO/WITH/OPTIONAL_PAYLOAD の場合 pokeNativeViaXhr() CDVViewController viewDidLoad -> [CDVURLProtocol registerViewController:self]; (CDVViewController.m:282) CDVURLProtocol を登録 XTMLHTTPRequest() で /!gap_exec? で始まるURLを発布 CDVURLProtocol canInitWithRequest/startLoading がトリガされる -> canInitWithRequest の方でコマンドを queue に入れる -> XHR_WITH/OPTIONAL_PAYLOAD の場合は enqueueCommandBatch -> XHR_NO_PAYLOAD の場合は processXhrExecBridgePoke -> stringByEvaluatingJavaScriptFromString で JS の nativeFetchMessages() を実行 -> 結果を enqueueCommandBatch CDVCommandQueue executePending で queue に登録された command を実行 # XHR_NO_PAYLOAD の場合は改めて Native 側から JS 側に command の取得に行く。。。- IFRAME_HASH_NO/WITH_PAYLOAD の場合pokeNativeViaIframe()iframe の DOM を display='none' で DOM tree に追加して、表示するコンテンツをfile///#%01, %02 と通知することで Native 側に JSMessage が追加されたことを通知-> shouldStartLoadWithRequest で fetchCommandsFromJs/executePending で実行- IFRAME_NAVpokeNativeViaIframe()gap://ready を追記した iframe を DOM tree に追加することで Native 側に JSMessage が追加されたことを通知-> shouldStartLoadWithRequest で fetchCommandsFromJs/executePending で実行○ [webView stringByEvaluatingJavaScriptFromString] を用いて Native側からデータ取得nativeEvalAndFetch (exec.js:312)<- Native 側からコールする# XHR_NO_PAYLOAD の場合と、Native->JS のコールをする場合への回避コード。。。
- #30 ● WebView をどのように実現しているかQQmlApplicationEngine で用意されている WebViewprovided by com.canonical.Oxide (based on chromium)Window 中に CordovaView を貼り付けplugin\ を pluginとして読み込みonLoadChanged()-> Cordova::loadFinished()-> Cordova#initPlugins()-> pluginWantsToBeAdded -> onPluginWantsToBeAdded-> CordovaWrapper(as cordova_wrapper.js).addPlugin● plugin の実装法- CPlugin を継承する- API 関数定義を signals: 以下に定義する-> signals: 以下に定義することで cordova_wrapper.js 中からのコールが可能になる。- 戻り値は callback もしくは callbackWithoutRemove を呼び出すことで行う-** CAUTION **callback() に渡す callbackID を切り替えることで、win/fail の通知を使い分ける。 scID -> win, ecID -> fail● JS -> Native のコールの仕方com.canonical.Oxide のメッセージングの仕組みを使うcordova.exec() からwindow.oxide.sendMessage("from-cordova", message) でメッセージを send→ CordovaViewInternal の ScriptMessageHandler が受け取る→ CordovaWrapper(as cordova_wrapper.js).messageHandler を実行-> execMethod() により、登録していた plugin の function がコールされる● Native -> JS のコールの仕方cordova.exec() 中に cordova.callbacks[id] に対してコールバックを記録しておくPlugin の実行終了時に callback もしくは callbackWithoutRemove をコールする** CAUTION ** 戻り値の 文字列化後のサイズが 1000 を超えると truncate される(!!)'cordova.callback()' か 'cordova.callbackWithoutRemove()' のコードを生成jsExec() -> emit javaScriptExecNeeded() -> onJavaScriptExecNeeded-> webView.rootFrame.sendMessage(); によって MessageHandler 起動* window.oxide.addMessageHandler に登録されている function により eval(args.code);-> cordova.callback() or cordova.callbackWithoutRemove が実行される-> 登録していた callback を kick.
- #34 WebApp - [Cordova JS lib] - (WebView) - [Cordova Native lib] - Native implmentation