How to create a iOS Webview App (HTML5) with Xcode?

Viewed 1610

I'm trying to load local html5 files to Xcode to create an ios App. I tried using a template and it uses both local and web based paths to create a very nice ios app in Xcode.

I need to learn about how to create a a webview app that has normal features and can load my local html5 webapps into Xcode for compiling an ios app.

I tried the following code, and it works alright when loading a url based html5 page.

import UIKit import WebKit class ViewController: UIViewController, WKUIDelegate {

https://developer.apple.com/documentation/webkit/wkwebview

   var webView: WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myURL = URL(string:"https://www.apple.com")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }}

I need to change the URL to local file path. The above code page from apple documentation suggests that I use load(_: ) to load local html files. I'm not sure how to use this function. So, I tried code samples from alternate sources, and here's some part of the code I'm trying with for the Webview app.

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {
    @IBOutlet var webView: WKWebView!
    
    //var webView: WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        
        guard let fileUrl = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "www-WebsiteContent") else { return; }
        //let urlPath = Bundle.main.url(forResource: "input", withExtension: "txt")
            if fileUrl != "" {
            
            let url = URL(fileURLWithPath: fileUrl)

        //let url = init(_: fileURLWithPath, path: "www-WebsiteContent/index.html")
        webView.loadFileURL(url, allowingReadAccessTo : url)
        let request = URLRequest(url: url)
        webView.load(request)
            }
        //let myURL = URL(string:"file:///www-WebsiteContent/index.html")
        //let myRequest = URLRequest(url: myURL!)
        //webView.load(myRequest)
        //webView.loadFileURL(URL: , webView.allowingReadAccessTo readAccessURL: URL)
    }}

I'm using latest Xcode version on Macbook Air with latest Swift 5 version. There's a main storyboard with the webview object, and a viewcontroller.swift file. The error is that when I run the project, it doesn't display the index.html file in the www-WebsiteContent folder. Maybe I wasn't able to connect the webview overlay to the viewcontroller.swift file properly.

Things I need to understand:

  • Can I run the above code and compile it as a complete ios app? Or would I need to edit AppDelegate or SceneDelegate files too? I've only edited the viewcontroller.swift file as a new project.
  • How can I resize the webview overlay to automatic width and height of the ios device? I have an html5 webapp files that I need to convert to an ios app. How can I create this webview so that it fits all the device types screen sizes? My html5 app fits perfectly when viewed in the device browser.
0 Answers
Related