@podium/bridge

This package is a bridge designed to pass JSON-RPC 2.0 messages between a web application and a native web view.

Usage

To install:

npm install @podium/bridge

Import the bridge in your client-side bundle:

import "@podium/bridge";

You should probably send messages via @podium/browser. That said, the bridge is available on window['@podium'].bridge.

/** @type {import("@podium/bridge").PodiumBridge} */
const bridge = window["@podium"].bridge;

// You can listen for incoming messages, which can either be RpcRequest or RpcResponse
bridge.on("global/authentication", (message) => {
  const request =
    /** @type {import("@podium/bridge").RpcRequest<{ token?: string }>} */ (
      message
    );

  if (typeof request.token === "string") {
    // logged in
  } else {
    // logged out
  }
});

// You can trigger notifications (one-way messages)
bridge.notification({
  method: "global/authentication",
  params: { token: null },
});

// And you can call methods and await the response
/** @type {import("@podium/bridge").RpcResponse<{ c: string }>} */
const response = await bridge.call({
  method: "document/native-feature",
  params: { a: "foo", b: "bar" },
});

API

bridge.on

Add a listener for incoming messages for a given method name.

import "@podium/bridge";

/** @type {import("@podium/bridge").PodiumBridge} */
const bridge = window["@podium"].bridge;

bridge.on("global/authentication", (message) => {
  const request =
    /** @type {import("@podium/bridge").RpcRequest<{ token?: string }>} */ (
      message
    );

  if (typeof request.token === "string") {
    // logged in
  } else {
    // logged out
  }
});

bridge.notification

Send a notification (one-way message).

import "@podium/bridge";

/** @type {import("@podium/bridge").PodiumBridge} */
const bridge = window["@podium"].bridge;

bridge.notification({
  method: "global/authentication",
  params: { token: null },
});

bridge.call

Send a request and await a response.

import "@podium/bridge";

/** @type {import("@podium/bridge").PodiumBridge} */
const bridge = window["@podium"].bridge;

/** @type {import("@podium/bridge").RpcResponse<{ c: string }>} */
const response = await bridge.call({
  method: "document/native-feature",
  params: { a: "foo", b: "bar" },
});