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

Chrome 102 新功能

Pete LePage

以下是一些注意事項：

已安裝的 PWA 可以註冊為檔案處理常式，讓使用者可以輕鬆從磁碟中開啟檔案。
inert 屬性可讓您將 DOM 部分標示為插入。
Navigation API 可讓單一頁面應用程式更輕鬆地處理導覽及網址更新作業
還有更多應用程式。

我是 Pete LePage。我們來深入說明瞭解 Chrome 102 為開發人員提供了哪些新功能

File Handling API

File Handling API 可讓已安裝的 PWA 做為檔案處理常式進行註冊。註冊後，使用者只需點選檔案，即可透過已安裝的 PWA 開啟檔案。這項功能非常適合與檔案互動的 PWA，例如圖片編輯器、IDE、文字編輯器等。

如要將檔案處理功能新增至 PWA，您必須更新網頁應用程式資訊清單，並新增 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，但內容過於複雜，而且不一定能正常運作。Navigation API 並未嘗試修補 History 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 Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

我是 Pete LePage，只要 Chrome 103 版推出，我就會在這裡為您提供 Chrome 的新功能！

Chrome 102 新功能

File Handling API

inert 屬性

Navigation API

還有更多獎品等著您！

其他資訊

訂閱

`inert` 屬性