Chrome 73 の新機能

Chrome 73 では、次の機能がサポートされるようになりました。

他にもいろいろあります。

ピート ルページです。では Chrome 73 の新機能を紹介します

変更ログ

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

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

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

プログレッシブ ウェブアプリは、高速で、信頼性が高いため、ネットワーク接続に関係なく、常に同じ速度で読み込まれて実行されます。デバイスの機能をフルに活用した最新のウェブ機能を通じて、リッチで魅力的なエクスペリエンスを提供します。

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

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

すでにモバイル PWA を作成している場合は、デスクトップ PWA も同様です。実際に、レスポンシブ デザインを使用していれば、そのままでも問題ない可能性が高いです。1 つのコードベースがパソコンとモバイルで動作します。PWA を使い始めたばかりの方は、驚くほど簡単に PWA を作成できます。

  1. マニフェストを追加する
  2. アイコンのセットを作成する
  3. ボイラープレート Service Worker を追加する

その後、さらに作業を繰り返します。

Signed HTTP Exchange

ウェブ パッケージと呼ばれる新しい技術の一部である Signed HTTP Exchange(SXG)が、Chrome 73 で使用できるようになりました。Signed HTTP Exchange を使用すると、第三者が配信できる「ポータブル」なコンテンツを作成できます。これは重要な点であり、元のサイトの整合性と帰属情報を保持します。

Signed Exchange: 本質

これにより、コンテンツの配信元と配信元のサーバーが切り離されますが、コンテンツは署名されているため、サーバーから配信されているように見えます。ブラウザがこの Signed Exchange を読み込むと、アドレスバーに URL を安全に表示できます。これは、エクスチェンジの署名によって、コンテンツが送信元から生成されたものであることが示されるためです。

Signed HTTP Exchange を使用すると、ユーザーへのコンテンツ配信を高速化できるため、証明書の秘密鍵の制御を譲渡することなく、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: Simply reusable styles」の投稿をご覧ください。

など多数

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

  • matchAll() は、文字列プロトタイプに対する新しい正規表現マッチング メソッドで、完全一致を含む配列を返します。
  • <link> 要素が、HTMLImageElementsrcset 属性と sizes 属性に対応する imagesrcset プロパティと imagesizes プロパティをサポートするようになりました。
  • Blink のシャドウぼかし半径の実装が、Firefox や Safari に対応するようになりました。
  • Chrome の UI でダークモードが Mac でサポートされるようになりました。Windows のサポートも予定されています。また、CSS メディアクエリの prefers-color-scheme に関する取り組みも発表しています。これを使用して、ユーザーがライトモードまたはダークモードの使用をシステムにリクエストしたかどうかを検出できます。この問題のトラッキング バグは、CSS prefers-color-scheme メディア機能のサポートの追加ChromeFirefox の場合)です。

チャンネル登録

最新の動画をご覧になりたい場合は、ぜひ Chrome Developers YouTube チャンネルご登録ください。新しい動画が公開されるたびにメール通知が届きます。

Chrome 74 のリリース時に Chrome の新機能をお知らせします