[iPhone] SFSafariView, WKWebView でWebブラウザを作る

iOSアプリからWebにアクセスしたいときは、SFSafariView, WKWebView, （UIWebView）などを使うと可能です。あるいはSafariに投げてしまうこともできます。
　

Swift 5.1
Xcode 11.3.1

WebView

　
Webページを表示する方法はいくつかあります。他のブラウザアプリ、Safariなどへ渡してしまったり、ある程度標準的なUIが付随しているSFSafariViewControllerを使うこともできます。またWKWebViewを使ってカスタマイズすることも可能です。
　
今まであったUIWebViewは推奨されていません。UIWebViewでは通信関連APIが操作される可能性があり、セキュリティ上好ましくないのと、クラッシュ率が高いという理由からWKWebViewあるいはSFSafariViewControllerを使う方がいいようです。
　

目次
1. UIApplication を使って Safari へ渡す
2. SFSafariViewControllerを使う
3. WKWebView クラスを使う
4. UIWebView

UIApplication を使って Safari へ渡す

　
Safari に代行してもらうという安易ですが安全かもしれない方法です。
アプリからちょっとWeb アクセスしたいだけなのに、「戻る」だの、「ダウンロード中」の表示だの考えなくていいので簡単です。
その辺を適当にやるとAppleの申請で Regect になる可能性があります。
　
UIApplicationクラスを使います

ViewController.swift

import UIKit

class ViewController: UIViewController , UIWebViewDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // URLを指定
        let url = URL(string: "https://i-app-tec.com/")!
        
        if #available(iOS 10.0, *) {
            UIApplication.shared.open(url, options: [:], completionHandler: nil)
        } else {
            UIApplication.shared.openURL(url)
        }
        
    }
}

import UIKit

class ViewController: UIViewController , UIWebViewDelegate {

override func viewDidLoad() {

super.viewDidLoad()

// URLを指定

let url = URL(string: "https://i-app-tec.com/")!

if #available(iOS 10.0, *) {

UIApplication.shared.open(url, options: [:], completionHandler: nil)

} else {

UIApplication.shared.openURL(url)

}

　
コードはこれだけです。
SafariでWebに移動する場合は自分のアプリから外れるのでパラメータの扱いは工夫が必要です。

SFSafariViewController を使う

　
iOS9(iOS8)からはSFSafariViewControllerを使うことができるようになりました。Safariに渡してしまうのではなく、あくまでアプリの一部のViewControllerとして扱えます。
　
また、ブラウザに必要なボタン等が標準で付いていてお手軽です。カスタマイズしたいのであれば、後出のWKWebViewを使います。
　
UIViewController.swift

import UIKit
import SafariServices

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func viewDidAppear(_ animated: Bool) {
        let webPage = "https://i-app-tec.com/"
        let safariVC = SFSafariViewController(url: NSURL(string: webPage)! as URL)
        present(safariVC, animated: true, completion: nil)
    }
}

import UIKit

import SafariServices

class ViewController: UIViewController {

override func viewDidLoad() {

super.viewDidLoad()

}

override func viewDidAppear(_ animated: Bool) {

let webPage = "https://i-app-tec.com/"

let safariVC = SFSafariViewController(url: NSURL(string: webPage)! as URL)

present(safariVC, animated: true, completion: nil)

}

WKWebView を使う

　
アプリの中にWebページを挿入するなどのカスタマイズをしたい場合に使います。

SafeArea:
何も考えずに今まで通りに画面いっぱいにしているとSafeAreaの問題がiPhone X系で起きます。この場合はステータスバーにWebの内容が被ってしまいます。
　

　
topPaddingを計算してSafeAreaの上部にUIWebViewが被らないようにします。下部はボタンを出すときは考慮する必要がありますが、そうでない場合はむしろ見せるというスタンスのようです（面倒ですが）とりあえずportraitの場合だけ考えてみます。（Landscapの場合は両サイドとホームインジケータに注意を払わないといけませんが）

UIViewController.swift

import UIKit
import WebKit

class ViewController: UIViewController {
    
    var webView: WKWebView!
    
    // adjust SafeArea top space
    // portrait のみを想定
    var topPadding:CGFloat = 0

    override func viewDidAppear(_ animated: Bool){
        print("viewDidAppear")

        let screenWidth:CGFloat = view.frame.size.width
        let screenHeight:CGFloat = view.frame.size.height
        
        // iPhone X , X以外は0となる
        if #available(iOS 11.0, *) {
            // 'keyWindow' was deprecated in iOS 13.0: Should not be used for applications
            let window = UIApplication.shared.windows.filter {$0.isKeyWindow}.first
            topPadding = window!.safeAreaInsets.top
        }

        // Webページの大きさを画面に合わせる
        let rect = CGRect(x: 0,
                          y: topPadding,
                          width: screenWidth,
                          height: screenHeight - topPadding)
        
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: rect, configuration: webConfiguration)

        let webUrl = URL(string: "https://i-app-tec.com/")!
        let myRequest = URLRequest(url: webUrl)
        webView.load(myRequest)

        // インスタンスをビューに追加する
        self.view.addSubview(webView)
    }
}

import UIKit

import WebKit

class ViewController: UIViewController {

var webView: WKWebView!

// adjust SafeArea top space

// portrait のみを想定

var topPadding:CGFloat = 0

override func viewDidAppear(_ animated: Bool){

print("viewDidAppear")

let screenWidth:CGFloat = view.frame.size.width

let screenHeight:CGFloat = view.frame.size.height

// iPhone X , X以外は0となる

if #available(iOS 11.0, *) {

// 'keyWindow' was deprecated in iOS 13.0: Should not be used for applications

let window = UIApplication.shared.windows.filter {$0.isKeyWindow}.first

topPadding = window!.safeAreaInsets.top

}

// Webページの大きさを画面に合わせる

let rect = CGRect(x: 0,

y: topPadding,

width: screenWidth,

height: screenHeight - topPadding)

let webConfiguration = WKWebViewConfiguration()

webView = WKWebView(frame: rect, configuration: webConfiguration)

let webUrl = URL(string: "https://i-app-tec.com/")!

let myRequest = URLRequest(url: webUrl)

webView.load(myRequest)

// インスタンスをビューに追加する

self.view.addSubview(webView)

}

　
カスタマイズなので「戻る」や「リロード」ボタンなどもそれぞれ作る必要があります。

Safari

WKWebView

UIWebView クラス

　
昔からあるものですがサポート終了です。iOS12以上ではWKWebViewを推奨しています。
　
ViewController.swift

import UIKit

class ViewController: UIViewController, UIWebViewDelegate  {
    
    let webView : UIWebView = UIWebView()
    
    // adjust SafeArea top space
    // portrait のみを想定
    var topPadding:CGFloat = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Delegate設定
        webView.delegate = self
        
    }
    
    // iPhone X のSafeArea調整のため
    override func viewDidAppear(_ animated: Bool){
        
        let screenWidth:CGFloat = view.frame.size.width
        let screenHeight:CGFloat = view.frame.size.height
        
        // iPhone X , X以外は0となる
        if #available(iOS 11.0, *) {
            let window = UIApplication.shared.keyWindow
            topPadding = window!.safeAreaInsets.top
        }
        
        // Webページの大きさを画面に合わせる
        let rect = CGRect(x: 0,
                          y: topPadding,
                          width: screenWidth,
                          height: screenHeight - topPadding)
        
        webView.frame = rect
        webView.scalesPageToFit = true
        
        // インスタンスをビューに追加する
        self.view.addSubview(webView)
        
        // URLを指定
        let url = URL(string: "https://i-app-tec.com/")!
        let request: URLRequest = URLRequest(url: url)
        
        // リクエストを投げる
        webView.loadRequest(request)

    }
    
    // ロード時にインジケータをまわす
    func webViewDidStartLoad(_ webView: UIWebView) {
        UIApplication.shared.isNetworkActivityIndicatorVisible = true
        print("indicator on")
    }
    
    // ロード完了でインジケータ非表示
    func webViewDidFinishLoad(_ webView: UIWebView) {
        UIApplication.shared.isNetworkActivityIndicatorVisible = false
        print("indicator off")
    }
}

import UIKit

class ViewController: UIViewController, UIWebViewDelegate {

let webView : UIWebView = UIWebView()

// adjust SafeArea top space

// portrait のみを想定

var topPadding:CGFloat = 0

override func viewDidLoad() {

super.viewDidLoad()

// Delegate設定

webView.delegate = self

}

// iPhone X のSafeArea調整のため

override func viewDidAppear(_ animated: Bool){

let screenWidth:CGFloat = view.frame.size.width

let screenHeight:CGFloat = view.frame.size.height

// iPhone X , X以外は0となる

if #available(iOS 11.0, *) {

let window = UIApplication.shared.keyWindow

topPadding = window!.safeAreaInsets.top

}

// Webページの大きさを画面に合わせる

let rect = CGRect(x: 0,

y: topPadding,

width: screenWidth,

height: screenHeight - topPadding)

webView.frame = rect

webView.scalesPageToFit = true

// インスタンスをビューに追加する

self.view.addSubview(webView)

// URLを指定

let url = URL(string: "https://i-app-tec.com/")!

let request: URLRequest = URLRequest(url: url)

// リクエストを投げる

webView.loadRequest(request)

}

// ロード時にインジケータをまわす

func webViewDidStartLoad(_ webView: UIWebView) {

UIApplication.shared.isNetworkActivityIndicatorVisible = true

print("indicator on")

}

// ロード完了でインジケータ非表示

func webViewDidFinishLoad(_ webView: UIWebView) {

UIApplication.shared.isNetworkActivityIndicatorVisible = false

print("indicator off")

}

References:
UIApplication – UIKit | Apple Developer Documentation
WKWebView – WebKit | Apple Developer Documentation
SFSafariViewController – SafariServices | Apple Developer Documentation
UIWebView – UIKit | Apple Developer Documentation