Search code examples
swiftuikitwkwebviewsfsafariviewcontroller

How do I make WKWebView full screen like the SFSafariViewController?


I have a TableView that contains a list of web urls. I'd like to open a browser that navigates to the url that is selected, but with some custom functionality. When I use the SFSafariViewController, I get the full-screen browser. However, when I use the WKWebViewController, I get the modal that you swipe down to dismiss.

How to I get the WKWebView to appear full-screen, instead of like the modal?

Using SFSafariViewController:

class ShoppingViewController: UITableViewController {

    ...

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        showRetailerHome(indexPath: indexPath)
    }

    func showHome(indexPath: IndexPath){

        ...

        if let url = URL(string: urlString){
            let config = SFSafariViewController.Configuration()
            let vc = SFSafariViewController(url: url, configuration: config)
            present(vc, animated: true)
        }        
    }

The result:

enter image description here

Using WKWebViewController:

class ShoppingViewController: UITableViewController {

    ...

    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        showRetailerHome(indexPath: indexPath)
    }

    func showHome(indexPath: IndexPath){

        let customWebController = WKBrowserController()
        present(customWebController, animated: true)

    }

The WKBrowserController:

class WKBrowserController: UIViewController, WKNavigationDelegate {

    var webView: WKWebView!

    override func loadView() {
        webView = WKWebView()
        webView.navigationDelegate = self
        self.view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        let url = URL(string: "https://www.amazon.com")!
        webView.load(URLRequest(url: url))
        webView.allowsBackForwardNavigationGestures = true
    }
}

The result:

enter image description here


Solution

  • When you present a viewcontroller with full screen. You can set it .fullscreen

    Try :

    let customWebController = WKBrowserController()
    customWebController.modalPresentationStyle = .fullScreen
    present(customWebController, animated: true)