Chrome 80 版的新功能

Pete LePage

Chrome 80 版現正推出，其中有許多開發人員適用的新功能！

支援以下項目：

我是 Pete LePage，讓我們深入瞭解 Chrome 80 為開發人員帶來哪些新功能！

模組 worker

模組工作站是網路工作站的新模式，可提供 JavaScript 模組的人體工學和效能優勢。Worker 建構函式會接受新的 {type: "module"} 選項，藉此變更載入及執行指令碼的方式，以符合 <script type="module">

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

改用 JavaScript 模組後，您也可以使用動態匯入功能來處理延遲載入程式碼，而不會阻斷 worker 的執行作業。如需更多詳細資訊，請參閱 web.dev 上的 Jason 文章「使用模組 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;

如需詳細資訊，請參閱 v8 網誌上的選用鏈結網誌文章！

來源試用升級

有三項新功能已從 Origin 測試版升級為穩定版，可供任何網站使用，且不需要符記。

定期在背景同步處理

首先是定期在背景同步處理，這項功能會定期在背景同步處理資料，因此當使用者開啟已安裝的 PWA 時，就能隨時取得最新資料。

聯絡人選擇工具

接下來是 Contact Picker API，這是一種隨選 API，可讓使用者從聯絡人名單中選取項目，並與網站分享所選項目的部分詳細資料。

使用者可以隨時隨地分享想要的內容，並更輕鬆地與親朋好友聯繫。

最後，Get Installed Related Apps 方法可讓您的網頁應用程式檢查使用者裝置上是否安裝原生應用程式。

最常見的用途之一，是決定是否要促進使用者安裝 PWA (如果尚未安裝原生應用程式)。或者，如果某個應用程式提供另一個應用程式的某些功能，您可能會想要停用該功能。

新的來源試用

內容索引 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',
  }],
});

如要在索引中新增內容，我需要取得服務工作者註冊，然後呼叫 index.add，並提供內容的中繼資料。

填入索引後，索引會顯示在 Chrome 適用於 Android 的「下載」頁面專用區域中。如需完整詳細資料，請參閱 web.dev 上的 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)
});

如要排定通知，請對服務工作者註冊呼叫 showNotification。在通知選項中，使用 TimestampTrigger 新增 showTrigger 屬性。然後在時間到達時，瀏覽器就會顯示通知。

我們預計在 Chrome 83 中進行來源試用，因此請參閱 Tom 在 web.dev 上發布的「通知觸發事件」文章，瞭解完整詳情。

其他來源試用

在 Chrome 80 中，還有其他幾項來源試用功能：

  • Web Serial
  • PWA 可註冊為檔案處理常式
  • 聯絡人挑選器的新屬性

請查看原始試用版的完整功能清單。

其他

當然，還有更多功能！

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

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 80 的其他異動。

訂閱

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

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