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

Chrome 76 の新機能

Pete LePage

Chrome 76 では、以下をサポートしました。

prefers-color-scheme メディアクエリ: ウェブサイトにダークモードを導入します。
オムニボックスのインストールボタン: デスクトップでプログレッシブウェブアプリを簡単にインストールできるようにします。
モバイルのプログレッシブウェブアプリでミニ情報バーが表示されないようにする。
WebAPK の更新頻度を高めることができます。
その他多くの機能。

Pete LePage と申します。Chrome 76 のデベロッパー向けの新機能について、詳しく説明します。

PWA アドレスバーのインストールボタン

Chrome 76 では、アドレスバー（オムニボックス）にインストールボタンを追加することで、ユーザーがプログレッシブウェブアプリをデスクトップに簡単にインストールできるようになりました。

サイトがプログレッシブウェブアプリのインストール要件を満たしている場合、Chrome のオムニボックスにインストールボタンが表示され、PWA をインストールできることがユーザーに示されます。ユーザーがインストールボタンをクリックすると、基本的には beforeinstallprompt イベントで prompt() を呼び出す場合と同じです。インストールダイアログが表示され、ユーザーは簡単に PWA をインストールできます。

詳しくは、パソコンでのプログレッシブウェブアプリのアドレスバーでのインストールをご覧ください。

PWA ミニ情報バーの制御機能の強化

モバイルでは、プログレッシブウェブアプリのインストールに関する要件を満たしていれば、ユーザーがサイトに初めてアクセスしたときにミニ情報バーが表示されます。お客様から、ミニ情報バーが表示されないようにして、代わりに独自のインストールプロモーションを提供したいというご要望がありました。

Chrome 76 以降では、beforeinstallprompt イベントに対して preventDefault() を呼び出すと、ミニ情報バーの表示が停止します。

window.addEventListener('beforeinstallprompt', (e) => {
  // Don't show mini-infobar
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  // Update UI to promote PWA installation
  pwaInstallAvailable(true);
});

UI を更新して、PWA をインストールできることをユーザーに知らせてください。プログレッシブウェブアプリのインストールを促進するためのおすすめのベストプラクティスについては、PWA のインストールを促進するためのパターンをご覧ください。

WebAPK の更新を高速化

Android にプログレッシブウェブアプリがインストールされると、Chrome は Web APK を自動的にリクエストしてインストールします。インストール後、Chrome はウェブアプリマニフェストが変更されていないか（アイコン、色、アプリ名が更新されていないか）を定期的に確認し、新しい WebAPK が必要かどうかを判断します。

Chrome 76 以降では、Chrome はマニフェストを 3 日に 1 回ではなく、毎日チェックするようになります。重要なプロパティのいずれかが変更された場合、Chrome は新しい WebAPK をリクエストしてインストールし、タイトル、アイコンなどのプロパティが最新の状態になるようにします。

詳しくは、WebAPK の更新頻度の増加をご覧ください。

ダークモード

多くのオペレーティングシステムで、ダークモード（ダークテーマ）がサポートされるようになりました。

prefers-color-scheme メディアクエリを使用すると、ユーザーが選択したモードに合わせてサイトの外観を調整できます。

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Tom は、web.dev の Hello Doodle、私の旧友の記事に、知っておくべきことがすべて記載されています。さらに、ライトモードとダークモードの両方をサポートするスタイルシートを設計するためのヒントも紹介しています。

その他

これらは、デベロッパー向けの Chrome 76 の変更のほんの一部です。もちろん、他にも多くの変更があります。

`Promise.allSettled()`

個人的には、Promise.allSettled()にはとても興味があります。Promise.all() と似ていますが、すべての Promise が解決するまで待ってから返します。

const promises = [
  fetch('/api-call-1'),
  fetch('/api-call-2'),
  fetch('/api-call-3'),
];
// Imagine some of these requests fail, and some succeed.

await Promise.allSettled(promises);
// All API calls have finished (either failed or succeeded).

より簡単に blob を読み取る

Blob は、text()、arrayBuffer()、stream() の 3 つの新しいメソッドで簡単に読み取れるようになります。つまり、ファイルリーダーのラッパーを作成する必要がなくなります。

// New easier way
const text = await blob.text();
const aBuff = await blob.arrayBuffer();
const stream = await blob.stream();

// Old, wrapped reader
return new Promise((resolve) => {
  const reader = new FileReader();
  reader.addEventListener('loadend', (e) => {
    const text = e.srcElement.result;
    resolve(text);
  });
  reader.readAsText(file);
});

非同期クリップボード API での画像のサポート

また、非同期クリップボード API に画像のサポートを追加し、画像をプログラムで簡単にコピーして貼り付けられるようにしました。