Question

我们制作了一个Android应用，该应用目前使用WebView来全屏显示Web内容。

这可行，但是性能在很大程度上取决于WebVeiw组件的版本，并且在更新Chrome浏览器时并不总是更新（在不同的Android版本上，WebView组件和Chrome浏览器之间存在相对复杂的关系）。从Google的主题演讲中，我们得出结论，由于TWA功能与Chrome浏览器一起更新，因此使用TWA可能会获得更好，更一致的性能。因此，我们希望在不存在TWA时将TWA与WebView一起使用（我们的应用程序在Android 4.4和更高版本上运行）。

除了显示Web内容外，该应用还需要执行更多的逻辑，因此我们无法仅在清单中定义TWA / WebView。在MainActivity.java中检查了使用TWA的能力以及启动TWA或回退到WebView的能力。但是，使用TWA时，URL /地址栏和底部导航栏仍然可见。

URL /地址栏：据我们所知，要使TWA不显示URL /地址栏，TWA中显示的域必须具有/.well-known/assetlinks.json文件，该文件与Android应用程序的证书“匹配”。 https://developers.google.com/web/android/trusted-web-activity/integration-guide和https://developer.android.com/training/app-links/verify-site-associations这两个包含信息和有用链接的页面。 assetlinks.json是使用https://developers.google.com/digital-asset-links/tools/generator创建的，并已通过https://digitalassetlinks.googleapis.com/v1/statements:list?source.web.site=website_url&relation=delegate_permission/common.handle_all_urls成功检查了

在虚拟设备（Android API级别29，Chrome v83）上进行测试期间，我们启用了Chrome的“在非root用户的设备上启用命令行”标志，并且在终端中做了

$ adb shell "echo '_ --disable-digital-asset-link-verification-for-url=\"website_url"' > /data/local/tmp/chrome-command-line"

此后，Chrome显示警告消息，但URL /地址栏仍然存在。

底部导航栏： Chrome v80及更高版本应支持使用沉浸式选项https://bugs.chromium.org/p/chromium/issues/detail?id=965329#c18删除底部导航栏尽管使用了描述的用于创建全屏应用（https://developer.android.com/training/system-ui/immersive#java）的选项，但底部导航栏仍在显示。

我们如何删除URL /地址栏和底部导航栏，基本上如何使Web内容全屏显示在TWA中？

我们查看了以下示例应用程序，以了解为使TWA正常运行而需要做的事情，但没有发现任何有效的方法（尽管我们错失了一些必不可少的东西）：

我们项目文件的相关内容：

Manifest.json

    <application
        android:name="main_application"
        android:hardwareAccelerated="true"
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:banner="@drawable/banner"
        android:label="@string/app_name"
        android:usesCleartextTraffic="true"
        android:networkSecurityConfig="@xml/network_security_config"
        android:theme="@style/AppTheme" >
        <activity
            android:name="main_activity"
            android:hardwareAccelerated="true"
            android:label="@string/app_name"
            android:launchMode = "singleInstance"
            android:keepScreenOn="true" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.LAUNCHER" />
                <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
    </application>

MainActivity.java

public class MainActivity extends Activity implements IServiceCallbacks {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Set up looks of the view
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        View decorView = getWindow().getDecorView();
        decorView.setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() {
            @Override
            public void onSystemUiVisibilityChange(int visibility) {
                // Note that system bars will only be "visible" if none of the
                // LOW_PROFILE, HIDE_NAVIGATION, or FULLSCREEN flags are set.
                if ((visibility & View.SYSTEM_UI_FLAG_FULLSCREEN) == 0) {
                    // bars are visible => user touched the screen, make the bars disappear again in 2 seconds
                    Handler handler = new Handler();
                    handler.postDelayed(new Runnable() {
                        public void run() {
                            hideBars();
                        }
                    }, 2000);
                } else {
                    // The system bars are NOT visible => do nothing
                }
            }
        });
        decorView.setKeepScreenOn(true);
        setContentView(R.layout.activity_main);

        // create Trusted Web Access or fall back to a WebView
        String chromePackage = CustomTabsClient.getPackageName(this, TrustedWebUtils.SUPPORTED_CHROME_PACKAGES, true);
        if (chromePackage != null) {
            if (!chromeVersionChecked) {
                TrustedWebUtils.promptForChromeUpdateIfNeeded(this, chromePackage);
                chromeVersionChecked = true;
            }

            if (savedInstanceState != null && savedInstanceState.getBoolean(MainActivity.TWA_WAS_LAUNCHED_KEY)) {
                this.finish();
            } else {
                this.twaServiceConnection = new MainActivity.TwaCustomTabsServiceConnection();
                CustomTabsClient.bindCustomTabsService(this, chromePackage, this.twaServiceConnection);
            }
        } else {
            // set up WebView
        }
    }


    private class TwaCustomTabsServiceConnection extends CustomTabsServiceConnection {
        public void onCustomTabsServiceConnected(ComponentName componentName, CustomTabsClient client) {
            CustomTabsSession session = MainActivity.this.getSession(client);
            CustomTabsIntent intent = MainActivity.this.getCustomTabsIntent(session);
            Uri url = Uri.parse("http://our_url");
            TrustedWebUtils.launchAsTrustedWebActivity(MainActivity.this, intent, url);
            MainActivity.this.twaWasLaunched = true;
        }

        public void onServiceDisconnected(ComponentName componentName) {
        }
    }


    protected void hideBars() {
        if (getWindow() != null) {
            View decorView = getWindow().getDecorView();
            decorView.setSystemUiVisibility(
                // Hide the nav bar and status bar
                View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_FULLSCREEN
                // Set the content to appear under the system bars so that the
                // content doesn't resize when the system bars hide and show.
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                // Enables regular immersive mode
                | View.SYSTEM_UI_FLAG_IMMERSIVE
            );
        }
        // Remember that you should never show the action bar if the
        // status bar is hidden, so hide that too if necessary.
        ActionBar actionBar = getActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }
    }
}

build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.0.0'
    }
}

allprojects {
    repositories {
        jcenter()
        google()
        maven { url "https://jitpack.io" }
    }
}

build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    buildToolsVersion '29.0.2'

    defaultConfig {
        applicationId application_id
        minSdkVersion 19
        targetSdkVersion 29

    }

    buildTypes {
        release {
            minifyEnabled true
            debuggable false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'
        }
        debug {
            minifyEnabled false
            debuggable true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'
            jniDebuggable true
            renderscriptDebuggable true
            renderscriptOptimLevel 3
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'androidx.leanback:leanback:1.0.0'
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'androidx.webkit:webkit:1.2.0'
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:master'
}

/。well-known / assetlinks.json

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target" :  { "namespace": "android_app", "package_name": "our package name",
                  "sha256_cert_fingerprints": ["11:22:33:44"]
                }
  },
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target" :  { "namespace": "android_app", "package_name": "our other package name",
                  "sha256_cert_fingerprints": ["11:22:33:44"]
                }
  }
]

Answer 1

关于数字资产链接验证，我建议安装Peter's Asset Links Tool并使用它来检查配置。请务必仔细检查快速入门指南中的section on App Signing，因为签名在使用时会发生变化，从而导致验证失败，无法从Play商店下载该应用（您必须更新assetlinks.json才能进行可以。）

您似乎还使用了{strong>不推荐使用的custom-tabs-client库，建议您移至android-browser-helper，这是Trusted Web Activity的推荐库。如果您确实想使用较低级别的库，则可以使用androidx.browser（我真的建议使用android-browser-helper。

android-browser-helper包括一个LauncherActivity，它使事情变得非常容易，因为大多数方面都可以从AndroidManifest.xml进行配置，但是它也希望从主屏幕启动“受信任的Web活动”。 twa-basic demo显示了如何使用LauncherActivity。

对于其他用例，可以使用TwaLauncher（由LauncherActivity本身使用）。 twa-custom-launcher演示演示了如何使用它。 LauncherActivity的源代码也可以是helpul。

最后，如果目标是仅从主屏幕启动渐进式Web应用程序，则Bubblewrap是自动执行该过程的Node.js命令行工具。

关于沉浸模式，这里是how it's setup in the twa-basic demo。如果使用TwaLauncher，则要使用的LauncherActivity代码是here。

使用Bubblewrap时，在创建项目时选择fullscreen作为“显示模式”，以沉浸式模式启动应用。

奖金：由于您提到要使用WebView后备实现，因此您可能想知道android-browser-helper附带了WebView后备（默认情况下处于禁用状态）。 twa-webview-fallback demo显示how to use it。

如何使用TWA全屏（沉浸式）制作Android应用

1 个答案: