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

Chrome 73 版新功能

Pete LePage

Twitter GitHub Glitch Mastodon 首頁

在 Chrome 73 版中，我們現在支援下列項目：

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

還有許多功能！

我是 Pete LePage。讓我們深入探索看看 Chrome 73 版開發人員有哪些新功能！

變更記錄檔

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

漸進式網頁應用程式

漸進式網頁應用程式提供類似應用程式的安裝體驗，並直接透過網路建構及提供。在 Chrome 73 版中，我們已支援 macOS，開始支援在所有電腦平台 (Mac、Windows、ChromeOS、Linux 和行動裝置) 和行動裝置，藉此簡化網頁應用程式開發作業。

Progressive Web App 快速且穩定，因此無論網路連線狀況為何，都能以相同速度載入和執行。而是利用能充分運用裝置功能的新網路功能，提供豐富且引人入勝的體驗。

使用者可以從 Chrome 內容選單安裝 PWA，也可以使用 beforeinstallprompt 事件直接宣傳安裝體驗。安裝後，PWA 會與 OS 整合，運作方式如同原生應用程式：當使用者在相同的位置尋找並啟動這些應用程式、在各自的視窗中執行、顯示在工作切換器中、圖示可能會顯示通知標記等等。

我們想縮小網頁與原生應用程式的功能差距，以便為網路上傳遞的現代化應用程式奠定穩固基礎。我們正努力加入新的網路平台功能，方便您存取檔案系統、Wake Lock、在網址列中加入難度標記，讓使用者知道您可以安裝 PWA、為企業安裝政策，以及許多其他方面。

如果您已建構行動版 PWA，電腦版 PWA 並無不同。事實上，如果你曾使用回應式設計，就可能已經準備就緒。單一程式碼集可用於電腦和行動裝置。如果您是剛開始使用 PWA，會發現建構這類 API 的簡單方式會令您感到驚訝！

然後，從該位置進行疊代。

已簽署的 HTTP 廣告交易平台

Signed HTTP Exchanges (SXG) 是名為 Web Packages 的新興技術的一部分，現已在 Chrome 73 版中提供。Signed HTTP Exchange 有助於建立可供其他方提供的「可攜」內容，這是關鍵方面，保留了原始網站的完整性和歸因。

Signed Exchange：基礎知識

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

已簽署的 HTTP 交換會讓使用者更快傳遞內容，因此無須維護憑證的私密金鑰的控制權，就能發揮 CDN 的優勢。AMP 團隊計劃在 Google 搜尋結果網頁上使用已簽署的 HTTP 廣告交易平台，藉此改善 AMP 網址並加快搜尋結果的點擊速度。

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

可建構的樣式表

Chrome 73 新推出的「建構式樣式表」讓我們以全新方式建立及發布可重複使用的樣式，這在使用 Shaadow DOM 時尤其重要。

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

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

使用這個方法往往會導致樣式功能表過於大量。更糟的是，這也會造成無法設定樣式的內容。建構式樣式表可讓您定義及準備共用 CSS 樣式，然後輕鬆將這些樣式套用至多個陰影根層級或文件，而且不會重複。

共用 CSSStyleSheet 的更新會套用到採用該 ID 的所有根層級，而在工作表載入後，就能迅速且同步採用樣式表。

做法很簡單，請先建立 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 Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。

我是 Pete LePage，當 Chrome 74 推出後，我會馬上說明 Chrome 的新功能！