Swift: Web (JavaScript) から SKWebView へメッセージを送信する

iOS 8 で登場した SKWebView は JavaScript の実行が速く、UIWebView に欲しかった機能がデフォルトで実装されていて非常に強力です。
iOS もバージョンが 9.X となり、SKWebView もそろそろ市民権を得ている頃なので、これからアプリに WebView を実装する場合は WKWebView でいいかもしれません。

今回はその SKWebView で表示している Web 側から、JavaScript で ネイティブへメッセージを送信する方法を説明したいと思います。

目次

  • WKWebView の準備
  • JavaScript から SKWebView へメッセージを送信する
  • まとめ

WKWebView の準備

ViewController の WKWebView でメッセージを受信するための準備を行います。

ViewController.swift

まず最初に ViewController へ WebKitFramework をインポートします。

import UIKit
import WebKit

次に ViewController へ WKWebView のデリゲート WKScriptMessageHandler と userContentController メソッドを追加し、 viewDidLoad で WKWebView を作成します。

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) {

    }

これでネイティブ側の準備は完了です。

JavaScript から SKWebView へメッセージを送信する

ここからメッセージ送信の実装となりますが、JavaScript と Swift に分けて説明したいと思います。

JavaScript (Web側)

メッセージ送信を行うトリガーとなる Web側のイベントで 以下の JavaScript を実行します。

window.webkit.messageHandlers.callbackHandler.postMessage('Hello Native!');

Swift (ネイティブ側)

ViewController に準備しておいた userContentController に以下のような判定を入れれば、ハンドラ名やメッセージの内容で処理を切り替えることができます。

func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
        
        if(message.name == "callbackHandler") {
            print("JavaScript is sending a message : \(message.body)") 
        }
    }

結果

WKWebView で Web サイトを開き 上記 window.webkit.messageHandlers イベントが実行される対象をタップすると、ログが出力されます。

Hello Native!

まとめ

上記のように WKWebView を使用すれば、 Web からのメッセージ送信が簡単に行えましたが、他にも UIWebView に比べクラッシュ率が低下、JavaScript の処理が大幅に改善されているといったメリットがあります。

UIWebView の接続先は、他の通信関連 API で操作することが可能なため、セキュリティ的に問題があります。今後特に UIWebView でなければいけない理由がない限り WKWebView を使用することをお勧めします。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents