Hybrid apps

Hybrid apps combine native elements and website content. For example, you can design an app to use native rendering for collection pages and a webview for checkout. To ensure Contextual Commerce tracks a continuous session, you must bridge these environments.

In a hybrid setup:

• The native app tracks product browsing but lacks cart data.

• The webview tracks checkout details but lacks the browsing history of the shopper.

To make Contextual Commerce effective, ensure both sources of information exist in the same session.

To bridge native elements and webview elements, do the following:

1. Dual-install the Contextual Commerce iOS SDK on native pages and the JS SDK on webview pages.

2. Call Granify.getCurrentState() to move state from the native app to the webview.

Transfer state to the webview

To allow the webview to continue a session started in the native environment, you must pass the current Contextual Commerce app state during the loading process. This is achieved by calling Granify.getCurrentState(), which returns a string containing a JavaScript script.

Note: Apply this script to the webview without modifications immediately after the first page displays. Re-apply this state each time a new page displays within the webview. 

For example (in a UIWebView implementing the UIWebViewDelegate protocol):

func webViewDidFinishLoad(_ webView: UIWebView) {    
    if ensurePageLoadsGranifySDK(webView.request?.url), let stateScript = try? Granify.getCurrentState() {
        webView.stringByEvaluatingJavaScript(from: stateScript)
    }
}

Another example (in a WKWebView implementing the WKNavigationDelegate protocol):

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {    
    if ensurePageLoadsGranifySDK(webView.request?.url), let stateScript = try? Granify.getCurrentState() {
        let script = WKUserScript(source: stateScript, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
        webView.configuration.userContentController.addUserScript(script)
    }
}

This re-fetches the state and re-applies it to the webview every time a new page loads in the webview. This ensures the state remains synchronized.

Note that the state only needs to be injected into pages that load the Contextual Commerce JavaScript SDK. If your app loads content from third-party vendors into your webview, add a check to prevent injecting the Contextual Commerce state into those pages. The script is safe on those pages, but it will unnecessarily consume resources. Some vendors experienced issues with UIWebView in the past.

The ensurePageLoadsGranifySDK() method in the preceding examples represents a method you should write to ensure that you only inject the Contextual Commerce State into a page that loads the Contextual Commerce SDK.

Caution: PayPal performs many redirects during loading and signing in. These redirects can cause issues with the UIWebView if you attempt to inject the Contextual Commerce state simultaneously. Apple recommends using the WKWebView .If you cannot use WKWebView , do not inject the Contextual Commerce state into PayPal pages. 

Loading order in the webview 

The script functions regardless of when it is injected, provided the page has started loading.

Ensure the page has started loading before injecting the script to prevent the new page from overwriting it. You can safely inject the script before or after the Contextual Commerce JS SDK loads. If you inject the script after the SDK, the SDK waits for the injection to complete.

Note: The JS SDK waits for the state to be injected. If the state is not injected, the JS SDK does not initialize and Granify does not work. Inject the state for every page loaded in the webview rather than only the first page. 

Passing state back to the app

You cannot currently pass state from the webview back to the app. This functionality is planned for a future release. Currently, state only passes from the app to the webview.

As a result, certain arrangements of native and webview components are unsupported. The shopper’s journey is a multi-step process:

• Browsing and choosing products

• Adding items to the cart

• Checking out and payment

Internal state passes information one way. For example, the cart stage requires information about shopper browsing behavior, but the browsing stage does not require checkout data.

The current implementation supports these configurations:

• All browsing is native, while the cart and checkout are in a webview.

• Browsing and the cart are native, while only the checkout is in a webview.

If your app uses webviews to render specific product types while rendering the cart natively, the current implementation is insufficient. Contact your Contextual Commerce account manager with your specific arrangement details to create a compatible solution.

Configure the Site ID

To ensure the JS SDK functions correctly, you must download the SDK using the iOS App Site ID rather than the standard website Site ID. Maintaining the iOS Site ID ensures that both components operate within the same session. No additional changes are required for this implementation.