【Swift】WKWebViewでJavaScriptのコールバックを受けつける（WKUserContentControllerの使い方）

下記ブログの転載です！
https://rc-code.info/ios/post-194/

iOSにて、WKWebView でJavaScriptのコールバックを受けつける必要があったので備忘録。
今回は WKUserContentController を利用した方法を紹介します。
 

WKWebView の使い方

まずは WKWebView の基本的な使い方ですが、こちらを参考にしていただければと思います。
 

WKUserContentController の使い方

WKUserContentControllerはJavaScriptからのコールバック受信や、スクリプトをWebビューに挿入する方法を提供します。
下記が導入のサンプルコードです。

import UIKit
import WebKit

class ViewController: UIViewController {
    
	var webView: WKWebView!
    
	override func loadView() {
        
		// ① WKUserContentController の生成
		let userContentController = WKUserContentController()
		// ② WKUserContentController にコールバックハンドラを登録
		userContentController.add(self, name: "jsCallbackHandler")
		
		let webConfiguration = WKWebViewConfiguration()
		// ③ WKWebViewConfiguration に生成した WKUserContentController を登録する
		webConfiguration.userContentController = userContentController
		
		webView = WKWebView(frame: .zero, configuration: webConfiguration)
		view = webView
	}
}

// ④ WKScriptMessageHandler　のデリゲートを記載
extension ViewController: WKScriptMessageHandler {
    
	// ⑤ JavaScript から呼び出されるコールバックハンドラ関数を記載
	func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
		switch message.name {
			case "jsCallbackHandler":
				print("Javascript message arrived: jsCallbackHandler")
			default:
				return
		}
	}
}

1 WKUserContentController の生成

WKUserContentControllerはWKWebViewConfigurationに格納する必要があるので、まずはインスタンスを生成します。
 

2 WKUserContentController にコールバックハンドラを登録

WKUserContentControllerのadd関数を用いて、JavaScriptから実行したい関数を持つクラスインスタンス(WKScriptMessageHandlerプロトコルに準拠したクラス)を第一引数に設定し、コールバックの判別に利用するためのStringをname引数に設定します。
このadd関数は何度も実行できるので、複数のコールバックを処理したい場合はname引数を変更して実行すれば、後述するコールバック関数内で判定することができます。
 

3 WKWebViewConfiguration に生成した WKUserContentController を登録する

生成したWKUserContentControllerインスタンスは、WKWebViewConfigurationのuserContentControllerプロパティに格納します。
 

4 WKScriptMessageHandler　のデリゲートを記載

上記ViewControllerはデリゲート先としてWKUserContentControllerに渡され登録されているので、WKScriptMessageHandlerプロトコルに準拠させる必要があります。
 

5 JavaScript から呼び出されるコールバックハンドラ関数を記載

WKScriptMessageHandlerプロトコルに準拠させるために、userContentController関数を実装します。この関数を実装する事で、Javascriptからのコールバックを受け付けることができるようになります。

JSからは下記のように、②の箇所のadd関数にてname引数に指定したコールバックを実行します。

	webkit.messageHandlers.jsCallbackHandler.postMessage("Message from Javascript");

コールバックハンドラ内ではmessage.nameプロパティでコールバック名を取得することができるので、サンプルコードのようにswitch文等で判定する事で、処理を分岐させる事ができます。
 

検証Playground

検証Playground Git
 

検証環境

Mac: 10.13.6
XCode: 10.1
Swift: 4.2.1
 

参考ドキュメント

公式 WKWebView ドキュメント
公式 WKWebViewConfiguration ドキュメント
公式 WKUserContentController ドキュメント