JSPBridgeの理解

4521 ワード
Webフロントエンド
HTML 5の普及と最適化に伴い、モバイル端末で開発されるアプリケーションも増えており、開発者にはWebとnativeのインタラクション、すなわちよく耳にする「JSPBridge」が必要になることが多い.ここで私は自分の理解と実践について、JsBridgeとは何かを話します.
JsBridgeって聞いて、すごくて複雑な感じがする友達もいますが、webもnativeも対話できるようになりましたね.実はそうではありません.私を信じて、JsBridgeは本当にとても簡単なものです.
1.なぜJsBridgeが必要なのですか?
これはくだらない話かもしれませんが、JsBridgeを使っている友达がいると信じていますが、それさえ分かりません.その名の通り、JsBridgeはJavaScriptで作られた橋で、一端はweb、一端はnativeです.このブリッジを構築する目的も簡単で、nativeがwebのjsコードを呼び出すことができ、webがオリジナルのコードを「呼び出す」ことができるようにします.これは私が引用符をつけた呼び出しで、直接呼び出すのではなく、webとnativeが約束したルールに基づいてnativeに何をするかを通知することができ、nativeはもっとこれを持って対応するコードを実行することができます.もちろん、nativeコードをWebで自由に呼び出すことも不可能ではありませんが、そうする人はいないと思います.実現するのは少し面倒ですが、2つ目は大きなセキュリティ上の危険性があります.
2.なぜ「JS」ブリッジなのか
これは比較的分かりやすく、web側はJavaScriptをサポートし、nativeにはwebviewがあり、webviewはロードされたページのロードが完了した後にページのJavaScriptコードを呼び出すことができる.だから、JavaScriptを使うのは当たり前です.
3.native呼び出しweb原理
まずnativeにはwebviewが必要です.このwebviewには
1

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

この方法により,JavaScriptコードを実行し,戻り値を取得することができる.
4.web呼び出しnativeの原理
nativeのwebviewにはエージェントメソッドがあります.
1

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

この方法でページのリクエストをブロックできるので、ここで文章を作ります.Web側がリンクをロードすると、私たちはこの方法の中でブロックして、私たちの約束したルールに合っているかどうかをチェックして、合っているとロードを拒否して、このリンクが持っている情報によって相応のコードを実行して、約束したルールに合わないと正常にリンクをロードします.一般的に、通常のリクエストはhttpプロトコルまたはhttpプロトコルであるため、「jsb」などの他のプロトコルを定義して区別しやすいようにします.nativeが必要なことを「action」をパラメータ名とし,各actionに対応する他のパラメータをそれぞれ約定するルールを約束する.私たちは2つの例を挙げます.
例1
私たちはbackというactionを約束します.パラメータはありません.Web側がロードするリンクは次のとおりです.
1

jsb://action=back

nativeがリクエストをブロックしてjsbプロトコルであることを発見し、これがwebから送信されたタスクであることを知り、解析後back動作であることを発見し、返されたコードを実行した.
例2
ショップ詳細ページにジャンプするためにshopdetailというactionを約束しました.idという名前のパラメータが必要です.idはショップidです.Web側がロードするリンクは次のとおりです.
1

jsb://action=shopdetail&id=1000000

nativeがリクエストをブロックしてjsbプロトコルであることを発見し、これがwebからのタスクであることを知った後、解析したところshopdetail行為であることが分かった.1つは、店舗の詳細を表示するコードを実行し、店舗id 1000000に基づいて店舗の詳細を取得することである.
5.高級パッケージ
上の例はJsBridgeの簡単な使い方にすぎず、より合理的な会話メカニズムを実現するために、いくつかの高度なパッケージを行うこともできます.例えば、webがnativeを呼び出すときにcallbackパラメータを約束し、nativeがwebコードの実行結果を通知するために使用します.パラメータをjson文字列に直接約定し、解析を容易にする.リンクを暗号化して、攻撃やセキュリティの向上などを防止します.
6.web呼び出しnativeのベストプラクティス
実際にはiOS 9の前に、Webのjsからnativeを連続的に呼び出すと、window.location.hrefのような呼び出しが無視されることが分かった.最も信頼できる方法は、iframeを使用してiframeを作成し、リンクを指定し、現在のページに追加してすぐに削除することです.サンプルコードは次のとおりです.
1
2
3
4
5
6
7

function execute(url) {
  var iframe = document.createElement("IFRAME");
  iframe.setAttribute("src", url);
  document.documentElement.appendChild(iframe);
  iframe.parentNode.removeChild(iframe);
  iframe = null;
}
Nodejs+express静的リソースへのアクセス
HTML 5モバイルWebアプリケーション開発——SAP UI 5編(4)