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

Chrome 103 の新機能

Pete LePage

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

新しい HTTP 103 ステータスコードを使用すると、ページへのアクセスを開始する前に、どのコンテンツをプリロードするかをブラウザが判断できます。
Local Font Access API を使用すると、ウェブアプリケーションでユーザーのパソコンにインストールされているフォントを列挙して使用できます。
AbortSignal.timeout() を使用すると、非同期 API でタイムアウトを簡単に実装できます。
他にもたくさんあります。

ピートルページです。Chrome 103 のデベロッパー向け新機能を見ていきましょう

HTTP 103 ステータスコード 103 - 早期ヒント

ページのパフォーマンスを向上させる 1 つの方法は、リソースヒントを使用することです。これらは、後で必要になる可能性のあるものをブラウザに「ヒント」を与えます。たとえば、ファイルのプリロードや、別のサーバーへの接続などです。

<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link as="font" crossorigin="anonymous"
      href="..." rel="preload">
<link href="cdn.example.com"
      rel="preconnect">

ただし、ブラウザは、サーバーがページの少なくとも一部を送信するまで、これらのヒントを処理できません。

ブラウザがページをリクエストし、サーバーがそのページを生成するのに数百ミリ秒かかるとします。ブラウザはページの受信を開始するまでそのまま待機しますただし、サーバーが常に特定のサブリソースセット（CSS ファイル、JavaScript、画像など）を必要とすることを認識している場合、サーバーはすぐに新しい HTTP 103 Early Hints ステータスコードを返し、それらのサブリソースをプリロードするようブラウザに要求できます。

サーバーがページを生成したら、通常の HTTP 200 レスポンスでページを送信できます。ページが開くと、ブラウザは必要なリソースの読み込みをすでに開始しています。

これは新しい HTTP ステータスコードであるため、使用するにはサーバーを更新する必要があります。

HTTP 103 の早期ヒントを使ってみる:

Local Font Access API

ウェブ上のフォントは常に課題であり、ユーザーが独自のグラフィックやデザインを作成できるアプリでは特にそうです。これまでウェブアプリではウェブフォントしか使用できませんでしたユーザーがパソコンにインストールしたフォントのリストを取得する方法はありませんでした。また、完全なフォントテーブルデータにアクセスする方法がありませんでした。これは、独自のカスタムテキストスタックを実装する必要がある場合に重要です。

新しい Local Font Access API を使用すると、ウェブアプリケーションはユーザーのデバイス上のローカルフォントを列挙し、フォントテーブルデータにアクセスできます。

デバイスにインストールされているフォントのリストを取得するには、まず権限をリクエストする必要があります。

// Ask for permission to use the API
try {
  const status = await navigator.permissions.request({
    name: 'local-fonts',
  });
  if (status.state !== 'granted') {
    throw new Error('No Permission.');
  }
} catch (err) {
  if (err.name !== 'TypeError') {
    throw err;
  }
}

次に、window.queryLocalFonts() を呼び出します。ユーザーのデバイスにインストールされているすべてのフォントの配列を返します。

const opts = {};
const pickedFonts = await self.queryLocalFonts();
for (const fontData of pickedFonts) {
  console.log(fontData.postscriptName);
  console.log(fontData.fullName);
  console.log(fontData.family);
  console.log(fontData.style);
}

フォントのサブセットのみが必要な場合は、postscriptNames パラメータを追加してフィルタできます。

const opts = {
  postscriptNames: [
    'Verdana',
    'Verdana-Bold',
    'Verdana-Italic',
  ],
};
const pickedFonts = await self.queryLocalFonts(opts);

詳細については、web.dev で Tom の記事ローカルフォントで高度なタイポグラフィを使用するをご覧ください。

AbortSignal.timeout() を使用したタイムアウトの簡素化

JavaScript では、非同期呼び出しをキャンセルするために AbortController と AbortSignal を使用します。

たとえば、fetch() リクエストを行う場合は、AbortSignal を作成して fetch() に渡すことができます。戻る前に fetch() をキャンセルする場合は、AbortSignal のインスタンスで abort() を呼び出します。これまでは、一定の時間が経過した後に中止する場合は、setTimeout() でラップする必要があります。

const controller = new AbortController();
const signal = controller.signal;
const resp = fetch(url, { signal });

setTimeout(() => {
  // abort the fetch after 6 seconds
  controller.abort();
}, 6000);

幸い、AbortSignal の新しい timeout() 静的メソッドにより、これを簡単に実行できます。指定されたミリ秒数後に自動的に中止される AbortSignal オブジェクトを返します。これまで数行のコードでしたが、今では 1 つになりました。

const signal = AbortSignal.timeout(6000);
const resp = fetch(url, { signal });

AbortSignal.timeout() は Chrome 103 でサポートされており、Firefox と Safari ではすでにサポートされています。

など多数

他にもたくさんあります。

avif の画像ファイル形式をウェブ共有で共有できるようになりました
Chromium では、URL が変更された直後に popstate を起動することで、Firefox と一致させるようになりました。両方のプラットフォームでイベントの順序は popstate、hashchange の順になります。
また、Element.isVisible() は要素が可視かどうかを示します。

注: 動画では Element.isVisible() が安定版で使用できると述べましたが、現時点では機能フラグでのみ利用可能です。

Chrome 103 の新機能

HTTP 103 ステータス コード 103 - 早期ヒント

Local Font Access API

AbortSignal.timeout() を使用したタイムアウトの簡素化

など多数

関連情報

登録

HTTP 103 ステータスコード 103 - 早期ヒント