To deploy an iOS app, you need to have at least one native feature to be included in the app. We used a barcode scanner to search for items. You can add notifications management or anything else, but you have to add it as native code.
To deploy an iOS application you must have a macOS-powered device.
To display your site in iOS App, you first need to make sure it is deployed online. Then, you can use WebView to display the site inside of an iOS native app. To integrate native feature to the site, we suggest using the following approach:
Create a Swift View Controller
Display WebView inside of this controller
Create a JavaScript file that would be injected into the app
Use WebKit message handlers API to establish communication between WebView and native app
Creating an app (step-by-step)
1. Create a new XCode project
2. Select single view template
3. Go to ViewController.swift
4. Replace its content with the script bellow
import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate, WKScriptMessageHandler {
/// Assuming that the javascript sends message back, this function handles the message
///
/// - Parameters:
/// - userContentController: controller
/// - message: Message. Can be a String or [String:Any] to a single level.
func userContentController(
_ userContentController: WKUserContentController,
didReceive message: WKScriptMessage
) {
print("something recived");
let messageBody = message.body as! [String: Any];
let action = messageBody["action"] as! String;
switch action {
case "barcodeClick":
print("barcode was clicked");
return;
default:
return;
}
}
lazy var webView: WKWebView = {
let webCfg:WKWebViewConfiguration = WKWebViewConfiguration()
// Setup WKUserContentController instance for injecting user script
var userController:WKUserContentController = WKUserContentController()
var script:String?
// Get the contents of the file `inject.js`
if let filePath:String = Bundle.main.path(forResource: "inject", ofType:"js") {
script = try! String(contentsOfFile: filePath, encoding: .utf8)
}
let userScript:WKUserScript = WKUserScript(source: script!, injectionTime: WKUserScriptInjectionTime.atDocumentStart, forMainFrameOnly: false)
userController.addUserScript(userScript)
// Add a script message handler for receiving "nativeProcess" event notifications posted from the JS document using window.webkit.messageHandlers.nativeProcess.postMessage script message
userController.add(self, name: "nativeProcess")
// Configure the WKWebViewConfiguration instance with the WKUserContentController
webCfg.userContentController = userController;
let webView = WKWebView(
frame: CGRect(
x: 0,
y: 0,
width: self.view.frame.width,
height: self.view.frame.height
),
configuration: webCfg
)
return webView
}();
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.navigationItem.title = "ScandiPWA"
self.view.addSubview(webView)
let urlToLoad = URL(string: "https://tech-demo.scandipwa.com")
// Do any additional setup after loading the view.
webView.load(URLRequest(url: urlToLoad!))
}
}
As you can see injecting scripts into WebView is not that hard. When clicking on the barcode icon, the XCode console logs the barcode was clicked message. You can replace this logic with anything that matches your needs.
We will publish the full app code (including the barcode implementation) soon, so you can use it as a reference.
When the app is done, it's time to publish it!
Publishing the app
To publish an iOS app, you must be signed up for the Apple Developer Program. You can do this on the official site, here.
The process of review might take up to 10 days and result in refusal. ScandiPWA does not guarantee your app publishing. Please make sure the app you build complies with AppStore guidelines.
