橋を架ける! AndroidとWebAppsの間のシームレスな統合
SimpleAndroidbridgeライブラリを使用して、AndroidとWebAppの間に堅牢なブリッジを簡単に構築します。このライブラリを使用すると、Android WebViewでWebアプリケーションをレンダリングし、JSINTERFACEを作成して、2つのプラットフォーム間のスムーズな通信を可能にします。複雑なオブジェクト、約束、コールバック機能を共有しますが、Webアプリケーションは応答性があり効率的なままです。
✓オブジェクトの共有-Android⇄web
✓約束を共有-Android⇄Web
✓コールバック関数-Android←Web
✓呼び出し関数Nonblocking -android⇄web
✓TypeScript -Android + Webで安全性を入力します
Android SDKの内蔵JavaScriptブリッジは、原始タイプのみをサポートしています。 SimpleAndroidbridgeを使用すると、AndroidとWebの間で複雑なオブジェクトを簡単に共有できます。 Androidネイティブ機能の引数または返品値としてタイプを定義するだけで、ライブラリはJavaScriptオブジェクトをKotlinオブジェクトに自動的に変換し、その逆も同様です。
// Kotlin
class AndroidNativeInterface ( val contactService : ContactService ): DefaultJSInterface( " Android " ) {
@NativeCall( CallType . FULL_SYNC )
fun searchContact ( contactFilter : ContactFilter ): List < Contact > {
return contactService.search(contactFilter)
}
}
data class ContactFilter ( val surname : String? = null , val firstname : String? = null )
data class Contact ( val surname : String? = null , val fistname : String? = null ,
val mail : String? = null , val phonenumber : String? = null ) // Javascript
console . log ( Bridge . interfaces . Android . searchContact ( { surname : "Pitt" } ) )Android SDKのJavaScriptブリッジは、ブロッキング方法で機能を実行し、ネイティブ機能が戻るまでWebアプリケーションをフリーズします。ただし、このライブラリを使用すると、Promise Return Typeを定義して、非ブロッキング実行を可能にします。 「doinbackground」関数を利用することにより、Androidコードはバックグラウンドスレッドで実行され、Webアプリケーションがブロックされないようにします。
// Kotlin
class AndroidNativeInterface ( val contactService : ContactService ): DefaultJSInterface( " Android " ) {
@NativeCall( CallType . FULL_PROMISE )
fun searchContact ( contactFilter : ContactFilter ) = doInBackground< List < Contact >> { promise ->
try {
promise.resolve(contactService.search(contactFilter))
} catch (e : Exception ) {
promise.reject(e)
}
}
}
data class ContactFilter ( val surname : String? = null , val firstname : String? = null )
data class Contact ( val surname : String? = null , val fistname : String? = null ,
val mail : String? = null , val phonenumber : String? = null ) // Javascript
Bridge . interfaces . Android . searchContact ( { surname : "Pitt" } ) . then ( ( list ) => {
console . log ( list ) ;
} ) ;JavaScriptに精通している場合は、コールバック機能に慣れていない可能性があります。 SimpleAndroidbridgeはこの概念をさらに一歩進め、これらのJavaScriptコールバック関数をAndroidレイヤーに直接注入することができ、それによりWebアプリケーションとAndroidの間にシームレスな相互作用を作成します。
// Kotlin
class AndroidNativeInterface ( val button : Button ): DefaultJSInterface( " Android " ) {
@NativeCall( CallType . FULL_SYNC )
fun registerOnClickAction ( jsFunction : JSFunction ) {
button.setOnClickListener { jsFunction() }
}
} // Javascript
Bridge . interfaces . Android . registerOnClickAction ( ( ) => {
console . log ( "Button Clicked!" )
} ) JavaScript関数に引数を渡すには、 JSFunctionWithArgタイプを使用します。これは、引数を受け入れるように特別に設計されています。
// Kotlin
class AndroidNativeInterface ( val button : Button ): DefaultJSInterface( " Android " ) {
var i = 0
@NativeCall( CallType . FULL_SYNC )
fun registerOnClickAction ( jsFunction : JSFunctionWithArg < Int >) {
button.setOnClickListener { jsFunction( ++ i) }
}
} // Javascript
Bridge . interfaces . Android . registerOnClickAction ( ( i ) => {
console . log ( "Button Clicked! " + i )
} )複数の引数を関数に渡すには、データクラスの作成を検討してください。
結果をAndroidレイヤーに返す必要がある関数の場合、引数のない関数にJSFunctionWithPromise使用して、または引数を受け入れる関数にはJSFunctionWithPromiseAndArg使用できます。
// Kotlin
class AndroidNativeInterface ( val button : Button ): DefaultJSInterface( " Android " ) {
@NativeCall( CallType . FULL_SYNC )
fun registerOnClickAction ( jsFunction : JSFunctionWithPromiseAndArg < Add , Int >) {
button.setOnClickListener {
val add = Add (( Math .random() * 10 ).toInt(), ( Math .random() * 10 ).toInt())
jsFunction(add)
.then{ Log .d( " AndroidNativeInterface " , " Web calculated: ${add.a} + ${add.b} = $it " ) }
. catch { Log .e( " AndroidNativeInterface " , " ERROR IN WEB LAYER: $it " ) }
}
}
data class Add ( a : Int , b : Int )
} // Javascript
Bridge . interfaces . Android . registerOnClickAction ( ( add ) => {
return new Promise ( ( resolve ) => { resolve ( add . a + add . b ) } )
} )注記
JSFunctionを解放し、そのバインディングをクリアするには、単にclose機能を呼び出すだけです。 JSFunction AutoCloseableインターフェイスを実装し、リソース付きまたはAutoCloseable.use {}ブロックを使用して、機能のライフサイクルを自動的に管理し、適切なクリーンアップを確保することができます。
function.use { it() }さらに、WebアプリケーションまたはWebViewがリロードをサポートしている場合は、BridgeにAfterInitializelistenerを追加することをお勧めします。このリスナーは、利用可能なJSFunctionsリリースするのに役立ち、初期化後にきれいな状態を確保します。
このライブラリは、ネイティブコードを呼び出す方法を決定できるさまざまなネイティブコールタイプをサポートしています。
CallType.FULL_SYNCコールタイプは、ネイティブコードをブロッキング方法で呼び出し、JavaScriptの実行により、ネイティブAndroid関数が戻るまで一時停止します。その結果、ネイティブの実行が完了するまで、Webビューは反応しません。 (長期にわたるタスクにはお勧めしません)
// Kotlin
@NativeCall( CallType . FULL_SYNC )
fun searchContact ( contactFilter : ContactFilter ): List < Contact > {
return contactService.search(contactFilter)
} // Javascript
console . log ( Bridge . interfaces . Android . searchContact ( { surname : "Pitt" } ) ) CallType.WEB_PROMISEコールタイプは、 FULL_SYNC呼び出しと同様に機能します。重要な違いは、JavaScriptコールが約束を返すことです。ただし、ネイティブAndroid機能はまだブロッキング方法で呼び出されます。 (タスクの期間が不確かであり、将来FULL_PROMISEに移行する必要がある場合が推奨)
// Kotlin
@NativeCall( CallType . WEB_PROMISE )
fun searchContact ( contactFilter : ContactFilter ): List < Contact > {
return contactService.search(contactFilter)
} // Javascript
Bridge . interfaces . Android . searchContact ( { surname : "Pitt" } ) . then ( ( list ) => {
console . log ( list ) ;
} ) ; CallType.FULL_PROMISEコールタイプを使用すると、バックグラウンドスレッドでネイティブAndroidコードを実行できるため、JavaScriptの実行が途切れないようになります。その結果、Webビューは応答性が高く、タスクを自由に実行できます。 (長期にわたるタスクに推奨)
// Kotlin
@NativeCall( CallType . FULL_PROMISE )
fun searchContact ( contactFilter : ContactFilter ) = doInBackground< List < Contact >> { promise ->
try {
promise.resolve(contactService.search(contactFilter))
} catch (e : Exception ) {
promise.reject(e)
}
} // Javascript
Bridge . interfaces . Android . searchContact ( { surname : "Pitt" } ) . then ( ( list ) => {
console . log ( list ) ;
} ) ; Maven Centralをリポジトリブロックに追加します。
repositories {
google()
mavenCentral()
}ライブラリを依存関係ブロックに追加します。
dependencies {
implementation ' com.github.andycandy-de:simple-android-bridge:1.1.1 '
} class AndroidNativeInterface : DefaultJSInterface ( " Android " ) {
@NativeCall( CallType . FULL_SYNC )
fun helloFullSync ( name : String ): String {
return " hello $name "
}
@NativeCall( CallType . WEB_PROMISE )
fun helloWebPromise ( name : String ): String {
return " hello $name "
}
@NativeCall( CallType . FULL_PROMISE )
fun helloFullPromise ( name : String ) = doInBackground< String > { promise ->
promise.resolve( " hello $name " )
}
} val bridge = Bridge (applicationContext, webView)
bridge.addJSInterface( AndroidNativeInterface ())Androidコード
// Bridge can be initialized by calling the 'init' function inside
// the 'onPageStarted' function of a WebViewClient
webView.webViewClient = object : WebViewClient () {
override fun onPageStarted ( view : WebView ? , url : String? , favicon : Bitmap ? ) {
bridge. init ()
}
}JavaScriptコード
// Bridge can be initialized by calling the 'init' function in
// Javascript. Register function to 'Bridge.afterInitialize' to
// start the webapp after the bridge is initialized.
function startApp ( f ) {
if ( Bridge . initialized ) {
f ( )
} else {
Bridge . afterInitialize = f
}
}
Bridge . init ( )
startApp ( ( ) => {
// Start your webapp
} ) ; console . log ( Bridge . interfaces . Android . helloFullSync ( "Web" ) ) MITライセンス
著作権(c)2020 Andycandy-de
著作権(c)2021 Andycandy-de
著作権(c)2024 Andycandy-de
このソフトウェアと関連するドキュメントファイル(「ソフトウェア」)のコピーを入手して、制限なしにソフトウェアを扱うために、このソフトウェアを制限する権利を含め、ソフトウェアのコピーをコピー、変更、公開、配布、販売する、ソフトウェアのコピーを許可する人を許可する人を許可することを含めて、許可が無料で許可されます。
上記の著作権通知とこの許可通知は、ソフトウェアのすべてのコピーまたはかなりの部分に含まれるものとします。
このソフトウェアは、商品性、特定の目的への適合性、および非侵害の保証を含むがこれらに限定されない、明示的または黙示的なものを保証することなく、「現状のまま」提供されます。いかなる場合でも、著者または著作権所有者は、契約、不法行為、またはその他の訴訟、ソフトウェア、またはソフトウェアの使用またはその他の取引に関連する、またはその他の契約、またはその他の請求、またはその他の責任について責任を負いません。