Chrome 61 版新功能

Pete LePage

  • Chrome 61 現已原生支援 JavaScript 模組，統一了模組化 JavaScript 的編寫方式。
  • 您現在可以使用 navigator.share 觸發原生 Android 分享對話方塊。
  • WebUSB API 已推出，可讓網頁應用程式存取使用者允許的 USB 裝置。
  • 還有更多功能！

如需完整的變更清單，請查看 Chromium 原始碼存放區變更清單。

我是 Pete LePage讓我們一起來看看 Chrome 61 版為開發人員帶來哪些新功能！

JavaScript 模組

Chrome 61 透過 <script type="module"> 元素新增了對 JavaScript 模組的原生支援。這樣一來，Chrome 就能並行擷取細微依附元件，充分利用快取功能，避免網頁中出現重複項目，並確保指令碼以正確順序執行。

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

這個標準化模組系統會統一模組化 JavaScript 的編寫方式，並將其傳送至網路瀏覽器。日後，Node 也會提供相同的系統，讓您更輕鬆地編寫及部署同構 JavaScript。

您可以透過下方連結進一步瞭解模組影響的模組和 JavaScript 的層面。

Web Share API

如要方便使用者在他們常用的社群網路上分享您的內容，您必須針對每個社交網路，將分享按鈕整合至您的網站。這會讓網頁變得臃腫，且不一定適合您的使用者介面，而且您必須加入第三方網站的程式碼。

目前在 Chrome 適用於 Android 裝置上推出的 Web Share API 可讓您叫用使用者裝置的原生分享功能，讓使用者輕鬆透過任何已安裝的原生應用程式分享文字或連結！

在日後推出的版本中，這個 API 也能分享至已安裝的網頁應用程式。如要使用這項功能，請呼叫 navigator.share，並提供您要分享的頁面詳細資料，系統會處理其餘的作業。


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

請參閱 Paul 的 WebShare API 更新，瞭解完整詳細資料和應遵循的部分最佳做法。

WebUSB

大多數硬體周邊裝置 (例如鍵盤、滑鼠、印表機和遊戲控制器) 都支援高階網路平台 API。不過，在瀏覽器中使用專門的教育、科學、工業或其他 USB 裝置一直很困難，通常需要專門的驅動程式。

Chrome 現在支援 WebUSB API，可在使用者同意後，讓網頁應用程式與 USB 裝置通訊。如要進一步瞭解安全性和隱私權注意事項，以及如何解決這些問題，請參閱 WebUSB 規格。

接著，當您準備深入瞭解時，請參閱 François 的 WebUSB 更新文章。

還有更多獎品等著您！

  • 您現在可以使用 scroll-behavior CSS 屬性指定捲動流暢度。
  • CSS 十六進位顏色值現在可以在字串結尾加上數字，藉此指定 Alpha 透明度。
  • 您可以使用 Visual Viewport API 存取螢幕內容的相對位置，以更直接的方式提供捏合縮放等複雜功能。

以上只是 Chrome 61 開發人員版的部分變更。

接著訂閱我們的 YouTube 頻道，就能在新影片推出時收到電子郵件通知。

我是 Pete LePage，Chrome 62 版一推出，我就會在這裡告訴你 Chrome 的新功能！