【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 ドキュメント