H5页面打包成原生App新姿势：Android Trusted Web Activity

2023-05-26 18:59:26

Trusted Web Activity：将 H5 页面提升到原生 App 体验

简介

在现代移动应用开发中，将 H5 页面打包成原生 App 的需求变得越来越普遍。虽然传统方法依赖于 WebView，但它存在性能、安全性和交互方面的限制。Trusted Web Activity (TWA) 是一种由谷歌提供的替代方案，它将 H5 页面无缝整合到原生 App 中，从而提供卓越的体验。

TWA 的优势

TWA 提供了众多优势，使其成为将 H5 页面打包的理想选择：

卓越的性能： TWA 利用优化的 Web 技术，显著提升了 H5 页面的加载速度和响应能力。
增强安全性： TWA 采用了沙箱、HTTPS 加密等多种安全措施，确保了 H5 页面的安全性和隐私性。
无缝交互： TWA 支持原生控件，如按钮、列表和输入框，实现与原生 App 一样的交互体验。
原生化体验： TWA 采用了原生 App 的 UI 风格，并提供了自定义选项，打造与原生 App 无缝衔接的体验。

实现 TWA

实现 TWA 只需以下几个步骤：

1. 添加 TWA 库

在你的 Android 项目中添加 TWA 库：

implementation 'androidx.browser:browser:1.4.0'

2. 创建 TWA 活动

创建一个继承自 CustomTabsActivity 的 TWA 活动，如下所示：

public class MyTWAActivity extends CustomTabsActivity {

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

        // 设置 TWA URL
        Uri uri = Uri.parse("https://example.com");
        CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
        builder.setToolbarColor(Color.RED);
        CustomTabsIntent intent = builder.build();
        intent.launchUrl(this, uri);
    }
}

3. 配置 AndroidManifest.xml

在 AndroidManifest.xml 文件中，将你的 TWA 活动声明为 intent 过滤器：

<activity android:name=".MyTWAActivity">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="https" android:host="example.com" />
    </intent-filter>
</activity>