UIWebViewからWKWebViewへの移行

1 はじめに
2 ターゲットとなるUIWebViewで行なっていること
3 URLへのアクセス
4 ローカルHTMLの読み込み
5 ページを戻す、進める
6 ページの読み込み開始時や終了時に処理を行う(delegate)
7 JavaScriptの実行
8 Cookieの付与
9 さいごに
10 おすすめ書籍

はじめに

UIWebViewを使用してアプリのアップデートができる期限が2020年の12月までと正式に期限が通知されましたね。

ITMS-90809: Deprecated API Usage – App updates that use UIWebView will no longer be accepted as of December 2020. Instead, use WKWebView for improved security and reliability. Learn more (https://developer.apple.com/documentation/uikit/uiwebview).

After you’ve corrected the issues, you can upload a new binary to App Store Connect.

そこで、今回はUIWebViewからWKWebViewへの移行を行なっていきたいと思います。

ターゲットとなるUIWebViewで行なっていること

今回は以下の機能を実装しているUIWebVIewをターゲットにし、これらの機能をWKWebViewに移行していきます。

URLへのアクセス
ローカルHTMLの読み込み
ページを戻す、進める
ページの読み込み開始時や終了時に処理を行う(delegate)
JavaScriptの実行
Cookieの付与

URLへのアクセス

まずは基本中の基本、URLへのアクセスの方法から、UIWebViewの場合は loadRequest 関数を使用します。

 func load(url: URL) { let request = URLRequest(url: url) uiWebView.loadRequest(request) }

func load(url: URL) {

let request = URLRequest(url: url)

uiWebView.loadRequest(request)

}

これをWKWebViewに置き換えるとこうなります。

 func load(url: URL) { let request = URLRequest(url: url) wkWebView.load(request) }

func load(url: URL) {

let request = URLRequest(url: url)

wkWebView.load(request)

}

引数が URLRequest なのは変わらずで、 load 関数を使用します。

ローカルHTMLの読み込み

UIWebViewでローカルHTMLを読み込む場合は loadHTMLString 関数を使用します。

 uiWebView.loadHTMLString(html, baseURL: url)

1	uiWebView.loadHTMLString(html, baseURL: url)

WKWebViewでも変わらず loadHTMLString 関数を使用します。

 _ = wkWebView.loadHTMLString(html, baseURL: url)

1	_ = wkWebView.loadHTMLString(html, baseURL: url)

両者の違いとしてWKWebViewは戻り値として WKNavigation が返却されます。

ページを戻す、進める

UIWebViewでページを戻したり進めたりする場合は下記のように、履歴があるかの確認を行なってから goBack や goForward 関数を実行します。

 func goBack() { if (self.uiWebView.canGoBack) { self.uiWebView.goBack() } } func goForward() { if (self.uiWebView.canGoForward) { self.uiWebView.goForward() } }

func goBack() {

if (self.uiWebView.canGoBack) {

self.uiWebView.goBack()

}

func goForward() {

if (self.uiWebView.canGoForward) {

self.uiWebView.goForward()

}

この関数に関してはWKWebViewも全く同じ名前のメソッドを使用します。

 func goBack() { if (self.wkWebView.canGoBack) { self.wkWebView.goBack() } } func goForward() { if (self.wkWebView.canGoForward) { self.wkWebView.goForward() } }

func goBack() {

if (self.wkWebView.canGoBack) {

self.wkWebView.goBack()

}

func goForward() {

if (self.wkWebView.canGoForward) {

self.wkWebView.goForward()

}

ページの読み込み開始時や終了時に処理を行う(delegate)

ページの読み込み開始時や終了時に処理を行うには delegate を使用して処理を行います。UIWebViewは UIWebViewDelegate を使います。

 extension ViewController: UIWebViewDelegate { // ページの読み込み開始時に呼ばれる func webViewDidStartLoad(_ webView: UIWebView) { print("Start Loading Page") } // ページの読み込み完了時に呼ばれる func webViewDidFinishLoad(_ webView: UIWebView) { print("Finish Loading Page") } // 読み込みエラー発生時に呼ばれる func webView(_ webView: UIWebView, didFailLoadWithError error: Error) { print("Failed Loading Page: \(error)") } }

extension ViewController: UIWebViewDelegate {

// ページの読み込み開始時に呼ばれる

func webViewDidStartLoad(_ webView: UIWebView) {

print("Start Loading Page")

}

// ページの読み込み完了時に呼ばれる

func webViewDidFinishLoad(_ webView: UIWebView) {

print("Finish Loading Page")

}

// 読み込みエラー発生時に呼ばれる

func webView(_ webView: UIWebView, didFailLoadWithError error: Error) {

print("Failed Loading Page: \(error)")

}

WKWebViewの場合は、 WKNavigationDelegate を使います。

 extension ViewController: WKNavigationDelegate { // ページの読み込み開始時に呼ばれる func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) { print("Start Provisional Navigation") } // ページの内容受信開始時に呼ばれる func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) { print("Did Commit") } // ページの読み込み完了時に呼ばれる func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { print("Did Finish") } // ページの読み込みエラー発生時に呼ばれる func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) { print("Did Fail Provisional Navigation") } }

extension ViewController: WKNavigationDelegate {

// ページの読み込み開始時に呼ばれる

func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {

print("Start Provisional Navigation")

}

// ページの内容受信開始時に呼ばれる

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {

print("Did Commit")

}

// ページの読み込み完了時に呼ばれる

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

print("Did Finish")

}

// ページの読み込みエラー発生時に呼ばれる

func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {

print("Did Fail Provisional Navigation")

}

WKNavigationDelegate プロトコルの方が少し細かい単位になっていて、ページの読み込み処理を開始と内容受信が分かれています。例えば、接続出来ないURLが指定されたときに、 webView(_: didStartProvisionalNavigation:) メソッドは呼ばれますが、 webView(_: didCommit:) は呼ばれないという動作になります。

JavaScriptの実行

JavaScriptの実行方法も移行が必要です、UIWebViewは stringByEvaluatingJavaScript 関数を使用しています。

 let result = uiWebView.stringByEvaluatingJavaScript(from: script)

1	let result = uiWebView.stringByEvaluatingJavaScript(from: script)

それに対し、WKWebViewでは evaluateJavaScript 関数を使用します。

 wkWebView.evaluateJavaScript(script) { (result, error) in }

wkWebView.evaluateJavaScript(script) { (result, error) in

}

UIWebViewは同期処理になっていて、JavaScriptの実行が完了してからアプリに制御が戻ります。
WKWebViewの方は非同期処理になっていて、JavaScriptの実行が完了すると、指定したブロックが実行されます。

Cookieの付与

UIWebViewでは HTTPCookieStorage を参照しているので Cookie を設定したい場合は以下のようにします。

 let cookie = HTTPCookie(properties: [ .domain: "example.com", .path: "/", .name: "MyCookieName", .value: "MyCookieValue", .secure: "TRUE", .expires: Date() ])! HTTPCookieStorage.shared.setCookie(cookie)

let cookie = HTTPCookie(properties: [

.domain: "example.com",

.path: "/",

.name: "MyCookieName",

.value: "MyCookieValue",

.secure: "TRUE",

.expires: Date()

])!

HTTPCookieStorage.shared.setCookie(cookie)

WKWebViewの場合は以下のように設定します。

 let cookie = HTTPCookie(properties: [ .domain: "example.com", .path: "/", .name: "MyCookieName", .value: "MyCookieValue", .secure: "TRUE", .expires: Date() ])! wkWebView.configuration.websiteDataStore.httpCookieStore.setCookie(cookie)