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

Chrome 73 版新功能

Pete LePage

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

使用 Signed HTTP 廣告交易平台輕鬆製作可攜內容。
只需使用 GCP 控制台可建構的樣式表。
為 Mac 平台提供漸進式網頁應用程式支援，並支援適用於所有電腦版和行動平台的 PWA 建立可透過網路提供的可安裝應用程式

還有更多功能！

我是 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 時，一定會感到驚訝！

然後從該處疊代

已簽署的 HTTP 廣告交易平台

Signed HTTP Exchanges (SXG) 是名為 Chrome 73 現已推出網路套件。 Signed HTTP Exchange 可讓您建立「可攜式」可將會由其他方提供，而這就是重點，保留原始網站的完整性和作者資訊。

Signed Exchange：重點

這麼做會將內容來源與提供內容的伺服器區分開來。但由於已經過簽署，彷彿是來自您的伺服器即可傳送。瀏覽器載入這個 Signed Exchange 後，即可安全地在或網址列，因為交換中的簽名會指出流量是否來自您的來源

Signed HTTP Exchange 可加快使用者的內容傳遞速度，您就能享有 CDN 帶來的好處憑證的私密金鑰AMP 團隊計劃使用已簽署的 HTTP 在 Google 搜尋結果網頁上使用廣告交易平台，以改善 AMP 網址並加快點擊速度。

查看 Kinuko 的 Signed HTTP Exchanges 張貼文章，進一步瞭解如何開始使用。

可建構的樣式表

Chrome 73 新推出可建構的樣式表，為我們提供全新的建立和建構方式。這樣就能發布可重複使用的樣式 Shadow 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 Developers YouTube 頻道每次推出新影片時，您都會收到電子郵件通知。

我是 Pete LePage，Chrome 74 推出後，我馬上就會來看看 Chrome 的新功能！