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

Chrome 103 の新機能

Pete LePage

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

新しい HTTP 103 ステータスコードが導入され、ページの受信が開始する前に、プリロードするコンテンツをブラウザが決定できるようになりました。
Local Font Access API を使用すると、ウェブアプリケーションでユーザーのパソコンにインストールされているフォントを列挙して使用できます。
AbortSignal.timeout() を使用すると、非同期 API にタイムアウトを簡単に実装できます。
他にも多数の機能があります。

Pete LePage と申します。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 - 早期ヒント