このページは Cloud Translation API によって翻訳されました。

Chrome 93 の新機能

Pete LePage

必知事項は次のとおりです。

JavaScript モジュールと同様に、import ステートメントを使用して CSS スタイルシートを読み込めるようになりました。
インストール済みの PWA を URL ハンドラとして登録できるため、ユーザーは PWA に直接移動できます。
フィードバックに基づいて Multi-Screen Window Placement API が更新され、2 回目のオリジントライアルが開始されます。
PWA Summit が 10 月 6 ～ 7 日に開催されます。
他にもたくさんあります。

自宅で撮影を担当している Pete LePage です。Chrome 93 のデベロッパー向け新機能を紹介します。

CSS モジュールスクリプト

JavaScript モジュールと同様に、import ステートメントを使用して CSS スタイルシートを読み込めるようになりました。スタイルシートは、作成可能なスタイルシートと同様にドキュメントまたはシャドウのルートに適用できます。

新しい 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

一部のアプリでは、新しいウィンドウを開いて、特定の場所や特定のディスプレイに配置することが重要な機能です。たとえば、スライドを使用してプレゼンテーションを行う場合、スライドをプライマリディスプレイで全画面表示し、スピーカーノートをもう一方のディスプレイに表示します。

Multi-Screen Window Placement API を使用すると、ユーザーのマシンに接続されているディスプレイを列挙し、特定の画面にウィンドウを配置できます。これは 2 回目のオリジントライアルであり、皆様からのフィードバックに基づいていくつかの変更を加えました。

複数の画面がデバイスに接続されているかどうかを簡単に確認できます。

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;
  }
});

詳細については、web.dev で Tom の記事 Multi-Screen Window Placement API を使用した複数のディスプレイの管理をご覧ください。

リリースサイクルの短縮

3 月に、リリースサイクルを短縮し、Chrome の新しいバージョンを 4 週間ごとにリリースする計画を発表しました。

その時期になりました。Chrome 94 は 9 月 21 日にリリースされる予定です。各バージョンのリリース予定日は Chrome カレンダーで確認できます。

PWA の新機能

プログレッシブウェブアプリを構築する場合、チェックする価値のある新しいオリジントライアルが 2 つあります。

PWA の URL ハンドラ

PWA がインストールされている状態でその PWA へのリンクをクリックすると、ブラウザタブではなく PWA で開くことが望ましいと考えられます。

ウェブアプリマニフェストで url_handlers を指定し、web-app-origin-association ファイルを .well-known/ ディレクトリに追加することで、ユーザーが PWA へのリンクをクリックすると、インストール済みの 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 の URL ハンドラとしての PWA をご覧ください。

ウィンドウコントロールのオーバーレイ

ウィンドウコントロールオーバーレイは、タイトルバーとウィンドウコントロールボタン（閉じるボタン、最大化ボタン、最小ボタンなど）を含むウィンドウ全体を覆うようにクライアント領域を拡張します。

この機能を使用すると、インストール済みの PWA を他のインストール済みのアプリのように見せることができます。

オリジントライアルの詳細については、PWA のタイトルバーのウィンドウコントロールオーバーレイをカスタマイズするをご覧ください。

PWA サミット

PWA Summit が 10 月に開催されます。誰もがプログレッシブウェブアプリで成功を収められるように支援することに焦点を当てた、無料のオンラインカンファレンスです。PWA Summit は、PWA テクノロジーの開発に関与している、Google、Intel、Microsoft、Samsung の関係者が一堂に会して開催します。

魅力的な講演やコンテンツが満載です。詳細と登録については、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">