Chrome 93 版的新功能

Pete LePage

以下是一些注意事項：

我是 Pete LePage，目前在家工作和拍攝影片。現在就來看看 Chrome 93 為開發人員帶來哪些新功能。

CSS 模組指令碼

現在，您可以使用 import 陳述式載入 CSS 樣式表，就像 JavaScript 模組一樣。接著，樣式表可以套用至文件或 Shadow Root，方式與可建構樣式表相同。

新的 CSS 模組指令碼功能非常適合自訂元素。此外，與其他透過 JavaScript 套用 CSS 的方法不同，您不需要建立元素，也不必處理 CSS 文字的 JavaScript 字串。

如要使用，請使用 assert {type: 'css'} 匯入樣式表，然後呼叫 adoptedStyleSheets，將其套用至 document 或 shadowRoot。

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

但請注意，如果省略 assert，檔案會被視為 JavaScript，因此無法運作！

如需完整詳細資料，請參閱 web.dev 上的「使用 CSS 模組指令碼匯入樣式表」。

Multi-Screen Window Placement API

對某些應用程式來說，開啟新視窗並將其放在特定位置或特定螢幕上是一項重要功能。舉例來說，使用 Google 簡報時，我希望簡報在主要螢幕上全螢幕顯示，而演講者備忘稿則顯示在另一個螢幕上。

Multi-Screen Window Placement API 可列舉連接至使用者機器的螢幕，並將視窗放置在特定螢幕上。這是第二次來源試用，我們根據您的意見回饋做了許多調整。

您可以快速檢查裝置是否連接多個螢幕：

const isExtended = window.screen.isExtended;
// returns true/false

不過，主要功能位於 window.getScreens()，可提供所連接螢幕的所有詳細資料。

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

舉例來說，您可以判斷主要螢幕，然後使用 requestFullscreen() 在該螢幕上顯示元素。

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

此外，這個類別也提供監聽變更的方法，例如插入或移除新螢幕。

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

如要深入瞭解，請參閱 Tom 的文章「使用 Multi-Screen Window Placement API 管理多個螢幕」(發布於 web.dev)。

縮短發布週期

我們在 3 月宣布縮短發布週期，每四週推出新版 Chrome。

現在，我們將在 9 月 21 日推出 Chrome 94。您可以在 Chrome 日曆中查看各版本的預定發布日期。

全新 PWA 功能

如果您正在建構漸進式網頁應用程式，可以試試兩項新的來源試用。

PWA 的網址處理常式

如果您已安裝 PWA，並點選該 PWA 的連結，可能會希望在 PWA 中開啟，而不是在瀏覽器分頁中開啟。

在網頁應用程式資訊清單中指定 url_handlers，並在 .well-known/ 目錄中新增 web-app-origin-association 檔案，即可告知瀏覽器，如果使用者點選 PWA 連結，應在已安裝的 PWA 中開啟。

manifest.json 檔案中的 url_handlers 範例：

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association 檔案範例：

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

只要多進行一些驗證，甚至可以讓 PWA 處理來自其他來源的連結。

如要進一步瞭解來源試用，請參閱 web.dev 上的「將 PWA 做為網址處理常式」。

視窗控制項重疊

視窗控制項疊加層會擴展用戶端區域，涵蓋整個視窗，包括標題列和視窗控制項按鈕，例如關閉、最大化和最小化按鈕。

您可以使用這項功能，讓安裝的 PWA 看起來更像其他安裝版應用程式。

如要進一步瞭解來源試用，請參閱「自訂 PWA 標題列的視窗控制項疊加層」。

PWA 高峰會

PWA 高峰會將於 10 月舉行。這場免費線上會議旨在協助所有人成功運用漸進式網頁應用程式。PWA 高峰會是由 Google、Intel、Microsoft 和 Samsung 等幾家參與 PWA 技術開發的公司共同舉辦。

我們準備了許多精彩的演講和內容，如要瞭解詳情及報名參加，請前往 PWASummit.org。

還有其他眾多資源！

當然，還有許多其他功能。

  • Flexbox 和 Flexbox 項目新增對齊關鍵字支援：start、end、self-start、self-end、left 和 right。
  • 非同步剪貼簿 API 現已支援 SVG 檔案。
  • 此外，設定 meta theme-color 時，系統會採用 media 屬性，因此您可以為淺色和深色模式指定不同的主題顏色。
<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

延伸閱讀

以上僅列出部分重點。請參閱下方連結，瞭解 Chrome 93 的其他異動。

訂閱

如要掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，我們推出新影片時，您就會收到電子郵件通知。

我是 Pete LePage，Chrome 94 發布後，我會在這裡介紹 Chrome 的新功能！