BlueCompassっていうWebview用のPodsを公開したというのをメモする雑記

どうも、こがです。
noteの初公開記事なのにという内容という気がしないでもないですが、せっかくという感じで記事を書くことにしました。

BlueCompass is 何?

需要がニッチなのはわかっているけど、ネイティブ側とWKWebViewとでJavascriptを使ってやりとりするときに、ネイティブ側に渡されるデータの型が変容するのが面倒だなと思って、それを解決しようっていうライブラリになります。

Javascript側からは JSON.stringify( { data: "hogehoge" } ) みたいにstringifyしたデータをもらって、ネイティブ側で適切なCodableに落とすって流れですね。

Githubにもあげてますが、サンプルコードはこちら

// format for receive json.
class MessageEntity: Decodable {
 var message: String
}

class ExampleViewController: UIViewController {
 var disposeBag = DisposeBag()
 
 let blueCompass = BlueCompass()
 
 // create configuration and set BlueCompass to userContentController.
 lazy var configuration: WKWebViewConfiguration = {
   let config = WKWebViewConfiguration()
   config.userContentController = blueCompass
   
   return config
 }()
 
 override func viewWillAppear(_ animated: Bool) {
   super.viewWillAppear( animated )
   
   let webView = WKWebView( frame: view.frame, configuration: configuration )
   view.addSubview( webView )
   
   // "test" is custom specified name.
   // Json data is converted in internal.
   blueCompass.receive( "test", MessageEntity.self ).subscribe{
     print( $0.element!.message )
   }.disposed(by: disposeBag )
   
   // javascript sample.
   webView.evaluateJavaScript( "webkit.messageHandlers.test.postMessage( JSON.stringify( { message: \"hello world\" } ) )" )
 }
}

webView.evaluateJavaScriptにそのまま呼び出しを書いちゃってますが、メッセージハンドラ名に"test"を指定しています。
また、コードの最初に定義しているMesssageEntryクラスと合わせたJSONをpostMessageでネイティブ側へ送っています。
JSONから変換する型はreceive関数部分で指定しています。また、ライブラリ側でJSONから変換を行っていますので、受け取るときにはすでに指定したクラスになっています。

はい、ということで解説おわりっ!
Githubのリンクはこちら

かる〜〜い記事でした。

この記事が気に入ったらサポートをしてみませんか?