Chrome 89 开启 Web 应用的物联网时代

简介: 3月初刚发布的Chrome 89,带来了哪些有意思的新特性呢?
作者 | 寒雁Talk

image.png
3月初刚发布的Chrome 89,带来了哪些有意思的新特性呢?

背景

十多年来,Web技术突飞猛进,这其中,Chrome功劳是最大的,可以说没有之一。

现在,Chrome已经不只是一个简单的浏览器,而是一个决定Web技术发展方向的平台型产品,它的地位可能仅次于Linux、iOS、Andirod和Windows。重要的是,Chrome并没有停下创新的脚步,一直在推动Web技术往前发展。

一直以来,Chrome每隔 6 周发布一个新版本。最近,Chrome宣布将会加快这个发布流程,改为每 4 周发布一个新版本。身处大前端这个领域,了解Chrome的发展可以帮助我们理解整个行业的发展趋势。

Chrome最值得关注的新特性有2个方向:

  • 新的能力,新的API,比如Web NFC这种,可以用在实际的应用场景中,带来业务上的创新;
  • 安全及隐私方面的规则修改,比如禁用第三方Cookie,会影响到业务的稳定性;

这篇文章,我将对Chrome的新版本进行解读,分享一些自己也许并不成熟的思考。

TL;TR

先简单总结一下:

  • Chrome 89是哪天发布的?2021-03-02
  • 在哪可以查看Chrome的版本信息?Chrome Platform Status
  • Chrome 89更新了多少个特性?30个,具体有哪些特性可以查看Chrome Platform Status
  • Chrome 89最大的亮点是什么?Web NFC、WebHID以及Web Serial API,这3个特性使得Web应用可以更加便捷地与硬件进行交互,JavaScript或成为物联网时代的最大赢家。
  • 我感兴趣的新特性依次有哪些?

    • Top-level await
    • Web NFC
    • WebHID
    • Web Serial API
    • performance.measureUserAgentSpecificMemory()
  • 你感兴趣的新特性依次有哪些?这个我就不知道了啊,欢迎留言评论!

这里,必须点赞Chrome Platform Status这个站点,它把Chrome每一个版本的每一个特性都整理得非常清楚。而我做的事情,无非是做个勤劳的搬运工就好了~
image.png

详细解读

30个新特性我无法一一介绍,那我就挑5个还比较有意思的特性来聊聊吧,对其他特性感兴趣的话,可以看看Chrome Platform Status。

Top-level await

作为一个JavaScript程序员,Async/Await是我最喜欢的特性之一,把我从Promise.then的地狱中解脱出来。爱屋及乌,Top-level await也很妙啊。

下面这个html,在Chrome 88上会报错:"Uncaught SyntaxError: Unexpected reserved word",在Chrome 89上则可以正确执行。这是因为Chrome 89的V8引擎升级到了V8.9,支持了Top-level await。

<!DOCTYPE html>
<head>
  <title>Top-level await</title>
</head>
<body>
  <script type="module">
    await Promise.resolve(alert('hello, world!'));
</script>
</body>
AI 代码解读

以前,await只能在async函数中使用,现在无须async函数也可以使用了,可以应用在数据库连接初始化等场景,更加方便:

const connection = await dbConnector();
AI 代码解读

值得注意的是,Top-level await只能在ES Module中使用。并且,使用Top-level await的话,会对ES Module的执行顺序造成影响,阻塞使用了Top-level await的Module及其父节点(parent module)的执行。

Top-level await这个提案曾在社区中引起很大的争议,后来提案修改之后,不再阻塞兄弟节点(sibling module)的执行,现在顺利进入Stage 3,也是不容易啊。

Web NFC

NFC是Near Field Communication的缩写,中文名为"近场通信",可以用在移动支付、门禁等场景。

Chrome 89的Andriod版本默认开启了Web NFC,这为Web应用又拓展一大应用场景。

下图这个Demo还是很有意思的,手机靠近卡片就能通过NFC识别卡片的颜色。

640 (2).gif

传说中不可能实现的需求:根据手机壳的颜色修改UI颜色,这不就实现了嘛,哈哈。

Chrome推动Web技术走向各个应用场景的努力,再下一城。NFC的使用场景大多都挺简单的,为了这个去开发原生应用似乎有点杀鸡用牛刀,Web技术可能是更好的选择。在支付、门禁、票务、地铁公交等需要刷卡的场景,Web应用都有了用武之地。

WebHID

HID的全称是Human Interface Devices,不太好翻译,看来Google的同学们造词能力也很厉害。HID其实就是各种各样的输出输出设备。很多设备由于太新、太旧、太少见或者缺乏标准,所以系统很难使用,WebHID API使得这些设备可以更方便地与Web应用进行交互。

其实,HID主要指的就是游戏手柄,因为游戏手柄的标准化做的还不够好。

Demo中有点实际价值的也就PlayStation和Switch的案例,果然还是利好游戏宅...

大家可以感受一下,用Switch的Joy-Con手柄怎么玩Chrome的恐龙游戏,可以说非常魔性了....断网的时候大家又多了一个锻炼身体的新姿势...

640 (3).gif

当前,线下游戏厅里面的游戏界面都挺古老的,还停留在上个世纪,与线上游戏存在代际差距,亟待升级,如果采用Web技术来开发,研发成本更低,兼容性更好,现在也可以方便地与游戏手柄进行交互了,应该是一个值得尝试的领域。

Web Serial API

串行接口(Serial port),主要用于串行式逐位数据传输,打印机、单片机等设备都是通过串行端口与计算机连接的。

串行设备(Serial device)可以通过串行接口、模拟串行接口的USB接口或者蓝牙连接计算机。Web应用则可以通过Web Serial API与串行设备进行通信。

下图是BBC micro:bit,是用于教育场景的单片机,它有一个MicroUSB接口,可以连接电脑。Google Developer codelab给的一个案例,就是使用Web Serial API在micro:bit上展示一个心形图像。
image.png
这几年少儿编程挺火的,让小朋友单纯地写代码其实挺无聊的,如果能结合类似于BBC micro:bit这样的硬件设备,让小朋友们看到真正的效果,哪怕是简单的LED灯控制,应该可以更好的激发小朋友们的兴趣。而Web技术天然的低门槛、跨平台的特性,还挺适合教育这个场景的。

performance.measureUserAgentSpecificMemory()

Chrome 89新增了performance.measureUserAgentSpecificMemory()接口,用于测量页面的内存使用量。

如果我们直接在控制台执行performance.measureUserAgentSpecificMemory(),则很可能会报错:

Uncaught (in promise) DOMException: Failed to execute 'measureUserAgentSpecificMemory' on 'Performance': performance.measureUserAgentSpecificMemory requires cross-origin isolation.
AI 代码解读

这是因为performance.measureUserAgentSpecificMemory()只能在启用了cross-origin isolated的页面中执行,这样做是为了安全。

名字这么长的API还是头一次见,还不让人用,不讲武德啊...

为了测试,我写了个简单的Egg应用:

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.set('Cross-Origin-Embedder-Policy', 'require-corp');
    ctx.set('Cross-Origin-Opener-Policy', 'same-origin');
    ctx.body = 'hi, egg';
  }
}

module.exports = HomeController;
AI 代码解读

Header中返回下面的值即可:
image.png
这时在控制台就可以执行performance.measureUserAgentSpecificMemory()了

await performance.measureUserAgentSpecificMemory();
AI 代码解读

performance.measureUserAgentSpecificMemory()是在浏览器执行垃圾回收的时候度量页面的内存使用量:

{
    "breakdown": [
        {
            "attribution": [],
            "bytes": 0,
            "types": []
        },
        {
            "attribution": [
                {
                    "scope": "Window",
                    "url": "http://127.0.0.1:7001/"
                }
            ],
            "bytes": 191222,
            "types": []
        },
        {
            "attribution": [],
            "bytes": 786305,
            "types": [
                "Shared"
            ]
        }
    ],
    "bytes": 977527
}
AI 代码解读

一个Hello World页面用了900KB内存,比尔盖茨哭晕在厕所里面...

总结

Chrome 89最大的亮点Web NFC、WebHID以及Web Serial API这3个特性,它们其实是在做同一件事情,让Web应用突破页面本身,可以更加便捷地与硬件进行交互,JavaScript有望成为物联网时代的一等公民。

本文中介绍的Web NFC、WebHID以及Web Serial API的Demo案例都还有点意思,不过都稍显稚嫩,不过这也意味着这方面的应用还刚刚开始,未来的想象空间很是挺大的。文章中,我聊到了它们在支付、门禁、票务、交通、游戏以及教育方面的应用场景,应该还有更多值得大家探索的场景,想想还是挺有意思呢。

WebHID以及Web Serial API有啥区别呢?关于这一点,我还没有研究清楚,感兴趣的同学可以关注一下我在GitHub提的issue:What are the differences between WebHID and Web Serial API?

Web NFC、WebHID以及Web Serial API都属于Chrome的capabilities project,其目标在于消除Web应用与原生应用之间的差距,让Web应用可以做任何iOS、Andriod以及桌面应用可以做的事情。这个目标看起来有些挑战性,但是也没有什么不可能的,10年前,你能想象Web应用可以发展到今天这个程度吗?那10年后会怎么样呢?让我们拭目以待吧!

其他相关文章:第三方cookie马上就不让用了,互联网广告还怎么玩?

欢迎交流:hanyan.lk@alibaba-inc.com


image.png

相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台,通过云产品流转到函数计算FC,调用钉钉群机器人API,实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
目录
打赏
0
0
0
0
12423
分享
相关文章
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
​MCP协议深度解析:原理、应用与物联网时代的机遇-优雅草卓伊凡
​MCP协议深度解析:原理、应用与物联网时代的机遇-优雅草卓伊凡
316 40
​MCP协议深度解析:原理、应用与物联网时代的机遇-优雅草卓伊凡
Web端实时通信技术SSE在携程机票业务中的实践应用
本文介绍了携程机票前端基于Server-Sent Events(SSE)实现服务端推送的企业级全链路通用技术解决方案。文章深入探讨了 SSE 技术在应用过程中包括方案对比、技术选型、链路层优化以及实际效果等多维度的技术细节,为类似使用场景提供普适性参考和借鉴。
65 7
docker快速部署OS web中间件 数据库 编程应用
通过Docker,可以轻松地部署操作系统、Web中间件、数据库和编程应用。本文详细介绍了使用Docker部署这些组件的基本步骤和命令,展示了如何通过Docker Compose编排多容器应用。希望本文能帮助开发者更高效地使用Docker进行应用部署和管理。
137 19
|
4月前
|
工业物联网关应用:PLC数据通过智能网关上传阿里云实战
本文介绍如何使用智能网关将工厂PLC数据传输至阿里云平台,适合中小企业远程监控设备状态。硬件准备包括三菱FX3U PLC、4G智能网关和24V电源。接线步骤涵盖PLC编程口与网关连接、运行状态检测及天线电源接入。配置过程涉及通讯参数、阿里云对接和数据点映射。PLC程序关键点包括数据上传触发和温度值处理。阿里云平台操作包含实时数据查看、数据可视化和规则引擎设置。最后提供常见故障排查表和安全建议,确保系统稳定运行。
315 1
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
303 17
使用Web浏览器访问UE应用的最佳实践
新技术趋势与应用:物联网与虚拟现实的未来发展###
随着科技的迅猛发展,物联网(IoT)和虚拟现实(VR)已成为引领未来的重要技术趋势。本文旨在探讨这两项新兴技术的发展趋势和应用场景,通过分析当前技术现状、挑战及未来前景,揭示物联网和虚拟现实在各领域的潜在影响和应用价值。研究表明,物联网在智能家居、智慧城市、工业自动化等方面具有广泛的应用前景;而虚拟现实则在游戏娱乐、教育培训、医疗健康等领域展现出巨大的潜力。本文认为,随着技术的不断进步,物联网和虚拟现实将深度融合,为社会经济发展带来新的机遇和挑战。 ###
419 59
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
205 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
揭秘区块链技术在物联网(IoT)安全中的革新应用
揭秘区块链技术在物联网(IoT)安全中的革新应用

物联网

+关注

相关产品

  • 物联网平台
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等

    登录插画

    登录以查看您的控制台资源

    管理云资源
    状态一览
    快捷访问