Web

Chrome 78 の新機能

投稿日:2019年10月25日 更新日:

1. はじめに

Chrome 78 の新機能について簡単に説明します。

詳しく知りたい方は、Chrome 78の新機能| Web | Google Developers を参照してください。

2. 主な新機能

CSS Properties and Values API

従来から、CSSにおいてカスタムプロパティを追加する機能は使えていました(参考:CSS Custom Properties for Cascading Variables Module Level 1)。

今回これに加えて、window.CSS.registerProperty メソッドが使えるようになり、初期値などを設定することが可能になりました(参考:CSS Properties and Values API Level 1)。

カスタムプロパティの記述で不適切な部分があった場合、初期値にフォールバックさせることができます。

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

参考

Fresher service workers

サービスワーカー内から importScripts() メソッドで他のスクリプトがインポートされている場合に、インポートされる側のファイルを更新するには、そのファイルを表すURLを変更する必要がありました。

Chrome 78 からは、Service Workerファイルに対して更新チェックが実行されるたびに、インポートされる側のスクリプトの内容が変更されたかどうかチェックされます。

参考

New origin trials

特定のオリジン (スキーム + ドメイン + ポート番号) に対して、実験的機能やAPIを有効にしてくれるサービスです。機能ごとに登録を行い、トークンを発行してもらいます。

例えば、ウェブアプリケーションを開発する際、「Chrome が近い将来実装するであろう機能が有効になっても問題が起きないかテストしたい」というのは当然の要望です。Chrome では実験的機能毎にフラグをオンにして有効にすることができますが、テストして貰うユーザーがそれなりの数いる場合は、全員にその操作をさせるのは現実的ではありません。このような場合、特定のオリジンに対して自動的にそれらの機能が有効になれば、ユーザーは何も設定する必要がなくなります。

また、テスト後にフィードバックを送ることができます。

試すことのできる実験的機能一覧
試すことのできる実験的機能一覧
1つの機能についての説明ページ
1つの機能についての説明ページ

例えば、Text Editor では Origin Trial により、Native File System API (後述) が使えるようになっています(ユーザーが Chrome のフラグをオンにしなくても)。

参考

Native File System

先程説明した Origin Trial にて、 Native File System API が使えるようになりました。

Native File System API を利用すると、ローカルに存在するファイルにを読み込んだり、保存したりすることができます。便利な機能ですが、不正な利用のされ方がされないように気をつけなければいけません。

参考

SMS Receiver

先程説明した Origin Trial にて、SMS Receiver API が使えるようになりました。

ウェブアプリケーションが、特定のフォーマットのSMSメッセージを受信することができます。

参考

3. 参考

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。

関連記事

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …

Web

HTTP クッキーをより安全にする SameSite 属性について (Same-site Cookies)

HTTP クッキー(Cookie) をより安全に使用することができる SameSite 属性 について説明します。 目次1. HTTP クッキーの基本動作2. クッキーの SameSite 属性につい …

Web

HTTP の Range ヘッダフィールドを使い、ページの一部分だけを取得する

HTTP/1.1 の Range ヘッダフィールドを使って、ページの一部分のみを取得する実験です。 目次1. Range ヘッダフィールドとは?2. 環境3. 使うツール4. 対象ページ5. 実験6. …

Web

【HTML】img 要素の srcset 属性 と sizes 属性について

目次1. デバイスピクセル比2. img 要素の srcset 属性 と sizes 属性3. sizes 属性4. srcset 属性x 単位で画像ファイルのサイズを指定する場合w 単位で画像ファイ …

Web

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順

目次1. AMP とは?なぜ、AMP が必要なのか?AMP フレームワーク1. AMP HTML2. AMP JS3. AMP キャッシュその他2. AMP for WordPress プラグインにつ …