RxWebKitを使ってWKWebViewのローディング処理（プログレスバー更新等）をイイ感じにする

概要

• RxWebKit というライブラリを使って、WKWebViewのローディング処理のUI更新周りをイイ感じに書く方法を紹介
• RxSwiftを使ってWKWebViewのローディング処理をイイ感じにするの記事の続き

イメージ

リポジトリ

• 公式
  • https://github.com/RxSwiftCommunity/RxWebKit
• サンプル
  • https://github.com/ryo-takahashi/WKWebViewRxSwiftLoadingExample

環境

• Xcode 9.4
• Swift 4.1
• RxSwift 4.2
• RxCocoa 4.2
• RxOptional 3.5.0

環境構築

Podfile

  pod 'RxSwift'
  pod 'RxCocoa'
  pod 'RxOptional'
  pod 'RxWebKit'

画面

• 画面構成
  • WKWebView
  • Progress View

コード

import UIKit
import WebKit
import RxSwift
import RxCocoa
import RxOptional
import RxWebKit

class RxWebkitViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!
    @IBOutlet weak var progressView: UIProgressView!
    
    private let disposeBag = DisposeBag()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
    }
    
    private func setupWebView() {
        
        // プログレスバーの表示制御、ゲージ制御、アクティビティインジケータ表示制御で使うため、一旦オブザーバを定義
        let loadingObservable = webView.rx.loading
            .share()
        
        // プログレスバーの表示・非表示
        loadingObservable
            .map { return !$0 }
            .observeOn(MainScheduler.instance)
            .bind(to: progressView.rx.isHidden)
            .disposed(by: disposeBag)
        
        // iPhoneの上部の時計のところのバーの（名称不明）アクティビティインジケータ表示制御
        loadingObservable
            .bind(to: UIApplication.shared.rx.isNetworkActivityIndicatorVisible)
            .disposed(by: disposeBag)
        
        // NavigationControllerのタイトル表示
        webView.rx.title
            .filterNil()
            .observeOn(MainScheduler.instance)
            .bind(to: navigationItem.rx.title)
            .disposed(by: disposeBag)
        
        // プログレスバーのゲージ制御
        webView.rx.estimatedProgress
            .map { return Float($0) }
            .observeOn(MainScheduler.instance)
            .bind(to: progressView.rx.progress)
            .disposed(by: disposeBag)
        
        
        let url = URL(string: "https://www.google.com/")
        let urlRequest = URLRequest(url: url!)
        webView.load(urlRequest)
    }
}

• 良い
  • 完全にタイポの可能性がなくなった
    • コンパイルエラーで発見できる
  • 直感的に書ける、わかる
    • webView.rx.title のところ、navigationItemのtitleにbindしてるんだなーというのがすぐわかる

まとめ

• RxWebKit を使うことでわかりやすくUIの処理ができるようになった

Notes

• 今回は紹介していませんが、RxWebKit には canGoBack canGoForward などもっと色々なパラメータがあります
• 詳しくは https://github.com/RxSwiftCommunity/RxWebKit