Chrome 61 里的新玩意!

1 年前

本文翻译自 New in Chrome 61,有部分增减。

大家好,我是 Pete LePage,让我们一起来看看 Chrome 61 给开发者带来了哪些新东西!

JavaScript Module

Chrome 61 加入了对 JavaScript Module <script type="module"> 的原生支持。Chrome 现在可以并行地获取颗粒化的依赖模块,利用浏览器缓存的优势,在多个页面之间共享模块,并且可以保证脚本按照正确地顺序执行。

<script type="module">
  import {addText} from './utils.js';
  addText('Modules are pretty cool.');
</script>

这个标准统一了 JavaScript 模块书写和分发给浏览器的方式。在可见的未来,同样的模块系统将会出现在 Node 上。Isomorphic JavaScript 的编写和分发就变得更简单!

译注:Node 8.5.0 发布,已经可以使用了,更多可以看Using ES modules natively in Node.js

Web Share API

为了让用户把他们喜欢的内容分享到网络上,不得把所有的社交按钮在自己的网站上添加一遍。这让页面变得很臃肿,很可能这些分享按钮和网站的视觉不匹配,并且还要添加来自第三方的代码。

现在,Android 版的 Chrome 新增了 Web Share API,该 API 可以直接调用原生的分享功能,用户可以很方便的将自己喜欢的文本和链接分享到其他原生 App 上了!

web-share_framed.png

在之后的版本中,这个 API 还能分享到已安装的 web app 中。直接调用 navigator.share 方法,传递相关的参数,就可以发起分享。其他事情系统会帮你搞定。

navigator.share({
  title: document.title, text: 'Hello',
  url: window.location.href
}).then(() => {
  console.log('Successful share');
});

查看Paul 的新文章 WebShare API 了解更全面的信息,还有一些使用的最佳实践可以学到。

WebUSB

很多电脑的周边硬件在 Web 平台上都有对应的 API,比如键盘、鼠标、打印机和手柄等等。但是,想要在浏览器中使用某些特殊的用于教育、科研、工业等等 USB 设备很困难,通常需要特殊的驱动才行。

现在 Chrome 提供了 WebUSB API,在用户授权后,Web 应用可以直接可 USB 设备通信。了解更多关于安全和隐私的考量,WebUSB 规范 拿走不谢。

usb-device-chooser.png

然后如果已经准备深入了解一番,可以看看 Francois 关于 WebUSB 的文章。

更多东西!

  • 使用 CSS scroll-behavior,可以设置更流畅的滚动效果;
  • CSS hex color 支持在末尾添加透明参数,例如:#33AA3388 /* 50% opaque green */;
  • 可以使用 ViewportAPI 获取屏幕内容的相对位置,把像双指缩放这样复杂的功能以一种更直接的方式暴露出来。

这些还不是 Chrome 61 更新的全部,更多的内容可以订阅 YouTube 上的频道

0
推荐阅读