iOS 8 で登場した SKWebView は JavaScript の実行が速く、UIWebView に欲しかった機能がデフォルトで実装されていて非常に強力です。
iOS もバージョンが 9.X となり、SKWebView もそろそろ市民権を得ている頃なので、これからアプリに WebView を実装する場合は WKWebView でいいかもしれません。
今回はその SKWebView で表示している Web 側から、JavaScript で ネイティブへメッセージを送信する方法を説明したいと思います。
目次
- WKWebView の準備
- JavaScript から SKWebView へメッセージを送信する
- まとめ
WKWebView の準備
ViewController の WKWebView でメッセージを受信するための準備を行います。
ViewController.swift
まず最初に ViewController へ WebKitFramework をインポートします。
[code]
import UIKit
import WebKit
[/code]
次に ViewController へ WKWebView のデリゲート WKScriptMessageHandler と userContentController メソッドを追加し、 viewDidLoad で WKWebView を作成します。
[code]
import UIKit
import WebKit
class ViewController: UIViewController, WKScriptMessageHandler {
override func viewDidLoad() {
super.viewDidLoad()
let webView = WKWebView(frame: CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height), configuration: webConfig)
self.view.addSubview(webView)
}
func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
}
[/code]
これでネイティブ側の準備は完了です。
JavaScript から SKWebView へメッセージを送信する
ここからメッセージ送信の実装となりますが、JavaScript と Swift に分けて説明したいと思います。
JavaScript (Web側)
メッセージ送信を行うトリガーとなる Web側のイベントで 以下の JavaScript を実行します。
[code]
window.webkit.messageHandlers.callbackHandler.postMessage(‘Hello Native!’);
[/code]
Swift (ネイティブ側)
ViewController に準備しておいた userContentController に以下のような判定を入れれば、ハンドラ名やメッセージの内容で処理を切り替えることができます。
[code]
func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
if(message.name == “callbackHandler”) {
print(“JavaScript is sending a message : \(message.body)”)
}
}
[/code]
結果
WKWebView で Web サイトを開き 上記 window.webkit.messageHandlers イベントが実行される対象をタップすると、ログが出力されます。
[code]
Hello Native!
[/code]
まとめ
上記のように WKWebView を使用すれば、 Web からのメッセージ送信が簡単に行えましたが、他にも UIWebView に比べクラッシュ率が低下、JavaScript の処理が大幅に改善されているといったメリットがあります。
UIWebView の接続先は、他の通信関連 API で操作することが可能なため、セキュリティ的に問題があります。今後特に UIWebView でなければいけない理由がない限り WKWebView を使用することをお勧めします。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
