TWA中postMessage功能失效：无导航事件及消息通道回调

遇到这种postMessage没反应、连导航事件都收不到的情况确实头疼，我之前帮同事排查过类似问题，总结了几个大概率踩坑的点，你可以逐一排查：

1. 先确认数字资产链接（Digital Asset Links）配置是否完全正确 #

这是TWA实现跨端通信的核心前提，要是这里出问题，后续所有通信都会被拦截：

• 你的Web App根目录下的.well-known/assetlinks.json文件必须能通过https://你的域名/.well-known/assetlinks.json直接访问，文件里要包含你的Android应用包名和签名指纹（调试版和发布版的指纹要分开加，别漏了调试用的）。
• 检查Android项目的AndroidManifest.xml，有没有正确配置asset_statements的meta-data，以及strings.xml里对应的内容是否指向你的Web域名。比如Manifest里的配置：

<meta-data
    android:name="asset_statements"
    android:resource="@string/asset_statements" />

strings.xml里的内容格式要准确：

[{\"relation\": [\"delegate_permission/common.handle_all_urls\"], \"target\": {\"namespace\": \"web\", \"site\": \"https://你的域名\"}}]

2. 导航事件收不到？检查监听注册的时机 #

很多人会在TWA启动后再注册导航监听，但其实要在CustomTabsService连接成功的回调里立刻注册，不然页面加载完成的事件会被错过：

customTabsClient.warmup(0L)
val session = customTabsClient.newSession(object : CustomTabsCallback() {
    override fun onNavigationEvent(navigationEvent: Int, extras: Bundle?) {
        super.onNavigationEvent(navigationEvent, extras)
        // 只在页面完全加载完成后初始化消息通道
        if (navigationEvent == NAVIGATION_FINISHED) {
            setupPostMessageChannel(session)
        }
    }
})

要是注册晚了，页面已经加载完，NAVIGATION_FINISHED事件早就触发过了，自然监听不到。

3. 核对两端的PostMessage通道代码 #

Native端和Web端的消息通道必须配套使用，不能随便用window.postMessage直接发：

• Native端：要通过CustomTabsSession创建消息通道，把其中一个端口发送给Web端，同时监听另一个端口的消息：

private fun setupPostMessageChannel(session: CustomTabsSession) {
    val messageChannel = session.createMessageChannel()
    val nativePort = messageChannel.ports[0]
    // 监听Web端发来的消息
    nativePort.setMessageCallback { message ->
        if (message == "request_notification_permission") {
            // 这里触发通知权限请求
            requestNotificationPermission()
        }
    }
    // 将Web端需要的端口发送过去
    session.postMessage("init_channel", messageChannel.ports[1])
}

• Web端：要监听message事件接收Native端发来的端口，再通过这个端口收发消息：

window.addEventListener('message', (event) => {
    // 确认是初始化通道的消息
    if (event.data === 'init_channel' && event.ports.length > 0) {
        const webPort = event.ports[0];
        // 可以在这里监听Native端发来的消息（如果需要的话）
        webPort.onmessage = (msg) => {
            console.log('收到Native消息:', msg.data);
        };
        // 比如向Native端请求通知权限
        webPort.postMessage('request_notification_permission');
    }
});

4. 调试模式下的额外配置 #

如果是本地调试，记得在strings.xml里开启调试模式，跳过部分验证方便排查：

<string name="enable_not_whitelisted_origin_debugging">true</string>

另外，Web端必须用HTTPS，哪怕是本地调试也要用工具把服务转成HTTPS，TWA不允许和HTTP页面通信。

先从数字资产链接开始排查，这个是最容易被忽略的核心配置，再依次检查监听时机和代码匹配度，应该就能解决问题了。

内容来源于stack exchange