This HTML file contains the Incito web renderer, plus a number of JS functions for loading an incito, and accessing information about the DOM once the Incito has been rendered.
Whenever this html file changes, it must be published to https://incito-webview.shopgun.com/index-1.0.0.html.
If there are any breaking changes to this file, a duplicate of the document must be created with a different version number, and this must also be hosted on the CDN. We must continue to support the older versions for backwards compatibility.
JavaScript interface to receive events and data from javascript
public class JavaScriptInterface {
private Activity activity;
public JavaScriptInterface(Activity activity) {
this.activity = activity;
}
// Called on click event from JS.
// viewIds is an array with all the ids of the view found at the clicked point.
@JavascriptInterface
public void viewClicked(String[] viewIds) { }
// Called on scroll event from JS.
// progress * 100 will give you the percentage of scrolling (useful for a ProgressBar)
// scrollOffset is the window.pageYOffset
@JavascriptInterface
public void progress(float progress, float scrollOffset) { }
// Called when the rendering is done, so you can dismiss whatever loading view you have
@JavascriptInterface
public void initDone() { }
}
WebView setup
WebSettings webSettings = incitoWebView.getSettings();
// Enable Javascript
webSettings.setJavaScriptEnabled(true);
JavaScriptInterface jsInterface = new JavaScriptInterface(this);
webView.addJavascriptInterface(jsInterface, "androidJSInterface");
webView.setWebViewClient(new WebViewClient(){
public void onPageFinished(WebView view, String url){
// Initialize the html doc with the incito JSON string
incitoWebView.evaluateJavascript("javascript:init(" + incitoJSONString + ")", null);
}
});
// Load the content of the html doc from your asset folder or from an url
webView.loadUrl(htmlStr);
First, initialize your WKWebView to listen for the messages sent back from the .html file:
let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
// init JS interface
let contentController = WKUserContentController()
contentController.add(self, name: "incitoFinishedRendering")
config.userContentController = contentController
let webView = WKWebView(frame: .zero, configuration: config)
Note: You must conform to the
WKScriptMessageHandlerprotocol and implement theuserContentController(_:didReceive:)method in order to listen for the messages (such asincitoFinishedRendering).
Then, load the contents of the html doc into your webview:
webView.loadHTMLString(htmlStr, baseURL: nil)
After the HTML doc is loaded (see webView(_:didFinish:) delegate method), it must be initialized with the Incito's JSON string:
webView.evaluateJavaScript("window.init(\(incitoJSONString))") { (_, error) in
…
}
Once this succeeds, you will be able to call the various JS functions:
// Whatever code you wish to run on the html doc...
let jsCode = "absoluteBoundsOfElementWithId('\(elementId)')"
webView.evaluateJavaScript(jsCode) { (res, err) in
// `res` is the response of the js code.
…
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent