Chrome 73 版新功能

Pete LePage

在 Chrome 73 版中，我們新增了：

還有更多功能！

我是 Pete LePage接著來深入探討 Chrome 73 為開發人員推出的新功能！

變更記錄檔

以上內容僅涵蓋部分重要亮點，請點選下方連結，瞭解 Chrome 73 版的其他異動。

漸進式網頁應用程式可隨時隨地使用

Progressive Web Apps 提供類似應用程式的安裝體驗，讓您直接透過網路建構及提供 (與應用程式類似)。在 Chrome 73 中，我們已新增 macOS 的支援功能，開始支援適用於所有電腦版平台的漸進式網頁應用程式 (Mac、Windows、ChromeOS、Linux 和行動版)，簡化網頁應用程式開發作業。

Progressive Web App 的載入速度快又穩定，不論網路連線狀況如何，您都能以相同的速度載入和執行內容。並透過可充分運用裝置功能的新式網路功能，提供豐富的互動體驗。

使用者可以透過 Chrome 的內容選單安裝 PWA，或者您也可以使用 beforeinstallprompt 事件直接推廣安裝體驗。安裝完成後，PWA 就會與 OS 整合，運作方式就如同原生應用程式：使用者會從其他應用程式的相同位置找到並啟動這些應用程式，它們會在自己的視窗中執行、在工作切換器中顯示，圖示可以顯示通知標記等等。

我們想縮小網頁和原生網站之間的功能差距，為網路上提供的新型應用程式提供穩固的基礎。我們正努力新增網頁平台功能，方便您存取檔案系統、Wake Lock、在網址列加入微光徽章，讓使用者瞭解能夠安裝 PWA、為企業安裝政策，以及提供許多其他功能。

如果您已開始建構行動版 PWA，電腦版 PWA 將也不相同。事實上，如果您曾使用回應式設計，應該就能直接採用。而且在電腦和行動裝置上都能使用。如果您剛開始使用 PWA，可能會發現建立 PWA 超簡單！

  1. 新增資訊清單
  2. 建立一組圖示
  3. 新增樣板 Service Worker

然後從該處疊代

已簽署的 HTTP 廣告交易平台

Chrome 73 現已提供 Signed HTTP Exchange (SXG) 這項新興技術的一部分，稱為網頁套件。Signed HTTP Exchange 可讓您建立其他方能夠傳送的「可移動」內容，因此這是重要的面向，可保留原始網站的完整性和出處。

Signed Exchange：重點

這會將內容來源從提供內容的伺服器中分離，但由於經過簽署，這就好像是由伺服器傳送的內容。瀏覽器載入這個 Signed Exchange 時，可在網址列安全地顯示您的網址，因為交換中的簽名會指出內容原本來自您的來源。

Signed HTTP Exchange 可加快使用者的內容傳遞速度，因此在不犧牲憑證私密金鑰的控制權的情況下，就能享有 CDN 的優勢。AMP 團隊計劃在 Google 搜尋結果網頁使用已簽署的 HTTP 廣告交易平台，改善 AMP 網址並加快搜尋結果的點擊次數。

如要進一步瞭解如何開始使用，請參閱 Kinuko 的「Signed HTTP Exchanges」文章。

可建構的樣式表

Chrome 73 版本推出可建構的樣式表，讓我們得以透過全新方式建立及發布可重複使用的樣式，這對使用 Shaadow DOM 時特別重要。

您隨時可以使用 JavaScript 建立樣式表。使用 document.createElement('style') 建立 <style> 元素。接著，存取其工作表屬性，取得基礎 CSSStyleSheet 例項的參照並設定樣式。

顯示 CSS 準備及應用方式的圖表

使用這個方法往往會導致樣式表單膨脹。更糟的是，這會導致未設定樣式的內容閃爍。可建構的樣式表可讓您定義及準備共用 CSS 樣式，然後將這些樣式輕鬆套用至多個陰影根層級或文件，且不會重複。

共用 CSSStyleSheet 的更新會套用至所有採用此樣式的根層級，並在工作表載入後，採用樣式表快速且同步。

操作方法很簡單，先建立新的 CSSStyleSheet 執行個體，然後使用 replace 或 replaceSync 更新樣式表規則。

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

如需更多詳細資訊和程式碼範例，請參閱 Jason Miller 的「可建構的樣式表：可重複使用的樣式」文章！

還有更多獎品等著您！

這些只是 Chrome 73 針對開發人員所做的其中一些變更，當然還有更多。

  • matchAll() 是新的規則運算式比對方法，適用於字串原型，並傳回包含完整相符項目的陣列。
  • <link> 元素現在支援 imagesrcset 和 imagesizes 屬性，可對應至 HTMLImageElement 的 srcset 和 sizes 屬性。
  • Blink 的陰影模糊半徑實作方式現在與 Firefox 和 Safari 相符。
  • Chrome 的 UI 深色模式現可在 Mac 上使用，我們也會陸續支援 Windows。此外，您還可以進行 CSS 媒體查詢：prefers-color-scheme，用於偵測使用者要求系統是否使用淺色或深色主題。這種追蹤錯誤是 新增 CSS prefers-color-scheme媒體功能 Chrome 和 Firefox。

訂閱

想隨時掌握最新消息，再訂閱我們的 Chrome 開發人員 YouTube 頻道，每當我們推出新影片時，您會收到電子郵件通知。

我是 Pete LePage，每當 Chrome 74 推出時，我就會立即 向大家說明 Chrome 的新功能！