When it comes to developing innovative app startup ideas, seamless integration between your whitelabel application and various services is crucial. One approach that can help you achieve this goal is by embedding webviews in your mobile application. This strategy offers numerous benefits over native solutions, allowing you to maintain a consistent presentation layer across different platforms.

One of the key advantages of using webviews is that they enable you to update content frequently without having to go through a lengthy process of releasing new mobile app versions. With this approach, all changes can be immediately implemented on your production environment, making it easier to manage and maintain your application.

However, seamless integration between your whitelabel application and services requires more than just embedding webviews. It also necessitates effective communication between the website embedded in the application and the native mobile app itself. This is where our recommended method of using JS events comes into play. This approach allows for easy implementation on the web application side, regardless of the technology used to create the website.

Events Supported by Default

Our whitelabel application supports several events that can be used to facilitate communication between your mobile and web applications. These events include:

  • open: Used when a part-screen webview is initialized or when the focus is detected on the webview.
  • close: Used at the end of a flow taking place via webview, such as when the "Finish" button is pressed.

Code Example for Web Application Side (React Framework)

Here's an example of how you can use these events in your React framework:

`jsx

import { Event } from '../types/Global';

function isIOS(): boolean {

return /iPad|iPhone|iPod/.test(navigator.platform);

}

function postToIOSHandler(event: Event, data: string | boolean): void {

window.webkit?.messageHandlers?.[event].postMessage(data);

}

function postToAndroidHandler(event: Event, data: string | boolean): void {

window.Android?.[event](data);

}

export function emitMobileEvent(event: Event, data: string | boolean): void {

if (isIOS()) {

postToIOSHandler(event, data);

return;

}

postToAndroidHandler(event, data);

}

`

In this code example, we use the Event type to define the events that can be used for communication. We also include logic to detect whether the user is using an iOS or Android device and emit the correct event accordingly.

Creating Compatible SDKs or Widgets

Our mobile architecture is designed to be modular and multilayered, making it easy to integrate new functionalities in the form of SDKs. You can either use a customer-provided SDK or have our development team create one for you. When creating an SDK, it's essential to meet certain requirements, such as:

  • Using a certificate obtained from the Verestro MDC SDK to authenticate to the client server.
  • Ensuring that the token is used by a person authorized to do so and that it is that person's token.

Android and iOS Requirements

Here are some specific requirements for creating an SDK for Android and iOS:

Android:

  • Preferred language: Kotlin
  • Exposed methods that take parameters should be wrapped in a model (if more parameters are added, compatibility will not be broken).
  • Naming methods: any, well described in documentation.
  • SDK delivery: endpoint to artifactory.
  • If the SDK communicates with a server, appropriate configuration and a separate endpoint to connect to the server should be provided.
  • JWT: issued token parameter in SDK configuration, passed in header.

IOS:

  • Preferred language: Swift
  • Exposed methods that take parameters should be wrapped in a model (if more parameters are added, compatibility will not be broken).
  • Naming methods: any, well described in documentation.
  • Providing SDK: endpoint to be used in SPM.
  • Minimum iOS version: 15