如何在使用 pwabuilder.com 网站构建的可信 Web 活动 (TWAs) 应用程序中设置自定义用户代理或自定义标头？

Question

我正在使用 PWABuilder 开发可信 Web 活动 (TWA) 应用程序，并且面临用户权限和通知方面的挑战。我需要区分通过本机 TWA 访问应用程序的用户和直接使用 Web 应用程序的用户。这对于以下方面至关重要：

适当请求通知权限（iOS 的 APN、Android 的 WebPush）。 将订阅详细信息准确保存到数据库中。 我已经探索过在 TWA 中设置自定义用户代理或自定义标头来实现此目的，但尚未找到可靠的解决方案。我尝试修改manifest.json但没有成功。

这是一个示例 React 片段，说明了我的方法：

{isIOSApp() && (
            <APNPermission />
          )}
          {isAndroidApp() && (
            <WebPush />
          )}

我已经能够使用 WebView 组件在 iOS 代码中设置自定义用户代理，但我还没有在 TWA 上下文中找到适用于 Android 的类似直接解决方案。我探索了以下方法但没有成功：

依赖

document.referrer

：这被证明是不可靠的，尤其是从外部链接加载应用程序或Google登录后。

修改

manifest.json

：由于电子邮件和其他来源的链接中存在现有查询参数，因此将查询参数附加到

start_url

是不可行的。

调整

LauncherActivity

：我研究了

com.google.androidbrowserhelper.trusted.LauncherActivity

类中的重写方法，但我不确定哪种方法适合设置自定义数据。

我分析了 com.google.androidbrowserhelper.trusted.LauncherActivity 类，并尝试了重写方法来设置自定义数据。以下是我的发现：

重写的方法：

onCreate(Bundle savingInstanceState)：我添加了日志语句来跟踪意图额外内容和保存的实例状态，但此方法似乎与设置标头或用户代理没有直接相关。

getLaunchingUrl()：我记录了启动 URL，但此方法主要是检索它而不是修改它。

createTwaLauncher()：我记录了 TWA 启动器创建过程，但我还没有找到在此方法中自定义标头的方法。

launchTwa()：我记录了启动过程，但此方法不提供对标头的直接控制。

getCustomTabsCallback()：我创建了一个自定义 CustomTabsCallback 实现 (MyQualityEnforcer) 来探索潜在的交互，但我尚未成功向 Web 应用程序发送消息。

下面是我编写的用于测试序列的函数。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Intent i = super.getIntent();
        i.putExtra("my app", "company app 2");
        Bundle iExtras = i.getExtras();
        if (savedInstanceState == null) {
            Log.d(tag, "2.onCreate Intent.getExtras " + i.getExtras().toString());
            super.onCreate(iExtras);
        } else {
            Log.d(tag, "2.onCreate savedInstanceState " + savedInstanceState.toString());
            super.onCreate(savedInstanceState);
        }
        Log.d(tag, "2.onCreate launcher activity last line");
    }

    @Override
    protected Uri getLaunchingUrl() {
        Log.d(tag, "4.getLaunchingUrl");
        // Get the original launch Url.
        Uri uri = super.getLaunchingUrl();
        Log.d(tag, "4.getLaunchingUrl Launching URL: " + uri);
        return uri;
    }

    @Override
    protected TwaLauncher createTwaLauncher() {
        Log.d(tag, "5.createTwaLauncher twa launcher created");
        TwaLauncher l = super.createTwaLauncher();
        Log.d(tag, "5.createTwaLauncher twa launcher created " + l.getProviderPackage());
        return l;
    }

    @Override
    protected void launchTwa() {
        Log.d(tag, "3.launchTwa main fn starting");
        super.launchTwa();
        Log.d(tag, "3.launchTwa executed");
    }

    @Override
    protected CustomTabsCallback getCustomTabsCallback() {
        Log.d(tag, "6.CustomTabsCallback ");
        CustomTabsCallback q = new MyQualityEnforcer();
        Bundle b = new Bundle();
        b.putString("myapp", "company app");
        q.onMessageChannelReady(b);
        Log.d(tag, "6.CustomTabsCallback " + q.toString());
        return q;
    }

我还尝试覆盖

QualityEnforcer

以检查是否可以向 webapp javascript 发送消息，但还不知道如何发送。下面是课程

public class MyQualityEnforcer extends QualityEnforcer {

    private final String tag = "MyLauncherActivity";

    @Override
    public void onMessageChannelReady(Bundle extras) {
        // Handle the URL update event here
        Log.i(tag, "URL updated: " + extras.toString());
    }
}

日志

---------------------------- PROCESS STARTED (9972) for package com.company.app.twa ----------------------------
2024-01-10 16:29:56.370  9972-9972  MyLauncherActivity      com.company.app.twa               D  1. hello worldWed Jan 10 16:29:56 GMT+11:00 2024
2024-01-10 16:29:56.604  9972-9972  MyLauncherActivity      com.company.app.twa               D  2.onCreate Intent.getExtras Bundle[{my app=company app 2}]
2024-01-10 16:29:56.617  9972-9972  MyLauncherActivity      com.company.app.twa               D  3.launchTwa main fn starting
2024-01-10 16:29:56.621  9972-9972  MyLauncherActivity      com.company.app.twa               D  4.getLaunchingUrl
2024-01-10 16:29:56.622  9972-9972  MyLauncherActivity      com.company.app.twa               D  4.getLaunchingUrl Launching URL: https://amazing-domain.example.com/
2024-01-10 16:29:56.623  9972-9972  MyLauncherActivity      com.company.app.twa               D  5.createTwaLauncher twa launcher created
2024-01-10 16:29:56.639  9972-9972  MyLauncherActivity      com.company.app.twa               D  5.createTwaLauncher twa launcher created com.android.chrome
2024-01-10 16:29:56.639  9972-9972  MyLauncherActivity      com.company.app.twa               D  6.CustomTabsCallback 
2024-01-10 16:29:56.641  9972-9972  MyLauncherActivity      com.company.app.twa               I  URL updated: Bundle[{myapp=company app}]
2024-01-10 16:29:56.650  9972-9972  MyLauncherActivity      com.company.app.twa               D  6.CustomTabsCallback com.company.app.twa.MyQualityEnforcer@a6145b7
2024-01-10 16:29:57.339  9972-9972  MyLauncherActivity      com.company.app.twa               D  3.launchTwa executed
2024-01-10 16:29:57.347  9972-9972  MyLauncherActivity      com.company.app.twa               D  2.onCreate launcher activity last line

如果有人能给我一些线索来使用 JavaScript 检测作为可信 Web 活动运行的 Android 设备，我将非常高兴。

谢谢。

Answer 1

您可以执行此操作的一种方法是：

1. 更改您在 PWABuilder 上使用的 URL，以识别它是从 Android 启动的 PWA。例如，如果您的 PWA 位于 https://example.com，则在 PWABuilder 中将您的 URL 指定为 https://example.com?utm_source=androidtwa
2. 在 JS 代码中，启动 HTTP 请求时，检查 URL 是否包含 androidtwa 查询字符串，如果有，则将自定义标头附加到您的请求中。

这样您就不需要修改任何 PWABuilder 的 Android 代码，而是将逻辑保留在应用程序的代码中。