必知事項は次のとおりです。
- ブラウザに組み込まれている
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 DevTools の新機能(95)
- Chrome 95 のサポート終了と削除
- ChromeStatus.com の更新内容(Chrome 95)
- JavaScript の新機能(Chrome 95)
- Chromium ソース リポジトリの変更リスト
- Chrome リリース カレンダー
登録
最新情報を入手するには、登録してください Chrome Developers YouTube チャンネル 新しい動画が公開されるたびに メールでも通知されます
Chrome 96 がリリースされたらすぐに Google の Chrome の新機能を紹介します