如何配置TWA与浏览器通过PostMessage实现JS通信（附LauncherActivity代码）

嘿，我来帮你把PostMessage通信的配置理清楚，结合你给出的LauncherActivity代码，一步步说，保证你能看懂代码该放哪儿～

一、先修改你的LauncherActivity.java #

你现在的LauncherActivity已经继承了TWA的LauncherActivity，只需要在里面加两个关键方法，同时配置好信任通信源就行：

修改后的完整代码： #

package in.example.app;
import android.content.pm.ActivityInfo;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import com.google.androidbrowserhelper.trusted.LauncherActivity;
import java.util.Collections;
import java.util.List;

public class LauncherActivity extends LauncherActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 你的原屏幕方向配置代码，可保留
        if (Build.VERSION.SDK_INT > Build.VERSION_CODES.O) {
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
        } else {
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
        }
    }

    @Override
    protected Uri getLaunchingUrl() {
        Uri uri = super.getLaunchingUrl();
        return uri;
    }

    // 新增：配置允许和TWA通信的信任域名（替换成你的网页实际域名）
    @Override
    protected List<String> getAdditionalTrustedOrigins() {
        // 示例：返回你的网页域名，比如"https://your-web-app.com"
        return Collections.singletonList("https://your-twa-web-domain.com");
    }

    // 新增：可选，在Android端接收网页发来的PostMessage
    @Override
    protected void onPostMessageReceived(String message, Uri sourceOrigin) {
        // 这里处理网页消息，比如打印日志、触发原生功能
        // 示例：Log.d("TWA PostMessage", "收到消息：" + message + " 来源：" + sourceOrigin);
        
        // 如果需要给网页回发消息，调用这个方法
        // postMessageToWeb("来自Android的回复", sourceOrigin);
    }
}

代码关键点说明： #

• getAdditionalTrustedOrigins()：这是核心配置，必须返回你要允许和TWA通信的网页域名，只有在这个列表里的域名，才能通过PostMessage和你的TWA交互，一定要替换成你自己的实际网页域名。
• onPostMessageReceived()：如果需要在Android原生端接收网页发送的消息，就实现这个方法；如果只需要单向通信或者双向通信，都可以在这里处理逻辑。

二、网页端的JS代码配置 #

接下来在你的网页中添加PostMessage的发送和监听逻辑：

1. 网页向TWA发送消息 #

// 发送消息到TWA，第二个参数要和Android端配置的信任域名完全一致
window.postMessage(
  "这是网页发给TWA的测试消息",
  "https://your-twa-web-domain.com"
);

2. 网页接收TWA发来的消息 #

// 监听TWA发送的消息，同时验证来源确保安全
window.addEventListener('message', (event) => {
  if (event.origin === "https://your-twa-web-domain.com") {
    console.log("收到TWA的消息：", event.data);
    // 在这里处理收到的消息逻辑
  }
});

三、重要注意事项 #

• 域名必须完全匹配：Android端配置的信任域名、网页端postMessage的目标域名、消息监听里的来源验证域名，三者必须完全一致（包括http/https前缀，不能有任何差异）。
• 双向通信：如果需要从Android端给网页发消息，直接在onPostMessageReceived()方法里调用postMessageToWeb()即可，比如收到网页消息后即时回复。
• 你的原代码中屏幕方向的两个分支都设置了UNSPECIFIED，其实可以简化成一行代码，不过这部分不影响PostMessage的配置，你可以根据需求调整。

内容来源于stack exchange