Tutorial Hype to Xcode WKWebView

The coding has been done by @MarkHunte

Download Xcode here
You can use Xcode to play around. If you want to publish your app, you will need a Apple developer account.

Prepare a Hype file. Export using the 'organized assets' script.

Install Xcode and start a new Project.

xcodeNewProject

Click.

Make sure iOS is selected in the top row. Usually 'App' is already selected. Click next.

Fill in your product name.
Organization Identifier: the Bundle ID of your new App.

If you don't have an account yet, do something like in the example.

Click next.

Decide where to save your project.

In the left bottom corner: Choose File...

appScreen 2

Name it WKWebView.

appScreen 4

Repeat and call the next Swift file 'fullScreen'

Now you will see this screen:

Paste this code into the ContentView:

import SwiftUI

extension UIDevice {
    static var isIPad: Bool {
        UIDevice.current.userInterfaceIdiom == .pad
    }
    
    static var isIPhone: Bool {
        UIDevice.current.userInterfaceIdiom == .phone
    }
}
struct ContentView: View {

    
    @State private var showWebView = false
    
    var body: some View {
      
        
        ZStack {
           
              WebView()
        
     
           
        
         .edgesIgnoringSafeArea(.all)
 
        
        
        
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
           
    }
}

}

Paste this into the fullScreen:

import UIKit
import WebKit


class FullScreenWKWebView: WKWebView {
    override var safeAreaInsets: UIEdgeInsets {
        return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    }
}

Paste this code into the WKWebView:

import SwiftUI
import WebKit
 
struct WebView: UIViewRepresentable {
 
   
    
    //-- declare a your html file  name to use later ( do not include the .html )
    let htmlName = "Test"
  
    
  
    func makeUIView(context: Context) -> WKWebView {
        let wconfiguration = WKWebViewConfiguration()
        let wcontroller = WKUserContentController()
        
        
        //-- attach controller, config to WKWebview
        wconfiguration.userContentController = wcontroller;
           
        wconfiguration.allowsInlineMediaPlayback = true
        wconfiguration.allowsAirPlayForMediaPlayback = true
        wconfiguration.mediaTypesRequiringUserActionForPlayback = []
        wconfiguration.setValue(true, forKey: "_allowUniversalAccessFromFileURLs")
        
        let  webView = WKWebView(frame: .zero, configuration: wconfiguration)
        
        
        return webView
    }
    
    //update van Mark om black screen te omzeilen
    func updateUIView(_ webView: WKWebView, context: Context) {
     
       
                    let  theFileName = (htmlName as NSString).lastPathComponent
                    guard let url =  Bundle.main.url(forResource: theFileName, withExtension: "html") else {
                  
                        let errorMessage = "HTML file not found: \(theFileName).html"
                            print(errorMessage)
                        
                      let htmlString = "<html><body><p style=\"color:red;text-align: center;padding-top:20%\"> SOMETHING WENT WRONG!<br> in updateUIView </p></body></html>"
                            
                            webView.loadHTMLString(htmlString as String, baseURL: nil)
                        
                    return
                }
              
            webView.loadFileURL(url, allowingReadAccessTo: url)
            let request = URLRequest(url: url)
       
                webView.load(request)
      
            webView.backgroundColor = UIColor.black //toegevoegd djon
            webView.scrollView.bounces = false
            webView.scrollView.isScrollEnabled = false
            webView.isOpaque = false
            webView.isHidden = false
            webView.scrollView.contentInsetAdjustmentBehavior = .never
            
        }
     
}


This will be the name of your exported Hype file. Just the name, no extension.

   let htmlName = "Test"

Now drag your Hype file into Xcode.

At this stage choose a device to test.

Now say a little prayer and click the 'run' button.

appScreen 9

If everything you did was right, you should now have your Hype file as an app.
Don't forget to test other devices too.

Good luck and have fun!

PS
For a Mac WKWebView have a look here

5 Likes