Android
 Computer >> コンピューター >  >> システム >> Android

iOS と Android でクロスオリジン通信ブリッジを構築する方法

私は職場で特定のプロジェクトに取り組んでいました。このプロジェクトでは、メッセージを介していくつかのさまざまなコンポーネントを接続する必要がありました。それぞれに独自のロジックとコード言語がありました。これにより、さまざまなプラットフォームがコミュニケーションを可能にするすべての方法を理解したいと思いました.

この記事の目的は、これらのクロスオリジン通信ブリッジについて説明し、それらを実現するためのシンプルでありながら有益な例を提示することです.

ブリッジの駄洒落もたくさんあります?

警告されました。

コードに手を加えたいだけなら、この記事の最後に GitHub リポジトリへのリンクがあります。

通常、作成した JavaScript はブラウザ内で実行されます。 iOS の場合 、 UIWebView または WKWebView のいずれかです。 Android の場合 、WebView.

iOS はプラットフォームの中でより苛立たしいものになる可能性があるため、最初に iOS のコミュニケーション ブリッジについて説明します。

ロンドン橋が落ちています (iOS)

iOS 8 以降、Apple は UIWebView の代わりに WKWebView を使用することを推奨しているため、以下は WKWebView のブリッジのみを扱います。 .

UIWebView のリファレンスについては、こちらをご覧ください。

WKWebView から JavaScript にメッセージを送信するには、次のメソッドを使用します:


- (void)evaluateJavaScript:(NSString *)javaScriptString 
         completionHandler:(void (^)(id, NSError *error))completionHandler;

WKWebView 内で JavaScript からメッセージを受信するには、次の手順を実行する必要があります:

<オール>
  • WKWebViewConfiguration のインスタンスを作成する
  • WKUserContentController のインスタンスを作成する
  • スクリプト メッセージ ハンドラーを構成に追加します (この部分でギャップが埋められます)。この操作により、次のパスの下のウィンドウ オブジェクトにメッセージ ハンドラーも登録されます:window.webkit.messageHandlers.MSG_HANDLER_NAME
  • ファイルの先頭に を追加して、クラスにメッセージ ハンドラー プロトコルを実装させます
  • userContentController:didReceiveScriptMessage を実装します (このメソッドは JavaScript からのメッセージの受信を処理します)

    • 橋を架ける

    次の HTML ページが設定されているとします:

    <html>
  
  <head>
    <title>Javascript-iOS Communication</title>
  </head>
  
  <body>
    
    <script>
      window.webkit.messageHandlers.myOwnJSHandler.postMessage("Hello World!");
    </script>
  </body>
  
  
</html>

    そして、ネイティブ コードで上記の手順を実装します。

    #import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>

// 4
@interface ViewController : UIViewController <WKScriptMessageHandler>

@property(nonatomic, strong) WKWebView *webview;

    そしてビオラ！これで完全な JavaScript - iOS 通信が完成しました!

    iOS と Android でクロスオリジン通信ブリッジを構築する方法
    Unsplash の Todd Diemer による写真

    橋を渡る (Android)

    ここでは、物事ははるかにシンプルでフレンドリーです。コミュニケーション ブリッジをセットアップするには、いくつかの手順を実行するだけです:

    <オール>
  • WebView オブジェクトのインスタンスを作成する
  • この WebView 内で JavaScript を有効にします (setJavaScriptEnabled )
  • 独自の JavaScript インターフェースを設定します (JavaScript に表示されるメソッドを保持します)
  • JavaScript に公開するメソッドには、@JavascriptInterface が必要です。 注釈 宣言前

    • 前と同様に、この HTML ファイルを作成したと仮定しましょう:

    そして、次の簡単な Android アプリケーションを作成しました:

    これで、あなたはネイティブ コミュニケーション ニンジャになりました!

    リポジトリへのリンクは次のとおりです:

    AndroidtoJS リポジトリiOStoJS リポジトリ

    ⚠️ iOS に関する重要な注意事項 ⚠️

    WKWebView を破棄したいところまで来たら、 必須 スクリプト メッセージ ハンドラを削除します。そうしないと、スクリプト メッセージ ハンドラーが引き続き WKWebView への参照を保持し、新しい WKWebView の作成時にメモリ リークが発生します。


    1. Google マップの音声を変更する方法 (Android および iOS)

      「風と波は常に有能なナビゲーターの味方です 」 ~ エドワード・ギボン その通りですね。適切なナビゲーションがないと、少し道に迷ってしまうのではないでしょうか?どの旅をするにしても、目的地に到達するのに役立つ効果的なナビゲーション プランが必要です。友人と車で旅行するときも、毎日の通勤状況を追跡して渋滞をしのぐときも、ナビゲーション アプリは私たちの生活の中で重要な役割を果たしています。マイルストーンごとに住所を確認するために立ち寄ったり、慣れない道で迷子になったりする時代は終わりました。確かに、テクノロジーは長い道のりを歩んできました。 同意するかどうかは別として、ナビゲーション アプ

    2. Android および iOS で Gmail ダーク モードを有効にする方法

      ダークモードは最近議論されており、多くのダークモードアプリが個別に展開されています.これに続いて、最新の Android オペレーティング システム Android Q と Apple の iOS 13 がダーク モード テーマの採用を開始しました。 オペレーティング システム全体にダーク モードを適用することは可能ですが、手動で行う必要がある Gmail と一緒に多くのアプリがあります。 Gmail のダーク モードは、新しいオペレーティング システムのリリース以来、iOS と Android の両方のユーザーが待ち望んでいた設定です。最近、Google は Android 10 でダーク