Chrome 68 版新功能

彼特.萊奇 (Pete LePage)

還有許多功能！

我是 Pete LePage。讓我們深入探索 Chrome 68 為開發人員提供的新功能！

需要完整的變更清單嗎？詳情請參閱 Chromium 原始碼存放區變更清單。

新增至主畫面變更

如果您的網站符合新增至主畫面條件，Chrome 將不再顯示新增至主畫面橫幅。因此，您可以控制提示使用者的時機和方式。

如要提示使用者，請監聽 beforeinstallprompt 事件，然後儲存事件，並在應用程式中加入按鈕或其他 UI 元素，表示可以安裝該事件。

let installPromptEvent;

window.addEventListener('beforeinstallprompt', (event) => {
  // Prevent Chrome <= 67 from automatically showing the prompt
  event.preventDefault();
  // Stash the event so it can be triggered later.
  installPromptEvent = event;
  // Update the install UI to notify the user app can be installed
  document.querySelector('#install-button').disabled = false;
});

當使用者按一下安裝按鈕，對儲存的 beforeinstallprompt 事件呼叫 prompt() 時，Chrome 就會顯示「新增至主畫面」對話方塊。


btnInstall.addEventListener('click', () => {
  // Update the install UI to remove the install button
  document.querySelector('#install-button').disabled = true;
  // Show the modal add to home screen dialog
  installPromptEvent.prompt();
  // Wait for the user to respond to the prompt
  installPromptEvent.userChoice.then(handleInstall);
});

為了讓您有足夠的時間更新網站，當使用者首次造訪符合「新增至主畫面」條件的網站時，Chrome 就會顯示迷你資訊列。關閉後，一段時間內將不會再顯示迷你資訊列。

「新增至主畫面行為」異動提供完整詳細資料，包括可用的程式碼範例和其他內容。

Page Lifecycle API

當使用者有大量執行中的分頁時，記憶體、CPU、電池和網路等重要資源可能會超額訂閱，導致使用者體驗不佳。

如果網站在背景執行，系統可能會暫停網站以節省資源。您現在可以透過新的 Page Lifecycle API 監聽及回應這些事件。

舉例來說，如果使用者在背景中有一個分頁，瀏覽器可能會選擇暫停在該網頁上執行指令碼，以節省資源。執行這項操作前，系統會觸發 freeze 事件，讓您可關閉開啟的 IndexedDB 或網路連線，或是儲存任何未儲存的檢視畫面狀態。接著，當使用者重新聚焦分頁時，就會觸發 resume 事件，您可以在其中重新初始化任何遭刪除的項目。

const prepareForFreeze = () => {
  // Close any open IndexedDB connections.
  // Release any web locks.
  // Stop timers or polling.
};
const reInitializeApp = () => {
  // Restore IndexedDB connections.
  // Re-acquire any needed web locks.
  // Restart timers or polling.
};
document.addEventListener('freeze', prepareForFreeze);
document.addEventListener('resume', reInitializeApp);

請參閱 Phil 的 Page Lifecycle API 文章，進一步瞭解有關「多樣性」的程式碼範例，包括程式碼範例、提示等內容。您可以在 GitHub 上找到spec和說明文件。

付款處理常式 API

Payment Request API 是一種開放且採用標準的開放方式。Payment Handler API 會啟用網頁式付款應用程式，以便在付款要求體驗中直接協助付款，進一步拓展「付款要求的」範圍。

新增現有的網頁式付款應用程式，與在 supportedMethods 屬性中新增項目一樣簡單。

const request = new PaymentRequest([{
  // Your custom payment method identifier comes here
  supportedMethods: 'https://bobpay.xyz/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

如果安裝可處理指定付款方式的 Service Worker，該工作人員就會顯示在付款要求 UI 中，使用者可以用來付款。

Eiji 有一則優質貼文，說明如何在商家網站和付款處理常式中實作此方法。

還有更多獎品等著您！

以上只是 Chrome 68 中專為開發人員設計的其中幾項變更，當然還有許多其他異動。

  • 嵌入 iframe 的內容需要使用者手勢，將頂層瀏覽情境導向其他來源。
  • 自 Chrome 1 版起，grab 和 grabbing 的 CSS cursor 值已加上前置字元，因此我們現在支援標準無前置字元值。最後
  • 可說是一大問題！向 Service Worker 要求更新時，系統現在會忽略 HTTP 快取，讓 Chrome 能夠以內嵌方式反映於規格和其他瀏覽器。

開發人員工具的新功能

請務必查看 Chrome 開發人員工具的新功能，瞭解 Chrome 68 開發人員工具的新功能。

訂閱

接著，在 YouTube 頻道上按一下「訂閱」按鈕，每當我們推出新影片時，您會收到電子郵件通知。

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