このページは 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 を指定し、.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 の URL ハンドラとしての PWA をご覧ください。

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

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

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

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

PWA サミット

10 月に PWA Summit が開催されます。これは、誰もがプログレッシブウェブアプリで成功できるようにすることを目的とした無料のオンラインカンファレンスです。PWA サミットは、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">

Chrome 93 の新機能

CSS モジュール スクリプト