Swift・iOS

Swiftを中心に学んだことを記録に残すブログです。技術に関係ない記事もたまに書いています。

【Swift】WKWebViewで進む/戻る/更新(リロード)機能を実装する

■はじめに

スワイプで進む/戻る/更新(リロード)機能を実装してみたのでまとめます。

 

■開発環境

Xcode 9.4.1

・Swift 4.1.2

 

■進む/戻る機能の実装

インスタンスプロパティ「allowsBackForwardNavigationGestures」で、スワイプで進む/戻る機能を有効にできます。

// スワイプで進む、戻るを有効にする
webView.allowsBackForwardNavigationGestures = true

 

■更新(リロード)機能の実装

bouncesを有効にし、UIRefreshControlをインスタンス化。更新に関するメソッドのイベントを受け取るよう下記のように実装します。

self.webView.scrollView.bounces = true
let refreshControl = UIRefreshControl()
self.webView.scrollView.refreshControl = refreshControl
refreshControl.addTarget(self, action: #selector(ViewController.refreshWebView(sender:)), for: .valueChanged)

 

更新に関するメソッドは以下。

@objc func refreshWebView(sender: UIRefreshControl) {
        webView.reload()
        sender.endRefreshing()
}

 

■サンプル

import UIKit
import WebKit

class ViewController: UIViewController {
    
    var webView: WKWebView!
    
    // Viewを作成する
    override func loadView() {
        
        super.loadView()
        let viewConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: viewConfiguration)
        self.view = webView
        
        webView.uiDelegate = self
        webView.navigationDelegate = self
        
        // スワイプで戻る、進むを有効にする
        webView.allowsBackForwardNavigationGestures = true
        
        // リロードのイベントを受け取る
        self.webView.scrollView.bounces = true
        let refreshControl = UIRefreshControl()
        self.webView.scrollView.refreshControl = refreshControl
        refreshControl.addTarget(self, action: #selector(ViewController.refreshWebView(sender:)), for: .valueChanged)
    }
    
    // Webページを読み込む
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 表示するWebページのURLRequestを作る
        let myURL = URL(string: "{表示したいURL}")
        let myRequest = URLRequest(url: myURL!)
        
        // Webページを読み込む
        webView.load(myRequest)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    // ページをリロードするメソッド
    @objc func refreshWebView(sender: UIRefreshControl) {
        webView.reload()
        sender.endRefreshing()
    }
}

// target=”_blank”が設定されたリンク先を開けるようにする
extension ViewController: WKUIDelegate {
    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        if navigationAction.targetFrame == nil {
            webView.load(navigationAction.request)
        }
        return nil
    }
}

 

■おわりに

スワイプで更新する機能に関しては実装方法がいくつかネット上で紹介されていますが、うまくいかない方の参考になればと思います。 

 

■関連リンク

allowsBackForwardNavigationGestures - WKWebView | Apple Developer Documentation

bounces - UIScrollView | Apple Developer Documentation

UIRefreshControl - UIKit | Apple Developer Documentation

 ・[iOS 10] 全てのスクロールビューでRefresh Controlがサポートされました | Developers.IO