使用 Google TWA 把 Web 移形换影成原生 App(二)

avatar
前端开发工程师 @阿里巴巴

作者：ICBU 王浩宇

写在最前：欢迎来到阿里巴巴 ICBU 交互&端技术前端团队专栏，我们将与你分享优质的前端技术文章，欢迎关注&交流哟！

接上文：使用 Google TWA 把 Web 移形换影成原生 App(一)

建立从 APP 到网站的关联

打开 string 资源文件 app > res > values > strings.xml 并在下面添加 Digital AssetLinks 语句：

<resources>
    <string name="app_name">Trusted Web Activity</string>
    <string name="asset_statements">
        [{
            \"relation\": [\"delegate_permission/common.handle_all_urls\"],
            \"target\": {
                \"namespace\": \"web\",
                \"site\": \"https://a.com\"}
        }]
    </string>
</resources>

更改 site 属性的内容以匹配 TWA 打开的 scheme 和 domain。

回到 AndroidManifest.xml 文件，通过在 application 标记添加新 meta-data 标记链接到该 statements ：

我们现在已经建立了从 Android APP 到网站的关联。我们可以不创建网站到 APP 的验证来调试。以下是在开发设备上测试它的方法：

启用调试模式

  1. 在开发设备上打开 Chrome，导航到 chrome://flags，在非 root 设备上搜索名为 Enable command line 的项目，然后将其更改为 ENABLED，然后重新启动浏览器。

  2. 接下来，在终端上，使用 Android Debug Bridge （随着 Android Studio一起安装），并运行以下命令：

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

关闭 Chrome 并从 Android Studio 重新启动您的应用程序。现在应该以全屏显示应用程序。

建立从网站到APP的关联

开发人员需要从 APP 拿到2条信息才能创建关联：

  • Package Name: 第一个信息是 APP 的包名称。这与创建 APP 时生成的包名称相同。可以在 Gradle Scripts > build.gradle (Module: app) 中找到 applicationId 的值。
  • SHA-256 Fingerprint: 必须签名 Android 应用程序才能上传到 Play 商店。相同的签名用于通过上传密钥的 SHA-256 在网站和 APP 之间建立连接。

Android文档 详细说明了如何使用Android Studio生成密钥。请记下密钥的路径、别名和密码，因为下一步需要用到。使用 keytool 提取 SHA-256，使用以下命令：

keytool -list -v -keystore  -alias  -storepass  -keypass

SHA-256 打印在 Certificate 中。下面是个示例输出：

keytool -list -v -keystore ./mykeystore.ks -alias test -storepass password -keypass password

Alias name: key0
Creation date: 28 Jan 2019
Entry type: PrivateKeyEntry
Certificate chain length: 1
Certificate[1]:
Owner: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Issuer: CN=Test Test, OU=Test, O=Test, L=London, ST=London, C=GB
Serial number: ea67d3d
Valid from: Mon Jan 28 14:58:00 GMT 2019 until: Fri Jan 22 14:58:00 GMT 2044
Certificate fingerprints:
   SHA1: 38:03:D6:95:91:7C:9C:EE:4A:A0:58:43:A7:43:A5:D2:76:52:EF:9B
   SHA256: F5:08:9F:8A:D4:C8:4A:15:6D:0A:B1:3F:61:96:BE:C7:87:8C:DE:05:59:92:B2:A3:2D:05:05:A5:62:A5:2F:34
Signature algorithm name: SHA256withRSA
Subject Public Key Algorithm: 2048-bit RSA key
Version: 3

得到这两条信息后，请打开 assetlinks 生成器，填写字段并点击 Generate Statement。复制生成的语句，并设置到你网站的 /.well-known/assetlinks.json 目录中。

创建图标

当通过 Android Studio 新建一个项目后，他会自带一个默认的图标。作为开发中，你希望使用一个与其他APP不同的图标。 Android Studio 有 Image Asset Studio 的功能，他可以提供必要的工具去创造一个适用于任何尺寸和像素的图标。

打开 Android Studio， 导航到 File > New > Image Asset, 选择Launcher Icons (Adaptative and Legacy)，通过提示为你的应用创建一个合适图标。

添加启动画面

在 Chrome 75 以上版本，TWA支持添加启动动画的动能，我们只需通过通过添加几张图片和设置来实现。（确保使用 Chrome 75 以上版本，并使用最新的TWA依赖库）

给启动动画添加一些图片

安卓有不同的屏幕尺寸和像素密度，为了保证启动动画适配所有设备，您需要为每个像素密度生成图像。

完全解释 支持所有像素 超出了本文的范围，但是一个例子是创建一个320x320dp的图像，它表示任何密度的设备屏幕上2x2英寸的正方形，在mdpi密度下相当于320x320像素。

从那里我们可以得到其他像素密度所需的大小。下面是一个列表，其中包含像素密度、应用于基本大小（320x320dp）的乘数、以像素为单位的结果大小以及应在Android Studio项目中添加图像的位置。

更新一些配置

首先，在Android Manifest (AndroidManifest.xml)添加 content-provider

<application>
    ...
    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="com.example.twa.myapplication.fileprovider"
        android:grantUriPermissions="true"
        android:exported="false">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/filepaths" />
    </provider>
</application>

然后，添加 res/xml/filepaths.xml资源，并且制定路径为TWA的启动动画

<paths>
    <files-path path="twa_splash/" name="twa_splash" />
</paths>

最后，在Android Manifest (AndroidManifest.xml)添加 meta-tags

<activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">
    ...
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_IMAGE_DRAWABLE"
               android:resource="@drawable/splash"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
               android:resource="@color/colorPrimary"/>
    <meta-data android:name="android.support.customtabs.trusted.SPLASH_SCREEN_FADE_OUT_DURATION"
               android:value="300"/>
    <meta-data android:name="android.support.customtabs.trusted.FILE_PROVIDER_AUTHORITY"
               android:value="com.example.twa.myapplication.fileprovider"/>
    ...
</activity>

确保启动时页面是透明的

另外，需要确保启动时页面是透明的，从而避免启动动画前出现白屏。

首先，在 res/styles.xml 添加一个新的主题：

<style name="Theme.LauncherActivity" parent="Theme.AppCompat.NoActionBar">
     <item name="android:windowAnimationStyle">@null</item>
     <item name="android:windowIsTranslucent">true</item>
     <item name="android:windowNoTitle">true</item>
     <item name="android:windowBackground">@android:color/transparent</item>
     <item name="android:backgroundDimEnabled">false</item>
 </style>

然后在Android Manifest (AndroidManifest.xml)添加对新样式的引用

<application>
    ...
    <activity android:name="com.google.androidbrowserhelper.trusted.LauncherActivity"
              android:theme="@style/Theme.LauncherActivity">
    ...
    </activity>
</application>

构建并签名你的APP

将assetlinks 存在您的网站中，asset_statements在 Android APP 中配置完成后，下一步就是生成签名的 APP。请查看 文档。

可以使用 adb 将 APK 安装到测试设备中：

adb install app-release.apk

如果验证失败，则可以使用 adb 从连接设备并电脑终端查看错误消息。

adb logcat | grep -e OriginVerifier -e digital_asset_links

bingo，生成上传 APK 后，就 可以将应用上传到 Play 商店 了。

总结

Alibaba.com版本的TWA目前已经在Amazon Play上架，他所带来的业务价值比现有的网站要高出很多，虽然离原生的APP还是有一定的差距。

另外补充一点：TWA永远不是取代原生APP的方案，他一定是通过弥补原生APP的一些不足，或者帮助原生APP去服务那些使得原生APP负重前行（安卓低版本等）的用户，对于任何技术来说，一定是相互配合实现业务价值的最大化，才是一个好的技术方案。

PS：TWA指通过Google TWA技术封装的原生APP。原生APP指通过java开发的原生APP

引用参考

developers.google.com/web/android…

www.infoq.cn/article/XTE…

juejin.cn/post/684490…

❤️ 感谢你看到最后～

阿里巴巴国际站（ICBU，Alibaba.com）是全球最大的跨境贸易和服务平台。我们时刻有新的技术挑战，有足够有趣的挑战满足你所有的好奇心和求知欲，有国外知名合作团队（Google & OpenSky）。

如果你想来 ICBU 和我一起开发前端，欢迎发简历到邮箱 shudai.lyy@alibaba-inc.com ，我们将快速响应你的面试安排。:-)

avatar
文章
阅读
粉丝