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

Chrome 73 版新功能

Pete LePage

在 Chrome 73 中，我們新增了以下支援功能：

使用Signed HTTP Exchange 更輕鬆地建立可攜式內容。
使用可建構的樣式表，就能更輕鬆地動態變更樣式。
漸進式網頁應用程式支援 Mac，現在支援 PWA所有電腦和行動平台，因此您可以輕鬆建立可透過網路提供的可安裝應用程式。

還有更多！

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

變更記錄檔

這篇文章只涵蓋部分重點，如要瞭解 Chrome 73 的其他變更，請查看下方連結。

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

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

漸進式網頁應用程式速度快且可靠，無論網路連線為何，都能以相同速度載入及執行。透過充分發揮裝置功能的現代化網頁功能，提供豐富且引人入勝的體驗。

使用者可以透過 Chrome 的內容選單安裝 PWA，您也可以直接使用 beforeinstallprompt 事件宣傳安裝體驗。安裝後，PWA 會與作業系統整合，以原生應用程式的方式運作：使用者可在與其他應用程式相同的位置找到並啟動 PWA，這些應用程式會在自己的視窗中執行，並顯示在工作切換器中，圖示則可顯示通知圖示，等等。

我們希望縮小網頁和原生應用程式之間的功能差距，為在網頁上提供的現代應用程式提供穩固基礎。我們正在努力新增各種網路平台功能，讓您可以存取檔案系統、喚醒鎖、在地址列中加入環境徽章，讓使用者知道可以安裝您的 PWA，以及為企業安裝政策等更多功能。

如果您已經建構行動版 PWA，電腦版 PWA 也沒有什麼不同。事實上，如果您已採用回應式設計，應該就沒問題了。而且在電腦和行動裝置上都能使用。如果您剛開始使用 PWA，可能會發現建立 PWA 超簡單！

然後從該處疊代

已簽署的 HTTP 廣告交易平台

在 Chrome 73 中，我們推出了 Signed HTTP Exchange (SXG)，這是一項新興技術的一部分，稱為 Web Packages。Signed HTTP Exchange 可讓您建立其他方能夠傳送的「可移動」內容，因此這是重要的面向，可保留原始網站的完整性和出處。

Signed Exchange：重點

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

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

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

可建構的樣式表

可建構的樣式表是 Chrome 73 的新功能，可讓我們以新方式建立及發布可重複使用的樣式，這在使用 Shadow DOM 時特別重要。

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

顯示 CSS 準備和應用作業的示意圖

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

共用 CSSStyleSheet 的更新會套用至採用該 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 的「Constructable Stylesheets: seamless reusable styles」(可建構的樣式表：可順暢重複使用的樣式) 文章，瞭解更多詳細資訊和程式碼範例！

還有更多獎品等著您！

當然，這只是 Chrome 73 針對開發人員所做的部分異動，還有更多變更。

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

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

我是 Pete LePage，Chrome 74 一推出，我就會馬上在這裡告訴你 Chrome 有哪些新功能！