本頁面由 Cloud Translation API 翻譯而成。

Chrome 102 新功能

Pete LePage

以下是一些注意事項：

已安裝的 PWA 可註冊為檔案處理常式，讓使用者輕鬆直接從磁碟開啟檔案。
inert 屬性可讓您將 DOM 的部分標示為無效。
Navigation API 可讓單頁應用程式更輕鬆地處理導覽和網址更新作業
還有許多其他功能。

我是 Pete LePage讓我們深入瞭解 Chrome 102 版為開發人員提供的新功能。

File Handling API

檔案處理 API 可讓已安裝的 PWA 向作業系統註冊為檔案處理程式。註冊完成後，使用者只要按一下檔案，即可透過已安裝的 PWA 開啟檔案。這非常適合與檔案互動的 PWA，例如圖片編輯器、IDE、文字編輯器等。

如要在 PWA 中新增檔案處理功能，您必須更新 Web 應用程式資訊清單，並新增 file_handlers 陣列，其中包含 PWA 可處理的檔案類型詳細資料。您需要指定要開啟的網址、MIME 類型、檔案類型的圖示和啟動類型。啟動類型會定義是否要在單一用戶端或多個用戶端中開啟多個檔案。

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

接著，如要在 PWA 啟動時存取這些檔案，您必須為 launchQueue 物件指定消費者。啟動作業會排入佇列，直到消費者處理為止。

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

詳情請參閱「讓已安裝的網頁應用程式成為檔案處理常式」。

`inert` 屬性

inert 屬性是全域 HTML 屬性，可指示瀏覽器忽略元素的使用者輸入事件，包括焦點事件和輔助技術事件。

這在建構 UI 時非常實用。舉例來說，如果使用模式對話方塊，您會希望在模式對話方塊可見時，將焦點「捕捉」在模式對話方塊內。或者，如果使用者無法隨時看到導覽匣，新增 inert 可確保導覽匣在畫面外時，鍵盤使用者不會不小心與其互動。

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>

在此情況下，inert 已在第二個 <div> 元素上宣告，因此其中包含的所有內容 (包括 <button> 和 <label>) 都無法接收焦點或點選。

Chrome 102 支援 inert，Firefox 和 Safari 也即將支援。

詳情請參閱「介紹 inert」。

許多網頁應用程式都需要能夠在不透過網頁導覽的情況下更新網址。目前我們使用的是 History API，但這項 API 使用起來相當笨重，而且不一定能正常運作。與其嘗試修補 History API 的缺點，不如讓 Navigation API 徹底改造這個空間。

如要使用 Navigation API，請在全域 navigation 物件上新增 navigate 監聽器。

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://example.com/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://example.com/cats':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

事件在根本上是集中式，且會針對所有類型的導覽觸發，無論是使用者執行特定動作 (例如點選連結、提交表單，或是倒轉及向前/向後/向前/向前/向後/循環)。在大多數情況下，您可以讓程式碼覆寫瀏覽器針對該動作的預設行為。

如需完整詳細資料和試用示範，請參閱「新式用戶端導覽：Navigation API」。

還有更多獎品等著您！

當然，還有更多功能。

新的 Sanitizer API 旨在建構強大的處理器，以便將任意字串安全地插入網頁中。
hidden=until-found 屬性可讓瀏覽器在隱藏區域中搜尋文字，並在找到相符項目時顯示該區域。

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 102 中的其他變更。

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

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

Chrome 102 新功能

File Handling API

inert 屬性

Navigation API

還有更多獎品等著您！

延伸閱讀

訂閱

`inert` 屬性