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

Chrome 73 の新機能

Pete LePage

Chrome 73 では、次のサポートが追加されました。

署名付き HTTP 交換により、移植可能なコンテンツを簡単に作成できます。
コンストラクタブルスタイルシートを使用すると、スタイルの動的な変更が大幅に容易になります。
Mac でのプログレッシブウェブアプリのサポートが開始され、すべてのデスクトッププラットフォームとモバイルプラットフォームで PWA がサポートされるようになりました。これにより、ウェブ経由で配信されるインストール可能なアプリを簡単に作成できるようになります。

他にもさまざまな機能があります。

Pete LePage と申します。Chrome 73 のデベロッパー向けの新機能について詳しく見てみましょう。

変更履歴

ここでは主なハイライトのみを取り上げています。Chrome 73 のその他の変更点については、以下のリンクを確認してください。

どこでも使えるプログレッシブウェブアプリ

プログレッシブウェブアプリは、ウェブを介して直接構築、配信される、インストール可能なアプリのようなエクスペリエンスを提供します。Chrome 73 では macOS のサポートが追加され、すべてのデスクトッププラットフォーム（Mac、Windows、ChromeOS、Linux、モバイル）でプログレッシブウェブアプリがサポートされるようになり、ウェブアプリの開発が容易になりました。

Progressive Web App は高速で信頼性も高く、ネットワーク接続に関係なく常に同じ速度で読み込みと実行を行います。デバイスの機能を最大限に活用する最新のウェブ機能を通じて、リッチで魅力的なエクスペリエンスを提供します。

ユーザーは Chrome のコンテキストメニューから PWA をインストールできます。また、デベロッパーが beforeinstallprompt イベントを使用してインストールエクスペリエンスを直接プロモートすることもできます。インストールされると、PWA は OS と統合され、ネイティブアプリケーションのように動作します。ユーザーは他のアプリと同じ場所から PWA を見つけて起動できます。PWA は独自のウィンドウで実行され、タスク切り替えツールに表示され、アイコンに通知バッジを表示できます。

Google は、ウェブとネイティブの機能のギャップを埋め、ウェブで提供される最新のアプリケーションの堅固な基盤を提供したいと考えています。Google では、ファイルシステム、ウェイクロック、アドレスバーにアンビエントバッジを追加して PWA をインストールできることをユーザーに知らせること、企業向けのポリシーのインストールなど、さまざまな機能にアクセスできる新しいウェブプラットフォーム機能を追加しています。さらに多くの機能も追加される予定です。

すでにモバイル PWA を作成している場合、デスクトップ PWA も同じです。実際、レスポンシブデザインを使用している場合は、すでに対応済みである可能性が高いです。1 つのコードベースがパソコンとモバイルの両方で機能します。PWA を初めて使用する場合は、その作成の簡単さに驚くことでしょう。

そこから反復処理を開始します。

Signed HTTP Exchange

ウェブパッケージと呼ばれる新しいテクノロジーの一部である Signed HTTP Exchange（SXG）が Chrome 73 で利用可能になりました。Signed HTTP Exchange を使用すると、第三者が配信できる「ポータブル」なコンテンツを作成できます。これは重要な点で、元のサイトの完全性と帰属が保持されます。

Signed Exchange: 概要

これにより、コンテンツの送信元と配信元のサーバーが分離されますが、署名されているため、サーバーから配信されているように見えます。ブラウザでこの署名付き交換が読み込まれると、交換の署名によってコンテンツが元々オリジンからのものであることが示されるため、アドレスバーに URL を安全に表示できます。

署名付き HTTP 交換により、ユーザーへのコンテンツ配信を高速化できます。これにより、証明書の秘密鍵の管理権限を放棄することなく CDN のメリットを享受できます。AMP チームは、Google 検索結果ページで署名付き HTTP 交換を使用して、AMP URL を改善し、検索結果のクリックを高速化することを計画しています。

使用を開始する方法について詳しくは、Kinuko の Signed HTTP Exchanges の投稿をご覧ください。

コンストラクタブルスタイルシート

Chrome 73 で新たに導入された構築可能なスタイルシートは、再利用可能なスタイルを作成して配布するための新しい方法です。これは Shadow DOM を使用する際に特に重要です。

JavaScript を使用してスタイルシートを作成することは、これまでも可能でした。document.createElement('style') を使用して <style> 要素を作成します。次に、そのシートプロパティにアクセスして、基盤となる CSSStyleSheet インスタンスへの参照を取得し、スタイルを設定します。

CSS の準備と適用を示す図

この方法では、スタイルシートが肥大化しがちです。さらに悪いことに、スタイルのないコンテンツが一瞬表示されます。コンストラクタブルスタイルシートを使用すると、共有 CSS スタイルを定義して準備し、それらのスタイルを複数のシャドウルートまたはドキュメントに簡単に重複なく適用できます。

共有 CSSStyleSheet の更新は、それがアドプトされているすべてのルートに適用されます。スタイルシートのアドプトは、シートが読み込まれると高速かつ同期的に実行されます。

使い方は簡単です。CSSStyleSheet の新しいインスタンスを作成し、replace または replaceSync を使用してスタイルシートルールを更新します。

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

詳細とコードサンプルについては、Jason Miller の Constructable Stylesheets: seamless reusable styles の投稿をご覧ください。

その他

これらは、Chrome 73 のデベロッパー向けの変更のほんの一部です。もちろん、他にも多くの変更があります。

matchAll(): 文字列プロトタイプに対する新しい正規表現照合メソッドで、完全な一致を含む配列を返します。
<link> 要素は、HTMLImageElement の srcset 属性と sizes 属性に対応する imagesrcset プロパティと imagesizes プロパティをサポートするようになりました。
Blink のシャドウブラー半径の実装が、Firefox と Safari と一致するようになりました。
Chrome の UI のダークモードが Mac でサポートされるようになりました。Windows でのサポートもまもなく提供されます。また、CSS メディアクエリ prefers-color-scheme の作業も進められています。これは、ユーザーがライトモードまたはダークモードのテーマの使用をリクエストしたかどうかを検出するために使用できます。このバグのトラッキング用バグは、Chrome と Firefox の CSS prefers-color-scheme メディア機能のサポートを追加です。

最新の動画情報を受け取るには、Chrome デベロッパーの YouTube チャンネルにチャンネル登録してください。新しい動画が公開されるとメール通知が届きます。

Pete LePage と申します。Chrome 74 がリリースされ次第、Chrome の新機能についてお知らせします。

Chrome 73 の新機能

変更履歴

どこでも使えるプログレッシブ ウェブアプリ

Signed HTTP Exchange

コンストラクタブル スタイルシート

その他

登録

どこでも使えるプログレッシブウェブアプリ

コンストラクタブルスタイルシート