扩展Web技术和Android

原文来自: Android Developers Blog —— Extending Web Technology with Android

纸飞机开始被作为一个简单的想法 —— “如果你能够扔一个纸飞机从一个屏幕到其他屏幕?”

我们概念的核心是将来自全世界的人团结在一起,使用强有力的web —— 一种即时连接到其他的。现代化web技术,特别是JavaScript和OpenGL,在每一个屏幕上使体验更有力量。

纸飞机最初的特色是在2016 Google I/O大会上,在Keynote上连接了参会者和户外的观众长达30分钟。在2016年国际和平日公开启动,我们创建了一个Android Experiment,在Google Play上也是一大特色,充实了现有的web技术和原生的Android Nougat功能,比如当一个飞机在世界的其他地方被抓获,丰富了通知。

介绍

当用户添加一个邮编来预先填充它们的位置,创建并且折叠他们自己的飞机。一个简单的扔的手势启动飞机进入虚拟世界,用户访问桌面版网站将会看到它们的飞机进入屏幕飞行。

throw_plan-phone2desktop.gif

之后,用户能够检回,并看到他们自己的飞机已经抓住围绕着世界,在飞机上的每一个邮票读起来像一个密码,一个3D地球高亮飞行线路和已经旅行过的距离。

除了标记他们自己的飞机,用户能够手势操作他们的手机,像一个网去抓住一个从其他地方已经抛出的飞机,捏来并拧开它,表明这个地方它已经访问过了。然后他们能够添加他们自己的邮票,然后将它放回群中。

WebView

在Google I/0的台上,我们开发的纸飞机运行时范围从50英尺的屏幕跨设备运行,桌面和移动端使用了Web的最新技术。

webGL

从程式化的低多边形地球到植绒面,WebGL是采用了渲染3D元素,使之体验更有动力。我们写了自定义GLSL着色器来照亮地球,变形目标作为用户捏来打开或关闭纸时的动画。

earth_wireframe.gif

Web套接字

当用户“扔”一个飞机,一段信息是发送websockets到后端服务器,它被传递到所有的桌面电脑可视化的飞机起飞。

throw_plane-phone.gif

Web工作者

飞机群模拟跨越,使用WebWorkers多线程计算每一架飞机的位置,并传达消息返回给主线程使用WebGL呈现出来

earth_flocking.gif

要创建的伟大工程,跨平台的体验,我们扩展了Web和原生Android代码,这个能够是我们利用Android中内置Chromium,去使应用程序的视图层与已经存在的网页代码进行深度整合,加入深度整合的操作系统,比如有丰富的通知和后台服务。

如果你对学习更多有关如何桥接WebView和Java代码有兴趣,看看这个GitHub库里的教程

通知

Firebase 云端消息(FCM)使用发送推送通知到Android应用上,当一个用户的飞机已经其他人被抓住并扔出去了,一个通知会显示多少个城市和它航行的里程就会发送到这个飞机的FCM创建者设备上。传出通知去管理以确保它们不会过于频繁的发送到设备上。

后台服务

我们实现一个后台服务去一天运行一次,对本地存储检查,以确保用户上次访问的应用程序运行。如果一个用户在两周以来都没有去访问过,该应用就会发送一条通知去邀请用户回到应用中去创建一架新的飞机。

网络通讯

我们的应用运行在Google云平台的网络服务器上,对于邮票我们利用内置的地理编码头得到接近相似的位置,并套接字.IO流去连接到套接字全部服务器上的所有设备。

用户连接到他们附近的服务器,传达消息到一个单独的主服务器以及任何桌面版计算机观看该区域的经历体验。

往前看

这种方法的工作对我们来说非常好,让光滑,跨平台和外形迷人的体验,连接来自全世界的人,扩展web和原生功能已被证明是一个有价值的途径,以提供高品质的体验前进。在Android Experiments网站上你能够学习更多相关的。

以上是对Anroid 官网博客文章的翻译,如果不足,欢迎指正,谢谢。

0%