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

Chrome 78 の新機能

Pete LePage

Twitter GitHub Glitch Mastodon ホームページ

Chrome 78 がリリースされました。

私は Pete LePage です。では、Chrome 78 で導入されたデベロッパー向けの新機能を詳しく見ていきましょう。

CSS Properties and Values API

技術的にはカスタムプロパティと呼ばれる CSS 変数が便利です。これにより、CSS 全体で独自のプロパティを定義して使用できます。しかし、カスタムプロパティは単なる検索と置換にとどまりません。

html {
  --my-color: green;
}
.thing {
  color: var(--my-color);
}

色に変数を使用していて、値として URL を割り当てた場合、ルールは通知なく破棄されます。CSS Properties and Values API を使用すると、カスタムプロパティのタイプとデフォルトのフォールバック値を定義できます。

html {
  --my-color: url(‘not-a-color'); // Oops, not a color!
}
.thing {
  color: var(--my-color);
}

プロパティの登録は、window.CSS.registerProperty() を呼び出し、定義するプロパティの型を定義するプロパティの名前（継承の必要があるかどうか、および初期値）を指定するだけで簡単です。

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

詳細については、web.dev で Sam Richard の Houdini の新しい API を使用したスマートなカスタムプロパティの記事をご覧ください。

より新鮮な Service Worker

importScripts() によってインポートされた Service Worker スクリプトに対して、バイト単位のチェックが実行されるようになりました。以前は、インストール済みの Service Worker にインポートされたスクリプトの変更を強制的に取得させる唯一の方法は、インポートされたスクリプトの URL を変更することでした。通常、semver 値またはハッシュを URL に追加します。

importScripts('https://example.com/v1.1.0/index.js');
importScripts('https://example.com/index.abcd1234.js');

Chrome 78 以降では、トップレベルの Service Worker ファイルの更新チェックが行われるたびに、インポートされたスクリプトの内容が変更されたかどうかもチェックされます。設定されている場合は、Service Worker の完全な更新フローがトリガーされます。これにより Chrome は仕様に準拠し、Firefox や Safari と同じ動作になります。

Jeff は、デフォルトで最新の Service Worker に詳細が記載されています。これには、HTTP キャッシュが更新サイクルに与える影響について知っておくべき重要な点も含まれています。

新しいオリジントライアル

オリジントライアルは、試験運用中の機能と API を検証し、より広範なデプロイでのユーザビリティと有効性について Google がフィードバックできるようにする機会です。

試験運用版の機能は通常、フラグの下でしか利用できませんが、機能のオリジントライアルが提供されている場合は、そのオリジントライアルに登録して、オリジンのすべてのユーザーに対して機能を有効にできます。

オリジントライアルにオプトインすると、ベータ版テストのユーザーが、Chrome で特別なフラグを反転することなく、トライアル期間中に試すことができるデモとプロトタイプを作成できます。

オリジントライアルについて詳しくは、ウェブデベロッパー向けオリジントライアルガイドをご覧ください。Chrome オリジントライアルのページで、有効なオリジントライアルの一覧を確認し、登録できます。

ネイティブファイルシステム

Native File System API のオリジントライアルは Chrome 78 で開始され、Chrome 80 で実施される予定です。

Native File System API を使用すると、デベロッパーは、ユーザーのローカルデバイス上のファイルとやり取りする強力なウェブアプリを構築できます。ユーザーがウェブアプリにアクセス権を付与すると、ウェブアプリはユーザーのデバイス上のファイルやフォルダの変更を直接読み取り、保存できます。

これで、作業するファイルを「アップロード」または「ダウンロード」する必要がなくなり、この機能によって実現するすべての新機能にとてもワクワクします。コード、デモ、ユーザーの安全を確保するための Google の取り組みなど、すべての詳細については、ネイティブファイルシステムに関する私の投稿をご覧ください。

SMS レシーバ

SMS Receiver API のオリジントライアルは Chrome 78 で開始され、Chrome 80 で実施される予定です。

オリジントライアルとして提供されている SMS Receiver API を使用すると、ウェブアプリはアプリの送信元用に特別にフォーマットされた SMS メッセージを受信できます。これにより、プログラムで SMS メッセージから OTP を取得し、ユーザーの電話番号をより簡単に確認できます。

Eiji は、SMS Receiver API を使用してウェブで電話番号を確認するという記事で、すべての詳細情報とオリジントライアルへの登録方法を紹介しています。

Chrome Dev Summit 2019

11 月 11 日と 12 日に開催される Chrome Dev Summit をお見逃しなく。Chrome Developers YouTube チャンネルのライブストリーミングが行われます。

参考資料

ここでは、主なハイライトの一部のみを取り上げています。Chrome 78 で追加された変更点については、以下のリンクをご覧ください。

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

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