【Swift・Objective-C】WKWebViewでJavaScriptからの通知を受ける

JavaScriptによるNativeの操作

今回はWeb側からJavaScriptにより通知を受け、Nativeの操作をする方法をまとめていきます。

1: WKWebViewConfigurationをインスタンス化します

Swift

let webConfiguration = WKWebConfiguration()

Objective-C

WKWebViewConfiguration *webConfiguration = [[WKWebViewConfiguration alloc] init];

2: WKUserContentControllerをインスタンス化します

Swift

let userController = WKUserContentController()

Objective-C

WKUserContentController *userController = [[WKUserContentController alloc] init];

3: userControllerにJavaScriptが叩くhandler(どのメソッドを叩いているか判断するもの）を登録します。

Swift

userController.add(self, name: "startMusic")
userController.add(self, name: "stopMusic")
userController.add(self, name: "installMusic")
userController.add(self, name: "randamMusic")

Objective-C

[userContentController addScriptMessageHandler:self name:@"startMusic"];
[userContentController addScriptMessageHandler:self name:@"stopMusic"];
[userContentController addScriptMessageHandler:self name:@"installMusic"];
[userContentController addScriptMessageHandler:self name:@"randamMusic"];

4:　ViewControllerはデリゲート先としてWKUserContentControllerに渡され登録されているので、WKScriptMessageHandlerプロトコルに準拠させます。

Swift

extension ViewController: WKScriptMessageHandler {

Objective-C

@interface ViewController ()
<WKScriptMessageHandler>

5: configurationにuserControllerを登録します。

Swift

webConfiguration.userController = userController

Objective-C

webConfiguration.userController = userController;

6: webViewにconfigurationを登録します

Swift

let webView = WKWebView(frame: .zero, configuration: webConfiguration)

Objective-C

_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];

7: WKScriptMessageHandlerプロトコルの実装

JavaScript

window.webkit.messageHandlers.installMusic

Swift

import Foundation
import WebKit

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        switch message.name {
        case "startMusic":
            print("startRecordingが呼ばれる")
        case "stopMusic":
            print("toggleMicInputが呼ばれる")
        case "installMusic":
            print("youtubeStartが呼ばれる")
        case "randamMusic":
            print("ランダム再生します。")
        default:
            print("default")
        }
    }

Objective-C

@interface ViewController ()
<WKScriptMessageHandler>

@property (nonatomic, strong) WKWebView *webView;

@end 

@implementation ViewController

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
    switch (message.name) {
        case @"startMusic":
            NSLog("startRecordingが呼ばれる")
        case @"stopMusic":
            NSLog("toggleMicInputが呼ばれる")
        case @"installMusic":
            NSLog("youtubeStartが呼ばれる")
        case @"randamMusic":
            NSLog("ランダム再生します。")
        default:
            NSLog("default")
    }
}

@end

参考

https://qiita.com/mss634/items/170d3cb401eee4ec1253
https://qiita.com/ShingoFukuyama/items/54d839038794dd592145
https://www.sirochro.com/note/swift-swiftyjson-parse/
https://rc-code.info/ios/post-194/