Chrome 68 版新功能

Pete LePage

  • Android 上的「Add to Home Screen」行為會有所變更，讓您享有更多控制權。
  • Page Lifecycle API 會告知您分頁何時遭到暫停或還原。
  • 而 Payment Handler API 則可讓網頁式付款應用程式支援付款要求體驗。

還有更多！

我是 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 會在使用者首次造訪符合「新增至主畫面」條件的網站時，顯示迷你資訊列。關閉後，有一段時間不會再顯示迷你資訊列。

新增至主畫面行為的變更 提供完整詳細資料，包括可用的程式碼範例等。

網頁生命週期 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 上找到規格和說明文件。

付款處理常式 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' }
  }
});

如果已安裝可處理指定付款方式的服務工作站，該工作處理程序就會顯示在付款要求 UI 中，而使用者也能使用這個付款方式付費。

艾傑/艾潔有一篇實用貼文，說明如何為商家網站和付款處理常式實作這項功能。

還有更多獎品等著您！

當然，這只是 Chrome 68 針對開發人員所做的部分異動，還有更多變更。

開發人員工具的新功能

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

訂閱

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

我是 Pete LePage，當 Chrome 69 推出後，我馬上就會告訴你 Chrome 的新功能！