Chrome 61 版新功能

Pete LePage

Twitter GitHub Glitch Mastodon 首頁

• 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 層面。

• Chrome 狀態
• 瀏覽器中的 ES 模組
• 深入解析 ES6 模組

Web Share API

如果您希望使用者能夠輕鬆在他們最喜歡的社群網路上分享您的內容，您需要將分享按鈕整合至各個社交網路的網站。這會為您的網頁增添更多內容，但不一定能完美配合您的使用者介面，也就是說，您必須加入第三方網站的程式碼。

現已在 Chrome for 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 Update，瞭解應遵循的一些最佳做法，並您應遵循的一些最佳做法。

WebUSB

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

Chrome 現在支援 WebUSB API，可在使用者表示同意後，允許網頁應用程式與 USB 裝置進行通訊。如要進一步瞭解安全性和隱私權注意事項，以及相關問題解決方式，請參閱 WebUSB 規格相關文章。

接著，當您準備好深入瞭解相關資訊時，請查看 Francois 的 WebUSB 文章。

還有更多獎品等著您！

• 您現在可以使用 scroll-behavior CSS 屬性，指定捲動流暢度。
• CSS 十六進位顏色值現在可以在字串結尾加入數字，以指定 Alpha 透明度。
• 您可以使用 Visual Viewport API 存取畫面內容的相對位置，以更直接的方式公開雙指撥動及縮放等複雜功能。

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

接著訂閱我們的 YouTube 頻道。每當我們推出新影片時，您會收到電子郵件通知。

我是 Pete LePage，當 Chrome 62 推出後，我會馬上通知您，也就是 Chrome 的新功能！