evaluatify

In the bidirectional invocation scenario between JavaScript and WebView, the data exchanged between both parties through the native bridge is limited to serializable data. Many non-serializable data in the JS environment cannot be passed through the native bridge, causing limitations in the bidirectional invocation scenario between JavaScript and WebView.

evaluatify can store any object in the JavaScript environment in a temporary global variable and generate an executable script for native invocation.

evaluatifyCallback

JS generates an executable script based on the incoming callback.

import { evaluatifyCallback } from 'evaluatify';

// evaluatifyCallback takes any js callback,
// returns an executable script,
// passes this script to the native side through the native bridge, realizing callback serialization
const script = evaluatifyCallback(function callback() {
  // anything this callback does.
});

window._NATIVE_INTERFACE_.getInitialState(script);

After receiving the callback script, native can use evaluateJavascript to call it at the corresponding callback time.

webView.evaluateJavascript(script);

evaluatifyCallback with Parameters

What if the native needs to pass arguments when calling the JS callback?

JS generates an executable script based on the incoming callback and specifies the callback's parameter list.

import { evaluatifyCallback, EvaluableArgType } from 'evaluatify';

// The second argument needs to define the parameter list,
// The parameter list is an array, with each EvaluableArgType passed in order
const script = evaluatifyCallback(
  function callback(id: string, data: { type: string; name: string }) {
    // anything this callback does.
  },
  [EvaluableArgType.String, EvaluableArgType.Object]
);

window._NATIVE_INTERFACE_.getInitialState(script);

After receiving the callback script, native first uses string format to fill in the corresponding parameters, and then uses evaluateJavascript to call it, realizing callback with parameters.

// The script string needs to be formatted according to the parameter list to implement parameter filling.
String evaluateJavascript = String.format(script, "xxx-yyy-123", JSON.toString(object));

// Execute the script to implement the callback.
webView.evaluateJavascript(evaluateJavascript);

EvaluableArgType

Parameter types available for evaluatifyCallback usage

EvaluableArgType.String

String

evaluatifyCallback(
  function (value: string) {
    // typeof value == 'string';
  },
  [EvaluableArgType.String]
);

format placeholder: %s

EvaluableArgType.Number

Number (float64)

evaluatifyCallback(
  function (value: number) {
    // typeof value == 'number';
  },
  [EvaluableArgType.Number]
);

format placeholder: %f

EvaluableArgType.Boolean

Boolean

evaluatifyCallback(
  function (value: boolean) {
    // typeof value == 'boolean';
  },
  [EvaluableArgType.Boolean]
);

format placeholder: %b

EvaluableArgType.Evaluable

Executable string generated by evaluatifyCallback or evaluatifyValue, used for nested evaluatifyCallback parameters.

evaluatifyCallback(
  function (value: string) {
    // typeof value == 'string';
    // window.eval(value);
  },
  [EvaluableArgType.Evaluable]
);

format placeholder: %s

EvaluableArgType.Object

Serializable object

evaluatifyCallback(
  function (value: object) {
    // typeof value === 'object'
  },
  [EvaluableArgType.Object]
);

format placeholder: %s

evaluatifyValue

Converts any JS value to an executable script, mainly used as a parameter of type EvaluableArgType.Evaluable for evaluatifyCallback.

dealloc

Since the underlying principle of evaluatify is to temporarily hang the values that need to be converted into executable scripts on global variables, it is necessary to manually release the reference of the corresponding values from the global variables after use to prevent memory leaks.

Q&A

Limitations

evaluatify can be used for complex data exchange scenarios on mainstream WebView platforms and even nodejs native bridges.

However, the parameter list of evaluatifyCallback needs to be fixed, and the types and number of parameters cannot be changed arbitrarily.