大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app (2)

基于谷歌浏览器嘛,所以必须依赖谷歌浏览器打开。
自Chrome 45中,Chrome的自定义选项卡现已全面上市,给所有用户 的Chrome,在所有Chrome的支持的Android版本(杰利贝恩起)。

Chrome Custom Tabs的应用场景

(这部分内容来源于上面的官方链接)

如果您要在应用程序中托管自己的内容,则WebView是很好的解决方案。如果您的应用将用户定向到您域外的URL,则出于以下原因,我们建议您使用Chrome自定义标签:

易于实现。无需构建代码即可管理请求,权限授予或cookie存储。

用户界面自定义:

工具栏颜色

动作按钮

自定义菜单项

自定义输入/输出动画

底部工具栏

导航意识:浏览器在外部导航时向应用程序提供回调。

安全性:浏览器使用Google的安全浏览来保护用户和设备免受危险站点的侵害。

性能优化:

在后台预热浏览器,同时避免从应用程序中窃取资源。

预先向浏览器提供可能的URL,这可能会执行推测性工作,从而加快页面加载时间。

生命周期管理:浏览器通过将应用程序的重要性提高到“前景”级别,从而防止应用程序被系统驱逐。

共享的cookie jar和权限模型,因此用户不必登录到他们已经连接的站点,也不必重新授予他们已经授予的权限。

如果用户打开了Data Saver,他们仍然会从中受益。

跨设备同步自动完成,以更好地完成表格。

简单的定制模型。

轻按一下即可快速返回到应用程序。

您想在Lollipop之前的设备(自动更新WebView)上使用最新的浏览器实现,而不是较旧的WebView。

TWA技术

当我们了解了 Chrome Custom Tabs,那么我们就很容易理解TWA技术所做的事情了:

基于Chrome Custom Tabs,隐藏掉地址栏的PWA应用,即为TWA。

你看多简单。
附上官方文档: TWA官方文档

TWA应用的具体实现流程

那么,介绍完TWA,那么我们就讲讲它的实现流程,并且去配合我们的工具和代码去实现它。

实现TWA,我们不需要编写Java代码,但需要Android Studio这个工具。

这里直接附上官方文档:

Android Studio 下载地址

Android Studio 安装文档
注意: 这个工具包(安卓原生编译器)还是挺大的,mac版的700多m。调试方案一般有两种,第一种下载安装虚拟机(包比较大)进行效果预览,第二种直接USB连接真机调试。在下方贴出的Android Studio官方用户指南链接里,有更具体的调试方式。

ok,在download的过程中,泡杯咖啡或者泡杯茶,然后打开下方的官方链接了解一下它吧:

Android Studio官方用户指南

创建TPA应用

那么,如果你已经下载并安装完毕,那么我们将真正意义上进入开发流程。

值得一提的是:依赖Android Studio这个工具,以及几个写死的配置项,让我们可以屏蔽掉安卓原生层进行TPA的内容开发。但是如果想更深层地掌握TWA技术的话,那么还是需要多了解下安卓原生开发。

当然,在这里我们并不需要去做这些事。用熟悉的技术,屏蔽不熟悉的技术,完成其他端的内容开发,正是混合开发的意义所在。

那么,请仔细按照下方的步骤逐渐实现:


这是官方文档的中文翻译最好的一版。

你可能会遇到以下问题:

adb命令无法使用 => 安装并配置path
亲测嵌过内容w.weipaitang.com(微拍堂官方网站),真机上性能非常强大。

[这里是个标记:演示整个整个步骤流程] TensorFlow.js (tf.js)

TensorFlow.js是TensorFlow在js的实现。

而TensorFlow则是AI > 机器学习 > 深度学习 的一个框架。(后者是前者的子集)

以下内容均来自于下文:

深度学习

我们先来了解下 AI、机器学习、深度学习这三个概念:

简单来讲, AI 就是我们所说的 人工智能领域;

而 机器学习 是属于 实现 AI 的一种策略;

而 深度学习 是属于 实现 机器学习 的一种方式;

用一张图片来表达是这样的:

大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

如上图可见,深度学习是机器学习的一个分支,而机器学习是AI的一个分支。

我们再简单了解下它们的学术性概念和相关方法论。

什么是机器学习

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyygyd.html