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

Chrome 78 の新機能

Pete LePage

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 と同じ動作になります。

HTTP キャッシュが更新サイクルに与える影響について知っておくべき重要な点など、詳細については、Jeff のデフォルトで新鮮な Service Worker をご覧ください。

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

オリジントライアルでは、試験運用版の機能と API を検証する機会が Google に提供され、広範なデプロイにおけるユーザビリティと有効性についてフィードバックを送信できます。

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

オリジントライアルを有効にすると、デモやプロトタイプを構築して、ベータ版テストのユーザーが Chrome で特別なフラグを切り替えることなく、トライアル期間中に試すことができます。

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

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

ネイティブファイルシステム API のオリジントライアルは Chrome 78 で開始され、Chrome 80 まで実施される予定です。

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

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

SMS レシーバー

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

SMS Receiver API（オリジントライアルとして利用可能）を使用すると、ウェブアプリはアプリの送信元向けの特別な形式の SMS メッセージを受信できます。これにより、SMS メッセージから OTP をプログラムで取得し、ユーザーの電話番号をより簡単に確認できます。

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

Chrome Dev Summit 2019

11 月 11 日と 12 日に開催される Chrome Dev Summit は、Chrome Developers YouTube チャンネルでライブ配信されます。