Exposing TypeScript functions to the browser

The goal of this article is to explore the possible options for exposing functions, variables and WebKit message handlers to the browser in the simplest and quickest way possible.

In order to explore these options fully, let's take a look at what a vanilla implementation might look like:

Vanilla Exposure

Define types to be exposed:

declare global {
  interface Window {
    webkit: {
      messageHandlers: {
        // Example 1: Send message to Swift app
        someMessageHandler: {
          someStringFunction: (someParam: string) => void;
        };
      };
    };
    // Example 2: Receive message from Swift app
    sendMessageToReactWebApp: (message: string) => void; 
  }
}

Then, define the function body for each:

Example 1

const sendMessageToSwiftApp = (message: string) => {
  if (
    window.webkit &&
    window.webkit.messageHandlers &&
    window.webkit.messageHandlers.someMessageHandler
  ) {
    window.webkit.messageHandlers.someMessageHandler.sendStringToSwiftApp(
      message
    );
  } else {
    console.warn("Message handler 'someMessageHandler' is not available.");
  }
};
sendMessageToSwiftApp('Hello from React!')

Example 2

const sendMessageToReactWebApp = useCallback((message: string) => {
  console.log(`React received message from Swift app: ${message}`);
  sendMessageToSwiftApp(`Message received from React app: ${message}`);
}, []);

useEffect(() => {
  window.sendMessageToReactWebApp = sendMessageToReactWebApp;
}, [sendMessageToReactWebApp]);

That's a lot of code. It sure would be nice if we could simplify a lot of this.