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

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

作者：ICBU 王浩宇

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

背景

对于alibaba.com来讲，随着ICBU全球买，全球卖战略的迅速发展，弱网弱地区的用户日益增多，其中印度地区用户已经超过美国地区用户成为网站最大的用户来源。但这部分用户的网络差、机型差、内存小，下载并保留APP对他们的来讲成本较高，本着客户第一的精神，我们需要思考，如何才能让用户既能在应用市场下载我们的APP并产生持续转化，又能保证用户在浏览网站的体验是较好的。

那么这里就有几点需要考虑的：

  • 体验是较好的
  • 原生APP体积足够小
  • 开发成本和维护成本需要尽可能的低

根据以上几点诉求，目前来看最好的方式就是把符合PWA规范（体验好）的WEB网站（开发和维护成本低）封装为一个独立的可上架应用市场的原生APP（体积小）。

效果展示

PWA是什么

PWA（Progressive web apps，渐进式 Web 应用），指运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序，使其具有与原生应用相同的用户体验优势。

主要包含以下能力（PWA具体怎么实现不是本文的重点，大家可以参阅MDN上面的文档。）：

  • APP shell
  • service worker
  • web 存储
  • index DB
  • 将网站添加到桌面
  • 消息推送和通知
  • 离线访问

总之，通过使用PWA能力的网站，会让用户的在浏览网站中的体验更加顺畅，更加具有native的感觉。

WEBVIEW/CCT/TWA的区别

webview

一般来讲，在安卓开发中，可以通过webview的方式很好的承担web的展示，但他的局限性也很明显，webview并不是一个浏览器，如果我们想要实现一部分浏览器的能力的话，需要我们在端上独立开发，且无法享受到浏览器升级给我们带来的便捷性。

CCT（Chrome Custom Tabs）

为了解决webview上述的一些问题，Google 推出了CCT（Chrome Custom Tabs）的技术，他可以在native内使用用户手机的浏览器的特性去渲染网站。但他也有一个关键性的限制，就是会在顶部有一个地址栏的显示，这样的体验就会让用户感觉不是在native中。

TWA（Trusted Web Activities ）

为了解决CCT的问题，Google推出了新的技术体系：TWA（Trusted Web Activities ），TWA是集成 Web 应用的新方法，可以通过基于 Custom Tabs 的协议将 PWA 应用和 Android app 进行集成。通过使用 Digital AssetLinks 的方式对网站和native进行鉴权，保证双方的开发者是相同的，这样变可以隐藏CCT中的地址栏，使得网站更加native化。

怎么实现TWA

通过上图我们可以看到TWA拥有了非常多的优点，他不仅可以全屏展示网站内容，还可以共享Chrome的存储，使用最新的Chrome API且不需要native的开发能力。另外，他还有一个最大的优点就是，实现成本很低（前提是网站已经支持了PWA）。

所有需要做的事情如下，且我会在本文中，全部介绍完：

1.拿到通过Lighthouse认证的PWA图标

2.初始化项目

3.建立网站和TWA的互信关系（为了隐藏地址栏）

4.构建并签名你的APP

拿到通过Lighthouse认证的PWA图标

运行 Lighthouse 的方式有两种：1.作为 Chrome 扩展程序运行，2.作为命令行工具运行。 Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。 命令行工具允许您将 Lighthouse 集成到持续集成系统。我们今天来介绍下如何通过Chrome 扩展程序运行。

  • 下载 Google Chrome 52 或更高版本。
  • 安装 Lighthouse Chrome 扩展程序。
  • 点击 Chrome 工具栏上的 Lighthouse 图标（如果没有看到此图标，它可能隐藏在 Chrome 的主菜单中。）
  • 在需要分析的页面中，点击此图标，再点击 Generate report 按钮
  • 稍等片刻，变可以得到当前页面的报告

拿到报告后，我们遍可以看到当前页面有那些需要优化的点，对应的修改方案，报告中都会有完整的方案，我们只需要按照方案解决即可。

初始化项目（以下为官网译文和总结）

新建项目

当新建 Trusted Web Activities 时，项目必须为 API 16 或更高版本。

  • 打开 Android Studio并点击 Start a new Android Studio project选项。

  • Android Studio 将提示您选择 Activity 类型。由于 TWA 使用 support 库提供的 Activity，因此选择 Add No Activity 并点击 Next。以下是每个字段的简短描述：

  • Name: Android 桌面 上的应用程序名称 。

  • Package Name: Play 商店和 Android 设备上 Android 应用程序的唯一标识符。 有关为 Android 应用程序创建程序包名称的要求和最佳实践的请查看 文档。

  • Save location: Android Studio 将在电脑中创建项目的目录。

  • Language: 该项目不需要编写任何 Java 或 Kotlin 代码。选择 Java 作为默认值。

  • Minimum API Level： support 库至少需要 API 16。选择 API 16 以上的版本。

  • 忽略其他选项，然后点击 Finish。

获取 TWA 依赖库

为了设置TWA依赖库，你需要编辑几个文件。

首先找到 APP 目录下的 build.gradle（Trusted Web Activities 库使用 Java 8 功能 ，首先启用 Java 8。在 android 下添加 compileOptions 配置）

android {
        ...
    compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
    }
}

下一步将 TWA Support 库添加到项目中。向 dependencies 添加新的依赖：

dependencies {
   implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:d08e93fce3'
}

Android studio将会请求询问是否需要同步项目，点击 Sync Now 来同步项目。

启动 TWA Activity

通过编辑 Android App Manifest 来实现设置 TWA activity 。

在 Project Navigator 上，展开 app 部分，然后展开 manifests 并双击 AndroidManifest.xml 打开文件。

因为我们在创建项目时没有添加任何 Activity，因此 manifest 为空且仅包含 application 标记。

通过在 application 标记中插入 activity 标记来 添加 TWA Activity：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.twa.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">
        <activity
            android:name="com.google.androidbrowserhelper.trusted.LauncherActivity">

           <!-- Edit android:value to change the url opened by the Trusted Web Activity -->
           <meta-data
               android:name="android.support.customtabs.trusted.DEFAULT_URL"
               android:value="https://airhorner.com" />

           <!-- This intent-filter adds the Trusted Web Activity to the Android Launcher -->
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>

           <!--
             This intent-filter allows the Trusted Web Activity to handle Intents to open
             airhorner.com.
           -->
           <intent-filter>
               <action android:name="android.intent.action.VIEW"/>
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE"/>

               <!-- Edit android:host to handle links to the target URL-->
               <data
                 android:scheme="https"
                 android:host="airhorner.com"/>
           </intent-filter>
        </activity>
    </application>
</manifest>

添加到 XML 的标记是标准的 Android App Manifest。Trusted Web Activities 有两个相关信息：

  • meta-data 标记告诉 TWA 活动打开哪个 URL 。修改 android:value 为你要打开的 PWA 页面的 URL。示例为 https://airhorner.com。
  • 在第二个 intent-filter 标签允许 TWA 拦截 Android Intents 打开 https://airhorner.com。该 android:host 内部属性 data 标签必须指向被 TWA 打开的 网址。

建立网站和TWA的互信关系（隐藏地址栏）

Trusted Web Activities 需要在 Android 应用程序和网站之间建立关联以删除 URL 栏。此关联是通过 Digital Asset Links 创建的， 必须用两种方式建立关联：从 APP 链接到网站 ， 从网站链接到 APP。也可以将 APP 设置为网站验证，并设置 Chrome 以跳过网站到 APP 验证，以进行调试。

avatar
文章
阅读
粉丝