点击Web Push通知打开三星浏览器而非TWA应用的问题求助

问题描述 #

在Android手机上点击Web Push通知时，打开的是三星互联网浏览器而非已安装的TWA应用。

复现步骤 #

• 在默认浏览器为三星互联网的Android设备上安装TWA应用
• 从TWA应用发送Web Push通知
• 点击该Web Push通知

相关代码 #

service-worker.js 初始代码 #

self.addEventListener('push', (event) => {
    var message = event.data.json();
    event.waitUntil(
        self.registration.showNotification(
            message.title, {
                icon: message.icon,
                body: message.body,
            }
        )
    );
});

self.addEventListener('notificationclick', (event) => {
    event.notification.close();
    const isDevEnvironment = location.hostname === 'localhost';
    var dataUrl;
    if (isDevEnvironment) {
        dataUrl = 'http://localhost:3000';
    } else {
        dataUrl = 'https://flowmd.ngrok.dev/';
    }

    clients.openWindow(dataUrl);
});

尝试过的notificationclick事件代码（client.focus无效） #

self.addEventListener('notificationclick', function(event) {
    event.notification.close();
    console.log("hello");
    event.waitUntil(
        clients.matchAll({ type: 'window', includeUncontrolled: true }).then(function(clientList) {
            for (var i = 0; i < clientList.length; i++) {
                var client = clientList[i];
                if (client.url === 'https://flowmd.ngrok.dev/' && 'focus' in client) {
                    return client.focus();
                }
            }

            if (clients.openWindow) {
                return clients.openWindow('https://flowmd.ngrok.dev/');
            }
        })
    );
});

TWA应用Android Manifest中的深层链接配置 #

<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW"/>
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE"/>
    <data android:scheme="https"
        android:host="@string/hostName"/>
</intent-filter>

预期结果 #

期望点击Web Push通知时打开TWA应用，而非三星互联网浏览器。

环境信息 #

• 设备：Galaxy S10
• 系统：Android 12

解决方案 #

1. 完成TWA域名关联验证 #

你配置的android:autoVerify="true"必须配合正确的域名验证才能生效。在目标域名根目录下放置assetlinks.json文件，内容格式如下：

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "你的TWA应用包名",
    "sha256_cert_fingerprints": ["你的应用签名SHA256指纹"]
  }
}]

验证通过后，Android系统才会把该域名的链接优先分配给TWA应用打开。

2. 给通知添加data字段传递跳转链接 #

修改推送通知的展示逻辑，在showNotification的选项中加入data字段明确跳转地址：

self.addEventListener('push', (event) => {
    const message = event.data.json();
    event.waitUntil(
        self.registration.showNotification(message.title, {
            icon: message.icon,
            body: message.body,
            data: { url: message.url || 'https://flowmd.ngrok.dev/' }
        })
    );
});

3. 优化notificationclick事件处理 #

原有的clients.matchAll逻辑可能因URL匹配过于严格失效，改成按域名前缀匹配；同时确保唤起的链接能触发TWA的深层链接：

self.addEventListener('notificationclick', (event) => {
    event.notification.close();
    const targetUrl = event.notification.data.url || 'https://flowmd.ngrok.dev/';
    const baseUrl = targetUrl.split('?')[0];

    event.waitUntil(
        clients.matchAll({ type: 'window', includeUncontrolled: true })
            .then(clientList => {
                // 优先唤起已打开的TWA窗口
                for (const client of clientList) {
                    if (client.url.startsWith(baseUrl) && 'focus' in client) {
                        return client.focus();
                    }
                }
                // 无现有窗口则打开链接，验证通过后TWA会被唤起
                return clients.openWindow(targetUrl);
            })
    );
});

4. 调整TWA的Activity启动模式 #

在AndroidManifest.xml中，将TWA的LauncherActivity启动模式设为singleTask，避免重复创建实例：

<activity
    android:name="androidx.browser.customtabs.trusted.LauncherActivity"
    android:launchMode="singleTask"
    ...>
    <!-- 深层链接的intent-filter -->
</activity>

5. 手动修正应用链接关联 #

如果三星浏览器仍抢占链接，可以在系统设置中：

• 找到三星互联网浏览器，进入「默认应用」→「打开链接」，取消目标域名的关联
• 或找到你的TWA应用，设置为该域名的默认打开应用

内容的提问来源于stack exchange，提问作者gal