WKWebView setup to make a web page adopt native behavior.

NativeWebView.swift

import WebKit

class NativeWebViewController: UIViewController {

    let viewportScriptString = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); meta.setAttribute('initial-scale', '1.0'); meta.setAttribute('maximum-scale', '1.0'); meta.setAttribute('minimum-scale', '1.0'); meta.setAttribute('user-scalable', 'no'); document.getElementsByTagName('head')[0].appendChild(meta);"
    let disableSelectionScriptString = "document.documentElement.style.webkitUserSelect='none';"
    let disableCalloutScriptString = "document.documentElement.style.webkitTouchCallout='none';"

    override func viewDidLoad() {
        // 1 - Make user scripts for injection
        let viewportScript = WKUserScript(source: viewportScriptString, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)
        let disableSelectionScript = WKUserScript(source: disableSelectionScriptString, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)
        let disableCalloutScript = WKUserScript(source: disableCalloutScriptString, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)

        // 2 - Initialize a user content controller
        // From docs: "provides a way for JavaScript to post messages and inject user scripts to a web view."
        let controller = WKUserContentController()

        // 3 - Add scripts
        controller.addUserScript(viewportScript)
        controller.addUserScript(disableSelectionScript)
        controller.addUserScript(disableCalloutScript)

        // 4 - Initialize a configuration and set controller
        let config = WKWebViewConfiguration()
        config.userContentController = controller

        // 5 - Initialize webview with configuration
        let nativeWebView = WKWebView(frame: CGRect.zero, configuration: config)

        // 6 - Webview options 
        nativeWebView.scrollView.scrollEnabled = true               // Make sure our view is interactable
        nativeWebView.scrollView.bounces = false                    // Things like this should be handled in web code
        nativeWebView.allowsBackForwardNavigationGestures = false   // Disable swiping to navigate
        nativeWebView.contentMode = .ScaleToFill                    // Scale the page to fill the web view

        // 7 - Set the scroll view delegate
        nativeWebView.scrollView.delegate = NativeWebViewScrollViewDelegate.shared
    }

}

class NativeWebViewScrollViewDelegate: NSObject, UIScrollViewDelegate {

    // MARK: - Shared delegate

    static var shared = NativeWebViewScrollViewDelegate()

    // MARK: - UIScrollViewDelegate

    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        return nil
    }

}

Hi Max,
Great article !! Worked like a charm. But there is just one concern which I have mentioned below.

ISSUE: If there are any text fields in the webView at the bottom of the page, the webView doesn't scroll up and make the text field visible as soon as it is focused. Instead the text field scrolls up and becomes visible only when we start typing something there.
Any help is highly appreciated.

Thank you.

Disable zooming will cause the text field scroll up being disabled ~

Hi Max,
Your nativewebviewswift really helpful to me. thanks dude.

I got the problem with this script. It’s not fitted properly in my webview

https://www.dropbox.com/s/hhapjy40neyg0kz/script.html?dl=0