大前端技术系列：TWA技术+TensorFlow.js => 集成原生和AI功能的app
(
本文内容为melodyWxy原作，git地址：https://github.com/melodyWxy/twa-tf.js ，
首发于博客园 散场丶丶：https://www.cnblogs.com/sanchang/p/11818604.html
)
简单来讲，TWA(Trusted Web Activity 可信任的网络应用）即: 基于Chrome Custom Tabs，利用谷歌浏览器提供的api，实现强大功能的桌面应用技术。
如果说你对PWA这个概念有所了解，那么TWA的实现就相当于 PWA + 更丰富的原生API(以实现强大的原生功能)。
如果上面的描述，你依然没有清晰的认知，那么请先阅读下面的PWA和Chrome Custom Tabs介绍，然后再回过头来看这段解释。
什么是PWAPWA(Progressive Web Application)，译 渐进式网络应用程序，它起初的含义是 追求性能无限接近原生app的webapp。
现在它有了更官方的定义：PWA是一种可以提供类似于原生应用程序(native app)体验的网络应用程序(web app)。
whatever，差不多的意思。
PWA可以用来做很多事，包括在离线(offline)时应用程序能够继续运行功能(通过Service Workers技术实现)，以及作为桌面上的一个单独的app(web app)。
如果你对service workers技术尚不太了解，那么你暂时只需要知道它的作用——可以提供离线加载的功能。当然，或许你应该更深入地去学会应用它。
那么通过上述PWA的概念，我想我们可以推断出PWA的以下特性：
优化的性能(你可以通过分包按需加载等一万种方式来优化你的web应用，可以参考雅虎军规等一系列优化标准)
可以作为一个单独的app(桌面应用-native的能力)
也可以作为网页被浏览器打开(h5的能力)
离线模式(集成了Service Workers)
在线更新内容，不用下载包(h5的能力)
那么到现在为止，你应该理解了PWA是个什么东西————我们甚至可以称它为 桌面H5应用。
TWA的特性那么我们回过头来思考TWA应该具备怎样的特性，在这之前，我这里写了这样一个公式：
PWA + js Bridge(由谷歌浏览器提供的调用更底层能力的api) == TWA
这里抛出一个问题，native app和web app的最大的表现区别在哪？
我认为，是native app可以直接调用操作系统api的能力。
那么这时候，TWA的特性应当很自然地被我们推断出来：
优化的性能(你可以通过分包按需加载等一万种方式来优化你的web应用，可以参考雅虎军规等一系列优化标准)
可以作为一个单独的app(桌面应用-native的能力)
也可以作为网页被浏览器打开(h5的能力)
离线模式(集成了Service Workers)
在线更新内容，不用下载包(h5的能力)
(调用)操作系统能力集成（native的能力）
所以说 TWA是集成native-app和web-app优点的app应用技术。
于是，我们大概知道TWA是个怎样的东西了。
但是我们仍然需要继续看下面对Chrome Custom Tabs的介绍，这方面我们更容易理解后面的实现流程。
这里先放一个官方介绍链接: Chrome Custom Tabs
Chrome Custom Tabs，译 谷歌自定义标签(或者谷歌定制标签)。
某方面来讲，它跟webview所做的事情相去不远。
我们要必要了解下webview的一些特征，以便分析CCT和webview不同的应用场景：
webview的优点
展示大小可以自由控制，可以全屏幕展示，也可以只展示在一定屏幕空间内。
可方便的与 native 进行交互(webView.addJavascriptInterface => jsBridge)。
可以使用 Service workers（这个上面提到过了，这里说下微拍堂app，应用的也是webview，并且也集成了这个功能）
webview的缺点
Wevbiew 是一个独立的安全沙盒，这意味着 cookie、storage 都不会与其他浏览器中的页面共享。
（这意味着WebView不会与浏览器共享状态并会因此增加维护开销。）
在低版本的安卓系统中，webivew 是不会随着 Chrome 进行更新的。
最后，Webview 中的 API 支持是有限的，例如以下 API 在 Webview 不被支持:
web push notifications
background sync
Chrome form autofill
Media Source Extensions (MSE)
Sharing API
相较于webview，Chrome Custom Tab的特征：
优点
可让应用更好地控制其网络体验，并且无需借助WebView即可在本机内容和网络内容之间无缝切换；
可让应用自定义Chrome的外观和风格；
应用可以更改以下内容：
工具栏颜色
输入和退出动画
将自定义操作添加到Chrome工具栏，溢出菜单和底部工具栏
Chrome自定义标签还允许开发人员预先启动Chrome并预取内容，以加快加载速度。(这是一个强大的功能，提供的warmup函数, 可以预先解析DNS。尽管html5标准里也有所实现:pre-xx属性。)
缺点