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

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

関連記事

Web

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)

ウェブブラウザが、HTTP/1.1 もしくは HTTP/2 のどちらを使うか判定する仕組み (httpsスキームのみ)について説明します。

Web

window.opener を使って元ウィンドウの情報が取得できるかどうかの実験

ウェブブラウザでウェブページを表示している場合、ブラウザのウィンドウを表す window というオブジェクトが存在しており、JavaScript から利用することができます。 window.opene …

Google

Google マップの地図をウェブページに埋め込む手順

Google マップの地図を、ウェブページに埋め込む手順について説明します。 手順自体は簡単なのですが、Google マップの仕様が時々変わり、操作手順もその影響を受けることがあるため、現時点(201 …

Web

<pre><code>タグが引き起こす モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」

<pre><code>タグが、モバイルユーザビリティのエラー「コンテンツの幅が画面の幅を超えています」を引き起こしていました。

DokuWiki

DokuWiki のアクセス設定チェックが面白い

目次1. It seems your data directory is not properly secured.2. 対応方法3. 珍しいアクセスチェックの仕組み4. おわりに 1. It see …