Chrome 76 の新機能

Chrome 76 では、次の機能がサポートされるようになりました。

私は Pete LePage です。では、Chrome 76 のデベロッパー向けの新機能を詳しく見てみましょう。

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

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

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

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


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

AirHorner の [ホーム画面に追加] ミニ情報バーの例

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

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

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

WebAPK の更新の高速化

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

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

詳しくは、Web APK を頻繁に更新するをご覧ください。

ダークモード

多くのオペレーティング システムが、ダークモード(ダークモード)をサポートするようになりました。

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

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

Tom 氏は web.dev で「Hello Codeness, my 古い友人」という素晴らしい記事を公開しています。これには、知っておくべきことだけでなく、ライトモードとダークモードの両方をサポートするスタイルシートを設計するためのヒントも記載されています。

など多数

これらは 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 の読み取りがより簡単に

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

// 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 に画像のサポートを追加し、プログラムで画像を簡単にコピーして貼り付けることが可能になりました。

参考資料

ここでは主なハイライトの一部のみを説明します。Chrome 76 での変更点については、以下のリンクをご覧ください。

チャンネル登録

最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルご登録ください。新しい動画が公開されるたびにメール通知が届きます。

Chrome 77 のリリース時に Chrome の新機能をお知らせします