Chrome 55 的新功能

在 YouTube 上观看

  • asyncawait 允许您像编写同步代码一样编写基于 promise 的代码,同时又不会阻塞主线程。
  • 指针事件提供了一种统一的方式来处理所有输入事件。
  • 添加到主屏幕的网站会自动获得永久性存储空间权限。

还有许多其他功能。

我是 Pete LePage。以下是 Chrome 55 中面向开发者的新功能!

指针事件

曾经,指向网络上的事物很简单。您有一个鼠标,它四处移动,有时会按下按钮,仅此而已。但在这方面的表现并不稳定

触摸事件是很好的做法,但为了支持触摸鼠标,您必须支持两种事件模型:

elem.addEventListener('mousemove', mouseMoveEvent);
elem.addEventListener('touchmove', touchMoveEvent);

Chrome 现在通过分派 PointerEvents 实现统一的输入处理:

elem.addEventListener('pointermove', pointerMoveEvent);

指针事件统一了浏览器的指针输入模型,将轻触、触控笔和鼠标集中到一组事件中。IE11、Edge、Chrome 和 Opera 支持加载动画,在 Firefox 中部分支持

如需了解详情,请参阅指明未来的方向

asyncawait

异步 JavaScript 可能难以推断。使用此函数及其所有“可爱”回调:

function logFetch(url) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('xhr failed', xhr.statusText);
      }
    }
  };
  xhr.onerror = function (e) {
    console.error(xhr.statusText);
  };
  xhr.open('GET', url);
  xhr.send();
}

使用 promises 重写它有助于避免嵌套问题:

function logFetch(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      console.log(text);
    }).catch(err => {
      console.error('fetch failed', err);
    });
}

但是,当存在长串的异步依赖项时,基于 Promise 的代码仍然可能难以读取。

Chrome 现在支持 asyncawait JavaScript 关键字,让您能够编写基于 Promise 的 JavaScript,这些 JavaScript 可以采用同步代码的形式进行结构化且可读取。

相反,我们的异步函数可以简化为:

async function logFetch(url) {
  try {
    const response = await fetch(url);
    console.log(await response.text());
  }
  catch (err) {
    console.log('fetch failed', err);
  }
}

Jake 发布了一篇精彩的博文:异步函数 - 让 promise 变得友好,其中包含所有细节。

永久性存储

永久性存储源试用现已结束。您现在可以将 Web 存储标记为永久性,防止 Chrome 自动清除网站的存储空间。

if (navigator.storage && navigator.storage.persist) {
  navigator.storage.persist().then(granted => {
    if (granted)
      alert("Storage will not be cleared except by explicit user action");
    else
      alert("Storage may be cleared by the UA under storage pressure.");
  });
}

此外,对于互动度较高的网站、已添加到主屏幕或启用了推送通知的网站,系统会自动向其授予持久性权限。

如需了解完整详情以及如何为您的网站请求永久性存储空间,请参阅 Chris Wilson 的永久性存储博文。

CSS 自动断字

Android 和 Mac 现在支持 CSS 自动断字功能,这是 Chrome 用户请求次数最多的布局功能之一。

Web Share API

最后,您现在可以更轻松地调用以源试用形式提供的新 Web Share API 调用原生共享功能。Paul(网络意图先生)Kinlan 在他的导航器分享博文中提供了所有详细信息。

正在关闭

以上只是 Chrome 55 中面向开发者的多项变更。

如果您想及时了解 Chrome 的最新动态并了解即将推出哪些新功能,请务必订阅,并务必观看 Chrome 开发者峰会的视频,深入了解 Chrome 团队正在做的一些精彩工作。

我叫 Pete LePage