Chrome 80 版的新功能

Pete LePage

Chrome 80 現已推出，開發人員可使用這項功能新增許多功能！

我們為下列項目提供支援：

我是 Pete LePage，讓我們進行深入探索，看看 Chrome 80 版開發人員推出的新功能！

模組工作站

「Module Workers」是全新的網路工作站模式，現已推出 JavaScript 模組的人體工學和效能優勢。工作站建構函式接受新的 {type: "module"} 選項，該選項會變更指令碼的載入和執行方式，以符合 <script type="module">

const worker = new Worker('worker.js', {
  type: 'module'
});

移至 JavaScript 模組後，也能使用動態匯入處理延遲載入程式碼，而不會阻斷工作站執行作業。詳情請參閱 Jason 的「Threading web with module worker」(使用模組工作站將網路串連起來)。

選用鏈結

嘗試讀取物件中的深層巢狀屬性時很容易出錯，尤其是在可能會有無法評估的情況下。

// Error prone-version, could throw.
const nameLength = db.user.name.length;

在繼續操作之前，先檢查每個值再容易變成深層巢狀 if 陳述式，或需要 try / catch 區塊。

// Less error-prone, but harder to read.
let nameLength;
if (db && db.user && db.user.name)
  nameLength = db.user.name.length;

Chrome 80 開始支援名為「選用鏈結」的全新 JavaScript 功能。使用選用鏈結時，如果其中一個屬性傳回空值或未定義，而不是擲回錯誤，整個項目只會傳回未定義。

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

詳情請參閱第 8 版網誌的選用鏈結網誌文章！

來源試用畢業

有三項新功能已從來源試用升級至穩定版，因此任何網站不需憑證即可使用這些功能。

定期在背景同步處理

首先是定期背景同步處理，會定期在背景同步處理資料，這樣一來，當使用者開啟已安裝的 PWA 時，他們總是能取得最新資料。

聯絡人選擇工具

接下來是 Contact Picker API，這個隨選 API 可讓使用者從聯絡人清單中選取項目，並將所選項目的有限詳細資料提供給網站。

如此一來，使用者就能隨時分享自己想要的內容，讓使用者更輕鬆地與親朋好友聯絡、聯繫互動。

最後，取得已安裝的相關應用程式方法可讓網頁應用程式檢查使用者裝置是否已安裝您的原生應用程式。

最常見的用途之一，就是決定是否要在未安裝原生應用程式的情況下提升 PWA 的安裝成效。或者，如果另一個應用程式提供某個應用程式，您可能會想要停用其部分功能。

新來源試用

Content Indexing API

如何讓使用者知道您 PWA 中的快取內容？這裡有發現問題他們知道要開啟您的應用程式嗎？或者有哪些內容可用？

Content Indexing API 是全新的來源試用服務，可讓您將可離線使用的內容的網址和中繼資料新增至本機索引，並由瀏覽器維護，且使用者可以輕鬆查看。

const registration = await navigator.serviceWorker.ready;
await registration.index.add({
  id: 'article-123',
  launchUrl: '/articles/123',
  title: 'Article title',
  description: 'Amazing article about things!',
  icons: [{
    src: '/img/article-123.png',
    sizes: '64x64',
    type: 'image/png',
  }],
});

如要將內容新增至索引，我需要取得 Service Worker 註冊，然後呼叫 index.add，並提供內容的相關中繼資料。

索引填入完成後，就會顯示在 Chrome for Android「下載」頁面的專用區域。如需完整資訊，請參閱 Jeff 的「使用 Content Indexing API 為可離線使用的網頁建立索引」一文。

觸發通知

通知是許多應用程式的重要環節。但是，推播通知只會在您連上網路時可靠。這項功能在大多數情況下都能正常運作，但有時可能會中斷。舉例來說，如果日曆提醒 因為正在進行飛航模式，而通知您重要活動無法送達， 就可能會錯過該活動。

通知觸發條件可讓您事先排定通知時間，如此一來，即使裝置沒有網路連線或裝置處於省電模式，作業系統仍會在適當時機傳送通知。

const swReg = await navigator.serviceWorker.getRegistration();
swReg.showNotification(title, {
  tag: tag,
  body: "This notification was scheduled 30 seconds ago",
  showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
});

如要排定通知時間，請在 Service Worker 註冊中呼叫 showNotification。在通知選項中，新增含有 TimestampTrigger 的 showTrigger 屬性。然後，當到了抵達時間時，瀏覽器就會顯示通知。

來源試用計畫預計透過 Chrome 第 83 版執行，因此如需完整資訊，請參閱 Tom 的「通知觸發條件」文章。

其他來源試用

從 Chrome 第 80 版開始，還有一些來源試用功能：

  • 網路序號
  • 讓 PWA 註冊為檔案處理常式的功能
  • 聯絡人選擇器的新屬性

請參閱來源試用功能的完整清單。

其他更新

當然，還有更多功能等您發掘！

  • 您現在可以使用 #:~:text=something 直接連結至網頁上的文字片段，Chrome 會捲動畫面 並醒目顯示第一個例項例如 https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York
  • 在電腦版 PWA 中設定 display: minimal-ui，已安裝 PWA 的標題列上會顯示返回和重新載入按鈕。
  • 此外，Chrome 現在支援使用 SVG 圖片做為網站小圖示。

其他資訊

這僅涵蓋部分重點功能。如要瞭解 Chrome 80 的其他變更，請點選下方連結。

訂閱

如要隨時掌握 YouTube 影片的最新消息，然後訂閱我們的 Chrome Developers YouTube 頻道，每當推出新影片時，您都會收到電子郵件通知。

我是 Pete LePage。Chrome 第 81 版推出後，我很樂意告訴大家：Chrome 的新功能！