How it Works?

When an enClose app launches, the SceneDelegate assigns the MainViewController to the application's main window and initializes the class. A full-screen web view is created at the device screen's dimensions, which then loads the index.html file from the www folder.

After the web view completes navigation to index.html, enClose injects several constants and style sheets into the environment.

Constants

Constant	Type	Description
__DEBUG_MODE__	Boolean	Indicates if the app is running in debug mode
__DEVICE_NAME__	String	The name of the device[1]
__DEVICE_MODEL__	String	The model of the device[1]
__DEVICE_SYSTEM_NAME__	String	The name of the operating system running on the device
__DEVICE_SYSTEM_VERSION__	String	The current version of the operating system

WARNING

[1] For privacy reasons, Apple does not provide the exact device name and model. Instead, you'll receive generic identifiers such as iPad or iPhone.

If an external display is connected, an additional boolean variable named __EXTERNAL_DISPLAY__ will also be injected.

Adding Environment Constants

You can modify the method below to inject additional environment constants or app secrets into the web view.

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

    // Secret message to be injected into the web view
    let secret = "SECRET"

    let javaScriptConstants = """
        const __DEBUG_MODE__ = \(MainViewController.debugMode);
        const __DEVICE_NAME__ = '\(UIDevice.current.name)';
        const __DEVICE_MODEL__ = '\(UIDevice.current.model)';
        const __DEVICE_SYSTEM_NAME__ = '\(UIDevice.current.systemName)';
        const __DEVICE_SYSTEM_VERSION__ = '\(UIDevice.current.systemVersion)';
        const __SECRET__ = '\(secret)';
        """
    evaluateJavascript(javaScript: javaScriptConstants)
    // Rest of the code
}

Style Sheets

After processing constants, enClose injects CSS that disables text selection in the web view, making web apps behave more like native applications. This behavior can be disabled, or you can create a CSS class in your web app to selectively enable text selection:

.selectable {
    user-select: auto !important;
}

External Display

When enClose detects an external display during runtime, the SceneDelegate automatically configures the external window with an instance of ExternalDisplayViewController. This controller initializes a full-screen web view, sized to the external display's dimensions, and loads display.html from the www directory.

Concurrently, the global boolean variable __EXTERNAL_DISPLAY__ is set to true.

External display support can be disabled by modifying the SceneDelegate, please view Handling Multiple Displays for more details.