Chrome 73 版新功能

Pete LePage

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

還有更多！

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

變更記錄

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

漸進式網頁應用程式可在任何地方運作

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

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

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

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

如果您已經建構行動版 PWA，電腦版 PWA 也沒有什麼不同。事實上，如果您已採用回應式設計，應該就已經做好準備了。單一程式碼集可在電腦和行動裝置上運作。如果您剛開始使用 PWA，您會發現建立 PWA 的過程非常簡單！

  1. 新增資訊清單
  2. 建立一組圖示
  3. 新增服務 worker 範本

然後從該處重複執行。

Signed HTTP Exchange

在 Chrome 73 中，我們推出了 Signed HTTP Exchanges (SXG)，這是一項新興技術的一部分，稱為 Web Packages。透過 Signed HTTP Exchange，您可以建立可由其他方提供的「可攜」內容，這也是關鍵，因為這可保留原始網站的完整性和出處。

Signed Exchange：重點

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

簽署的 HTTP 交換可為使用者提供更快速的內容傳遞服務，讓您不必放棄憑證私密金鑰的控制權，也能享有 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 的新功能！