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 可能很難理解。這個函式可以處理所有「lovely」回呼:

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 發表了一則絕佳文章:Async 函式 - 讓承諾內容友善並附上所有細節。

永久儲存空間

永久儲存空間來源試用已結束。您現在可以將網路儲存空間標示為永久性,防止 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 自動連字號

CSS 自動連字號是 Android 和 Mac 現已支援 Chrome 最常要求的版面配置功能之一。

Web Share API

最後,使用新的 Web Share API 做為來源試用,更輕鬆地叫用原生共用功能。Paul (先生網路意圖) Kinlan 的「Navigator Share」(導覽工具分享) 一文提供了所有詳細資訊。

正在關閉

以上僅列出 Chrome 55 中專為開發人員設計的其中幾項變更,

如要隨時掌握 Chrome 的最新消息和後續內容,請務必訂閱並觀看 Chrome 開發人員高峰會影片,深入瞭解 Chrome 團隊正在進行的精彩傑作。

我是 Pete LePage,當 Chrome 56 推出後,我會馬上介紹 Chrome 的新功能!