feat: add script message handler support to Android WebView #14328

prashantsaini1 · 2025-10-27T06:31:20Z

This PR implements the addScriptMessageHandler and the removeScriptMessageHandler methods for Android platform, bringing parity with the iOS.

Titanium App:

const HANDLER_NAME = 'MyScriptMessageHandler';
const window = Ti.UI.createWindow();
const webView = Ti.UI.createWebView({ url: 'some-remote-url' });

webView.addScriptMessageHandler(HANDLER_NAME, true);
webView.addEventListener('message', (e) => {
	if (e.name === HANDLER_NAME) {
		alert(e.body.message);
	}
});

window.add(webView);
window.open();

Web page:

<script type="text/javascript">
    // For iOS, to keep backward compatibility, do not pass second argument, or set it to `false`.
    const body = { message: 'Hello Titanium!'};
    window.webkit.messageHandlers.yourHandlerName.postMessage(body);
    
    // For Android, or for iOS with second argument as `true`.
    const body = { message: 'Hello Titanium!'};
    window.tisdk.emit('yourHandlerName', JSON.stringify(body));
</script>

m1ga · 2025-10-27T08:20:42Z

The example code will show No app side handler available. when I run it on a Pixel 9

prashantsaini1 · 2025-10-27T08:47:59Z

@m1ga It might have something to do with the synchronisation of the web-page script loading and adding the app side message handler. Can you try to call the web-page side method postMessage upon a button click or anything which does not run the script instantly?

I tested both Android and iOS changes upon a button click rather than instantly running the script, but I added the sample code here for simplicity.

m1ga · 2025-10-27T08:49:44Z

I've used the Chrome Devtools to inspect the webview and even using the console I don't have window.MyScriptMessageHandler

prashantsaini1 · 2025-10-27T09:08:21Z

@m1ga I checked the native docs, and found that the script must be injected either before the URL is loaded or the URL must be reload after. In my tests, the web-page does some redirections. Can you please set the webView URL after the window.open() call in the Ti App side and let me know? Thanks!

m1ga · 2025-10-27T09:15:35Z

Still no luck:

const HANDLER_NAME = 'MyScriptMessageHandler';

const window = Ti.UI.createWindow({ title: 'Android Script Message' });
const webView = Ti.UI.createWebView({ });

window.add(webView);

webView.addScriptMessageHandler(HANDLER_NAME);
webView.addEventListener('message', (e) => {
	if (e.name === HANDLER_NAME) {
		alert(e.body?.message ?? 'No message');
	}
});

window.addEventListener("open", function(){
	webView.url = '/page.html'
})

window.open();

and

<h1>test</h1>
<script>
  const androidHandler = window.MyScriptMessageHandler?.postMessage;
  const iOSHandler = window.webkit?.messageHandlers?.MyScriptMessageHandler?.postMessage;


  document.querySelector("h1").addEventListener("click", function() {
    if (androidHandler) {
      androidHandler(
        JSON.stringify({
          name: 'MyScriptMessageHandler',
          body: {
            message: 'Titanium WebView Rocks!'
          },
        }),
      )
    } else if (iOSHandler) {
      iOSHandler({
        message: 'Titanium WebView Rocks!'
      });
    } else {
      // No app side handlers available.
      alert('No app side handler available.')
    }
  })
</script>

and I click on the h1 and get the "no app side..." alert. I've fetch the PR again and rebuild the SDK just to make sure it's running the correct version. Tested liveview and no liveview. But I don't see the correct alert

m1ga · 2025-10-27T12:14:19Z

This example code works now:

const HANDLER_NAME = 'MyScriptMessageHandler';

const window = Ti.UI.createWindow({
	title: 'Android Script Message'
});
const webView = Ti.UI.createWebView({});
window.add(webView);

window.addEventListener("open", function() {
	webView.addScriptMessageHandler(HANDLER_NAME);
	webView.addEventListener('message', (e) => {
		if (e.name === HANDLER_NAME) {
			alert(e.body?.message ?? 'No message');
		}
	});
	webView.url = '/page.html'
})

window.open();

addScriptMessageHandler has to be called after open otherwise view is null in the check and it won't add the listeners.

HTML part:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <h1>test</h1>
  <script>
    document.querySelector("h1").addEventListener("click", function() {

      const androidHandler = window.MyScriptMessageHandler;
      const iOSHandler = window.webkit?.messageHandlers?.MyScriptMessageHandler;

      document.querySelector("h1").addEventListener("click", function() {
        if (androidHandler) {
          androidHandler.postMessage(
            JSON.stringify({
              name: 'MyScriptMessageHandler',
              body: {
                message: 'Titanium WebView Rocks!'
              },
            }),
          )
        } else if (iOSHandler) {
          iOSHandler.postMessage({
            message: 'Titanium WebView Rocks!'
          });
        } else {
          // No app side handlers available.
          alert('No app side handler available.')
        }
      })
    })
  </script>

</body>

</html>

(works locally too)

prashantsaini1 · 2025-10-27T12:18:13Z

@m1ga Yep! First issue was referencing the postMessage in Web Page code directly, brings in a different closure. Fixing the addScriptMessageHandler order sequence issue as I noticed it too. Just updated the example as well.

Edit: The problem is calling the addScriptMessageHandler without the window being properly opened or when the proxy's view is null.

I've updated the code in description for now, and will check further if we can handle it inside the SDK itself.

prashantsaini1 · 2025-10-28T10:01:50Z

@m1ga Just fixed the code (refer description), tested with http://migaweb.de/page.html?123 and our local web page as well.

prashantsaini1 · 2025-10-28T10:02:20Z

@janvennemann PR's ready now to proceed further as discussed.

m1ga · 2025-10-28T10:37:29Z

@prashantsaini1 if you click on the text multiple time it will fire the event multiple times

prashantsaini1 · 2025-10-28T11:05:02Z

@m1ga It's because your web page code which you posted is adding the event listener again inside the listener itself. ;)

m1ga · 2025-10-28T11:08:11Z

oh 😄 didn't notice the double click event! Then it's working fine now 👍

janvennemann · 2025-10-28T11:52:55Z

First off, thanks a lot @prashantsaini1 for investigating this matter and adding the basic feature parity. This is a great basic start. I'd love to add a unified API for this that does the heavy lifting behind the scenes and does not require so much platform specific extra logic. Right now it is very cumbersome to set up all the required handlers.

I'm thinking of a simple event based API that can be used like this inside the web view:

window.tiWebViewBridge.emit(eventName: string, data: any)

And then on the Titanium side handle it like any other event:

webView.addEventListener('my-custom-event', ({ name, data }) => {
  console.log({ name, data })
})

For this we would use automatically injected JS code that prepares a single script message handler which is used to send the event that we unwrap and forward on the native side into the Titanium event bus. I totally understand this may be out of scope for this PR but i just wanted to leave my two cents how we could improve this with a proper cross-platform API.

m1ga · 2025-10-28T11:57:58Z

for that you can look at #13835 which will inject the current binding.js file in an external page.

janvennemann · 2025-10-28T13:08:01Z

for that you can look at #13835 which will inject the current binding.js file in an external page.

Ah nice, but that is also Android only and is again a totally different API than what iOS uses. That's why i mentioned a unified API that works the same on both platforms.

Just to be sure i'm not missing something what's the benefit of this PR compared #13835. Doesn't it practically do the same, e.g. sending events from the web view to the Titanium app.

m1ga · 2025-10-28T13:21:40Z

@janvennemann I just wanted to show you how you could inject the bindings. My old PR will just use the normal Ti namespace (https://titaniumsdk.com/guide/Titanium_SDK/Titanium_SDK_How-tos/Integrating_Web_Content/Communication_Between_WebViews_and_Titanium.html) that has been there for ages and is added in local pages automatically. My PR will just add it for external pages (and yes, only for Android as I don't know how to do it for iOS :) )

You could use that and add a different namespace too but the Ti should stay as many people use that.

prashantsaini1 · 2025-10-28T15:25:50Z

@m1ga @janvennemann Well, I found some interesting stuff on iOS.

If we enable the _Ti_ message handler on the app side, we can actually invoke the Ti.App.fireEvent(...) on the web-page, just have to wait for the script to be initially loaded.

I tested it on our web-page and already works fine without the window.webkit/window.Android stuff.

App side:

Ti.App.addEventListener('myCustomEvent', (e) => {
	Ti.API.error('Event from webview = ' + JSON.stringify(e));
});

// iOS already injects the `Ti.App` namespace script under the `_Ti_` handler.
webView.addScriptMessageHandler('_Ti_');

Web page side:

 Ti.App.fireEvent('myCustomEvent', 'pass any data here, even a json object as usual');

Next Steps:

iOS: Auto invoke the webView.addScriptMessageHandler('_Ti_'); in iOS SDK when the relevant script is injected.
Android: review the PR from @m1ga if that works already, or check how it can be done on Android.

janvennemann · 2025-10-28T16:16:42Z

Ha, thanks @prashantsaini1, you beat me to it. I found the same after digging through our web view implementation thanks to @m1ga's hints.

The iOS implementation is also limited to local URLs, by manually invoking webView.addScriptMessageHandler('_Ti_'); you basically manually doing this step

I think we should just introduce a new property like autoInjectEventBridge which controls this behavior. On iOS it set's the script message handler, on Android it loads the bindings file. It can be false by default to match existing behavior and possibly for security concerns.

prashantsaini1 · 2025-10-28T16:30:35Z

@janvennemann Sounds good. @m1ga I'd take your PR further to enable it for Android as well. :)

m1ga · 2025-10-28T16:38:10Z

sounds good 👍 Not sure if that might be relevant for your page too (in case links that open with target:_blank): #14005 but it can be useful when you work with external pages and you don't want to remove target:_blank by hand all the time

prashantsaini1 · 2025-10-31T06:57:53Z

@m1ga @janvennemann Finally achieved the following syntax for both platforms. To keep backward compatibility without breaking existing iOS apps, added 2nd argument to enable the unified API.

const body = { message: 'Hello Titanium!'};
window.tisdk.emit('myCustomHandler', JSON.stringify(body));

m1ga

added some notes. The changes in the Web code will make it work on both platforms if you copy and paste it. Otherwise it will complain on Android because webkit is not there and const body is already there.

apidoc/Titanium/UI/WebView.yml

android/modules/ui/src/java/ti/modules/titanium/ui/WebViewProxy.java

Co-authored-by: Michael Gangolf <[email protected]>

m1ga

👍

iphone/Classes/TiUIWebViewProxy.m

feat: add script message handler support to Android WebView

244710b

prashantsaini1 requested review from janvennemann and m1ga October 27, 2025 06:32

prashantsaini1 marked this pull request as draft October 27, 2025 15:44

fix: update handlers if added before the web-view creation

507833a

prashantsaini1 marked this pull request as ready for review October 28, 2025 10:01

m1ga approved these changes Oct 28, 2025

View reviewed changes

prashantsaini1 added 3 commits October 30, 2025 17:09

chore: destroy JS interface

f5c4b7d

chore(ios): add user script to enable window.tiBridge.emit pattern

569bfa0

feat(android): implement the window.tiBridge unified pattern

6088032

chore: update docs

fca9e20

chore: rename window.tiBridge to window.tisdk

fbf8f01

prashantsaini1 requested a review from m1ga November 1, 2025 14:39

m1ga requested changes Nov 1, 2025

View reviewed changes

apidoc/Titanium/UI/WebView.yml Outdated Show resolved Hide resolved

apidoc/Titanium/UI/WebView.yml Outdated Show resolved Hide resolved

android/modules/ui/src/java/ti/modules/titanium/ui/WebViewProxy.java Show resolved Hide resolved

prashantsaini1 and others added 2 commits November 1, 2025 23:48

Update apidoc/Titanium/UI/WebView.yml

17199d3

Co-authored-by: Michael Gangolf <[email protected]>

Update apidoc/Titanium/UI/WebView.yml

c802dbb

Co-authored-by: Michael Gangolf <[email protected]>

m1ga approved these changes Nov 1, 2025

View reviewed changes

hansemannn reviewed Nov 2, 2025

View reviewed changes

iphone/Classes/TiUIWebViewProxy.m Outdated Show resolved Hide resolved

chore: update comments

a4ecd42

prashantsaini1 force-pushed the android/webview-scriptmessagehandler branch from ba191e0 to a4ecd42 Compare November 2, 2025 15:07

Uh oh!

feat: add script message handler support to Android WebView #14328

Are you sure you want to change the base?

feat: add script message handler support to Android WebView #14328

Uh oh!

Conversation

prashantsaini1 commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

m1ga commented Oct 27, 2025

Uh oh!

prashantsaini1 commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

m1ga commented Oct 27, 2025

Uh oh!

prashantsaini1 commented Oct 27, 2025

Uh oh!

m1ga commented Oct 27, 2025

Uh oh!

m1ga commented Oct 27, 2025

Uh oh!

prashantsaini1 commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

prashantsaini1 commented Oct 28, 2025

Uh oh!

prashantsaini1 commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

m1ga commented Oct 28, 2025

Uh oh!

prashantsaini1 commented Oct 28, 2025

Uh oh!

m1ga commented Oct 28, 2025

Uh oh!

janvennemann commented Oct 28, 2025

Uh oh!

m1ga commented Oct 28, 2025

Uh oh!

janvennemann commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

m1ga commented Oct 28, 2025

Uh oh!

prashantsaini1 commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

janvennemann commented Oct 28, 2025

Uh oh!

prashantsaini1 commented Oct 28, 2025

Uh oh!

m1ga commented Oct 28, 2025

Uh oh!

prashantsaini1 commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

m1ga left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

m1ga left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

prashantsaini1 commented Oct 27, 2025 •

edited

Loading

prashantsaini1 commented Oct 27, 2025 •

edited

Loading

prashantsaini1 commented Oct 27, 2025 •

edited

Loading

prashantsaini1 commented Oct 28, 2025 •

edited

Loading

janvennemann commented Oct 28, 2025 •

edited

Loading

prashantsaini1 commented Oct 28, 2025 •

edited

Loading

prashantsaini1 commented Oct 31, 2025 •

edited

Loading