如何使用TWA全屏(沉浸式)制作Android应用程序

Question

我们制作了一个安卓应用程序，它使用WebView全屏显示网页内容。

这是可行的，但性能在很大程度上取决于WebVeiw组件的版本，而且在更新Chrome浏览器时并不总是更新(不同版本的WebView组件和Chrome浏览器之间存在相对复杂的关系)。通过Google关于这一主题的介绍，我们得出结论:使用TWA，我们可能会获得更好和更一致的性能，因为TWA功能与Chrome浏览器一起更新。因此，当TWA不存在时，我们希望使用TWA作为WebView的后盾(我们的应用程序运行在Android4.4和更高版本上)。

该应用程序需要执行一些更多的逻辑，而不仅仅是显示网络内容，所以我们不能逃脱定义TWA/WebView仅在清单。检查是否能够使用WebView，或者启动TWA，或者回到MainActivity.java中的TWA。但是，在使用TWA时，URL/地址栏和底部导航栏都是可见的。

URL/地址栏：据我们所知，为了使TWA不显示URL/地址栏，在TWA中显示的域必须有一个/.熟知的/assetlinks.json.known文件，该文件“匹配”安卓应用程序的证书。有关于这方面的信息和有用链接的两个页面是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创建的，并成功地与urls进行了检查。

在虚拟设备(Android 29，Chrome v83)上进行测试时，我们启用了Chrome的“非根设备上的启用命令行”标志，并且在终端中启用了

$ 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)的选项，底部导航栏仍在显示。

如何删除网址/地址栏和底部导航栏，基本上如何使网页内容显示在全屏上？

我们查看了下面的示例应用程序，以了解我们需要做些什么才能让TWA工作，但却没有发现有效的应用程序(尽管我们忽略了一些重要的东西并不是不可想象的)：

• https://github.com/GoogleChromeLabs/svgomg-twa
• https://github.com/tsuyosh/TrustedWebActivitiesDemo
• https://github.com/GoogleChrome/android-browser-helper
• https://github.com/elliatab/TwaDemo
• https://github.com/thanhtungka91/TwaDemoJava

我们的项目档案的相关内容：

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'
}

/.众所周知/资产链接.known

[
  {
    "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的资产链接工具并使用它检查配置。确保在快速启动指南上重复检查关于应用程序签名的章节，因为使用它时签名会发生变化，导致验证失败，应用程序将从Play Store下载(您必须更新assetlinks.json才能使其工作)。

您似乎还在使用custom-tabs-client库，它是废弃的，建议迁移到android-browser-helper，这是可信Web活动的推荐库。如果您确实希望使用较低级别的库，则应该使用androidx.browser (我确实建议使用android-browser-helper )。

android-browser-helper包括一个使事情变得非常简单的LauncherActivity，因为大多数方面都可以通过AndroidManifest.xml配置，但它也希望从主屏幕启动受信任的Web活动。演示展示了如何使用LauncherActivity。

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

最后，如果目标是简单地从主屏幕上启动一个渐进的网络应用程序，那么鼓泡膜是一个Node.js命令行工具，可以自动执行这个过程。

关于沉浸式模式，这里是如何在twa-基本演示中安装。如果使用TwaLauncher，则要使用的LauncherActivity代码是这里。

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

：由于您提到希望使用WebView回退实现，您可能有兴趣知道android-browser-helper附带了一个WebView回退(默认情况下禁用)。演示显示如何使用它。