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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

SQLite

PHP + SQLite を利用してアクセスカウンターを作る

PHP + SQLite を利用してアクセスカウンターを作ります。

WordPress

「Build a Custom WordPress User Flow」を試してみました

目次1. はじめにソースコード2. 全体3. Part 1: Replace the Login Page使用している関数アクションフィルタ4. Part 2: New User Registrati …

Chrome

ブロックされた Cookie を確認する方法 (Chrome の場合)

Chrome ブラウザにおいて、ブロックされた Cookie を確認する方法について説明します。

Web

rel=”preload” によってリソースを先読みさせる

目次1. rel=”preload” について読み込みは非同期に実行され、レンダリングをブロックしない通常の読み込み処理の記述が別に必要2. デモページ3. その他の特徴as …

Web

AMP に関する情報

AMP 本来の目的からずれているように見える。この機能は必要?