fk-webview-sdk

SDK to allow external parties to start developing content within webviews at Flipkart

Usage no npm install needed!

<script type="module">
  import fkWebviewSdk from 'https://cdn.skypack.dev/fk-webview-sdk';
</script>

README

Flipkart Webview SDK

Playground sample repo https://github.fkinternal.com/Flipkart/GamesContainer/

npm version License

Docs

Docs

Installation

  • Install fk-webview-sdk into your npm project. You can use the following command and run it in your terminal at the project root.
npm install fk-webview-sdk
  • Minified and GZipped script
https://img1a.flixcart.com/linchpin-web/batman-returns/build/fk-webview-sdk-min@0.0.1-alpha.66.js

You could replace version numbers in the script tag with the latest npm version if the README isn't up to date.

Initialize using NPM

// NPM only : import will make sure we create FKExtension on the window object to give clients a way to create new platform instance and access modules
import * as WebviewSDK from  "fk-webview-sdk";
// NOTE - please refrain from calling any module before the DOMContentLoaded callback
window.addEventListener('DOMContentLoaded', function() {
    const fkPlatform = FKExtension.newPlatformInstance();
    fkPlatform.getModuleHelper().getAnalyticsModule().sendGameAnalyticsEvent({
            gameName: 'bestGame'
            campaignId?: 'abc-zyx';
            energyPoints?: 300;
            league?: 'gold';
            badgesCount?: 2;
            friendCount?: 150;
            position?: 4;
            transactions?: ['power', 'time'];
            rewards?: ['first', 'second'];
            powers?: ['strength'];
            deathCount?: 3;
            livesLeft?: 2;
            actionType: GameActionType.SHARE;
        }
    ).then((data) => {
        // Do something based on data
    });
});

Usage

fk-webview-sdk is a set of modules that help client use Flipkart functionalities for easy webview development within the Flipkart ecosystem. All modules are promisified.

goBack()

This pops current app controller and takes one step back in the app navigation stack.

navigate(action)

This pushes a new route and navigates forward in the app navigation stack to a page based on action which is sent by server.

@deprecated
sendGameAnalyticsEvent(gameEventData)

This method is now deprecated. This was used to send analytics data to the app which will convert it into app specific requirements. Check GameEventData interface.

/**
* @param eventName mandatory
* @param analyticsData key value pair to be sent for tracking.
*/
sendAnalyticsEvent: (eventName: string, analyticsData: Record<string, string>) => Promise<NativeModuleResponse<string>>;

This is used to send analytics data to the app. The app will read the ey value pairs as it is and sent against the eventName specified.

getTimeDiff(newResponse: boolean = false)

This is used to get the difference(timeDiff, in milliseconds) between the system clock and the server clock. If the newResponse === true the object will be returned upon successfull promise resolve. Ex- {"latency":149,"timeDiff":-101,"localTime":1584435205237}. If the newResponse === false, only timeDiff integer value as string will be returned. Returns a promise that when resolved gets a string that can be parsed into an integer.

  • ShareModule - fkPlatform.getModuleHelper().getShareModule()
share(url, title)

This is helpful to trigger native Share APIs.

resolveImage(url, width, height, quality)

This is helpful to resolve image URLs that is filled with placeholders for width, height and quality when received from server.

setStatusBarColor(color)

This is used to change the status bar of the app to a certain color.

disableFlyout()

This is used to disable showing a flyout that overlays when swiped from left. Since flyouts are only present in Android apps, this comes into effect only in Android apps.

enableFlyout()

Just like disableFlyout, this is used to enable flyout overlay to come when swiped from left.

showToast(message, duration)

Used to show messages in the form of toast. Applicable for both Android and iOS.

getPlatformInfo()

Used to fetch the platform info. It can either be android or ios or web.

getNetworkEffectiveType()

This is used to get an effective network type - 2G, 3G, WiFi on the device. Useful to limit slow network connection devices. We are using @react-native-community/netinfo to power this. For possible values check here.

getNetworkConnectivity()

This is used to check if the user is connected to internet or not. Returns true/false.

  • LoggingModule - fkPlatform.getModuleHelper().getLoggingModule()
sendLogs(eventData, level, showFkError)

This is helpful to log data into apps logging framework. Levels are helpful to indicate the severity of the log. showFkError will show the Fk error screen when the log level is ERROR.

fetch(input: RequestInfo, init?: RequestInit): Promise<FetchResponse>;
export interface FetchResponse {
    readonly headers: string[][];
    readonly ok: boolean;
    readonly status: number;
    readonly statusText: string;
    readonly type: ResponseType_;
    readonly url: string;
    readonly redirected: boolean;
    readonly json: object;
}

This is a proxy fetch api via the sdk for network calls to fk network.

In case of any error in Promise resolution the SDK method throws an NativeModuleError object. All the usages should consider adding catch blocks to ensure unhandled Promise rejections.

Note: This is available from version 0.0.2. Earlier versions used to swallow the error.
export interface NativeModuleError {
    requestId: string;
    message: string;
    code: number;
}

This is a remote logger helpful for logging data to server. This also internally logs uncaught errors if any.

It is required that FkRemoteLogger is initialised by calling init before accessing its functionalities.

FkRemoteLogger.init(fkPlatform) - FKPlatform as dependency is to be provided while initialising logger.

FkRemoteLogger also offers 3 apis for logging data to server,

 error(log: Log, errorContext?: Context): Promise<boolean>;

 warn(log: Log, errorContext?: Context): Promise<boolean>;

 info(log: Log, errorContext?: Context): Promise<boolean>;

export interface Log {
    message: string;
    stack?: string;
    file?: string;
    line?: number;
    col?: number;
}

- Log data that will be sent to server
export interface Context extends Record<string, any> {}

- Context is any extra contextual info that can be sent along with log data.

Ads Module

For details on Rewarded ads module check here.

For details on Interstitial ads module check here.