How can you create a fast and simple iOS Native Application with WebView Wrapper App, follow along and see.
I get asked many times each month about creating a wrapper app. You have a web site that you want to share as a mobile app, maybe it has some special value for the company and you want to have more than just a link to the app. With iOS you can create a “Wrapper App” that allows you to encapsulate the complete HTML, JavaScript and CSS into an App Bundle that can then be shared between users and possibly uploaded to the App Store. Keep in mind that Apple does have to review your application and approve it if you want it to be published on iTunes but that is another conversation.
You will need a Mac computer and Xcode installed, from there it is pretty simple. If you want to install the app onto a device or share with others then you will also need an Apple developer account, this will cost a bit of money, about $100 for the account yearly.
With Xcode, start it up and select “Create new Project”, create an App and target iOS. Give it a name like WrapMe and then set an Organization Identifier, this is normally something that is reverse domain based so maybe com.acme.
You should see that a bundle identifier is created for com.acme.WrapMe This will be needed in the Apple Developer consoles to create an app identifier, provisioning certificates and also to create an iTunes entry. itunes entry is used for Publishing to the App Store but also for Test Flight which can be use to share your app with others before being approved by Apple.
Uncheck the “Include Tests” and hit next
Select a place for the code to be created, I use “Desktop”.
Hit create and then a new folder is created for your project “WrapMe”, in my case in the desktop.
You get one view created for you called the “ContentView”, this is where the app is started and you will create a web view for your local files.
You can add your web app into a local directory, create a “www” folder and then copy your files, html, css and javascript, you will need an entry point that should be indec.html for this project.
Within the Javascript code you can create links to other sites, call phone numbers with the “tel://” url scheme and use some of the internal storage with localstorage so you can create an app with offline content as well.
With Xcode you can upload an App Icon and set a launch screen, you can change the app name at anytime in the project settings.
In your html you should set a few meta tags to turn off zooming and set it optimized for Webkit if you want, I normally do this.
Here is the EXACT code that I use for my wrapper apps. When you create a new Swift iOS app you get a ContentView.swift file and I make the following changes.
// ContentView.swift
// Created by Tom Jay on 5/8/22.import Foundation
import SwiftUI
import WebKitstruct ContentView: View {
var body: some View {
LocalWebview()
}
}struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}struct LocalWebview: UIViewRepresentable {
func makeUIView(context: Context) -> WKWebView {
let htmlUrl = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "www")
let baseHtmlUrl = Bundle.main.url(forResource: "www", withExtension: "")let wkWebview = WKWebView()
wkWebview.loadFileURL(htmlUrl!, allowingReadAccessTo: baseHtmlUrl!)
return wkWebview
}
func updateUIView(_ uiView: WKWebView, context: UIViewRepresentableContext<LocalWebview>) {
}
}
Good luck and enjoy creating your first wrapper app.
