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

Chrome 95 の新機能

Pete LePage

必知事項は次のとおりです。

ブラウザに組み込まれている URLPattern により、ルーティングがより簡単になります。
Eye Dropper API には、できます。
新しいオリジントライアルで削減された UA 文字列が追加されました。
PWA Summit の動画はすべてオンラインでご覧いただけます。
他にも多くの機能を利用できます。

私はピートルページです。仕事も、撮影もしています。では、Chrome 95 のデベロッパー向け新機能を見てみましょう。

`URLPattern` でルーティング

ほぼすべてのウェブアプリが、コードが実行されているか、実行されているかにかかわらず、なんらかの形でルーティングに依存しているディスク上のファイルへのパス、またはシングルページアプリのロジックをマッピングするサーバー上 URL が変更されたときに DOM を更新することができるようにしました。URLPattern は新しいウェブですルーティングパターンの構文を標準化するためのプラットフォーム API です。

既存のフレームワークを基盤として構築されているため、実行が容易一般的なルーティングタスクについて説明します。たとえば、完全な URL や URL を pathname を返し、トークンとグループ一致に関する情報を返します。

Express で使用されているルーティング構文に慣れている場合は、 Ruby on Rails、path-to-regexp など、これはおそらく見覚えがあるでしょう。

使用するには、新しい URLPattern() を作成し、必要な詳細情報を指定します照合されます。パターンには、ワイルドカード、名前付きトークングループ、正規表現グループ、グループ修飾子を利用できます

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

たとえば、Google ドキュメントで使用される URLPattern を見てみましょう。ファイルの kind、ファイル ID、ファイルを開く mode を指定します。次に、このパターンを使用するために、test() または exec() を呼び出します。

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

Chrome と Edge バージョン 95 以降では、URLPattern がデフォルトで有効になっています。 Node などでサポートされていないブラウザや環境では urlpattern-polyfill ライブラリを使用できます。

Jeff の記事「URLPattern によりウェブプラットフォームにルーティングを提供」を確認するをご覧ください。

Eye Dropper API で色を選ぶ

私がこれまで使ったデザインアプリのほとんどにスポイトツールが備わっているので、何色かがわかりやすいです一部のブラウザではスポイトツールが機能が<input type=color>組み込まれていますが、理想的ではありません。

Microsoft の一部のチームが実装したスポイト API は、ウェブに公開しました使用するには、新しい EyeDropper() を作成してください open() を呼び出します。

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

他の多くの最新のウェブ API と同様に、非同期に動作するため、メインスレッドをブロックしません。好みの色をクリックするとクリックした色で解決します

簡単なデモをお試しください。コードをご覧ください。

PWA サミット

今月初めに PWA サミットに参加できましたか？

多くの方が PWA について話し合ったり、体験できます見逃した方も、動画はすべてアップされていますので、ぜひチェックしてください PWASummit.org または PWA Summit の YouTube チャンネル。

ユーザーエージェントの情報量削減オリジントライアル

User-Agent Reduction（ユーザーエージェントの情報量削減）は、使用して、User-Agent の情報を減らし、ブラウザのブランドと重要なバージョン、デスクトップまたはそのプラットフォームが異なるのです

Chrome 95 以降では、新しいオリジントライアルが導入されます。を使用すると、削減された UA 文字列を受け取ることができるようになります。有効にすると短縮された UA がデフォルトになる前に問題を発見して修正動作を確認します。

この変更は複数のリリースで段階的に適用されますが、準備とテストに必要なすべての準備がすぐに整いました

詳細とタイムラインはすべて、 User-Agent Reduction origin trial（User-Agent の情報量削減のオリジントライアル） developer.chrome.com.

その他

もちろん、他にもたくさんあります。

Storage Foundation API の作業を完了している場合は、新しいアクセスハンドルのオリジントライアルを開始します。
WebAssembly は、例外処理のサポートを提供するようになりました。例外がスローされたときにコードが制御フローを中断できます。
Chrome 100 が来年登場します。つまり、キャンペーンのコードでは 2 桁を超える数字を処理できます。

Chrome 95 の新機能

URLPattern でルーティング

Eye Dropper API で色を選ぶ

PWA サミット

ユーザー エージェントの情報量削減オリジン トライアル

その他

関連情報

登録

`URLPattern` でルーティング

ユーザーエージェントの情報量削減オリジントライアル