ウェブ開発エコシステム チーム - 2 月のまとめ

Mariko Kosaka
X
ウェブ デベロッパー エコシステム チームの進捗状況を振り返る月刊まとめのパート 1 へようこそ ✨

Google は、こちらのウェブサイトのウェブの基礎や、新しいポータル web.dev など、記事やコードサンプルを作成するエンジニア / コミュニケーターのチームです。また、YouTube チャンネルで Google の取り組みをご覧いただけます。また、@ChromiumDev をフォローしていただくのもお忘れなく。

2 月は短い月ですが、確実にコンテンツが充実しています。まずは 大規模なリリースから始めましょう

リリース

Workbox

つい数日前に Workbox 4.0 がリリースされました。🎉? このリリースには、workbox-window などの優れた新機能と、既存の多くの Workbox パッケージの改善が含まれています。すでに Workbox を使用している場合は、v3 から v4 への移行ガイドをご覧ください。既存のプロジェクトで Workbox を使用する方法にご興味がある場合は、任意のバンドラでこれらを使用する方法をご覧ください。どの問題用ワークボックスが解決に役立つかわからない場合は、State of the Web ショーで Service Worker に関するインタビューをご覧ください。

lit-html と LitElement

ポリマー プロジェクトのチームは、lit-html と LitElement の安定版リリース（2 つの次世代ウェブ開発ライブラリ）の開発に取り組んでいます。お試しになりたい場合は、LitElement を試すのガイドをご覧ください 📝?

信頼できるウェブ アクティビティ

Chrome 72 のリリースに伴い、Trusted Web Activity（TWA）が市場に投入されました。TWA を使用すると、Android のアクティビティ内に Chrome を全画面表示できます。つまり、ウェブ コンテンツを App-sphere に置くことができます。このスタートガイドを確認するか、@svenbudak が Google Play ストアで PWA をどのように公開しているかをご覧ください。

今後の予定

Chrome 73 安定版のリリース（3 月 12 日）に向けて、魅力的な機能を多数用意しています。

V8 - Chrome の JavaScript エンジンに、Object.fromEntries や String.prototype.matchAll など、多数の更新が実施されています。v8 リリースノートをご覧ください。

ウェブ上の音声と動画を扱っていますか？ハードウェア メディアキーのサポートが開始され、ピクチャー イン ピクチャー ウィンドウで「広告をスキップ」のオリジン トライアルが開始されました。詳しくは、Chrome 73 での音声と動画の更新をご覧ください。

オリジン トライアルといえば、Fetch Priority でフェッチ優先度の準備をすると、デベロッパーは <script>、<img>、または <link> 要素の重要度を設定して、ブラウザでの読み込み方法を指定できます。この機能はまだ試験運用中ですので、ぜひお試しいただき、フィードバックをお寄せください。

レンダリング パフォーマンスは常に最優先事項です。Chrome 73 では、ルート ターゲット（ウィンドウ、ドキュメント、本文）に登録された wheel リスナーと mousewheel リスナーはデフォルトでパッシブ リスナーとなり、デフォルトでホイール スクロールが高速になります。

新機能の提供終了に伴い、Chrome 73 の非推奨と削除も必ずご確認ください。

新規開発

お近くのブラウザに影響するため、Google はさらに次のような取り組みを行っています。

クロスサイト スクリプティングを防ぐために、Trusted Types と呼ばれる新しい API を開発しています。（コンテンツ セキュリティ ポリシーで）信頼できるタイプにオプトインすると、ドキュメントでの DOM インジェクションがロックされます。Google は、これに関する他のコードサンプルやガイドの提供に取り組んでいますが、それまでの間は、Trusted Types の詳細をご覧になり、ぜひお試しください。

Chrome の [戻る] ボタンと [進む] ボタンを押す操作がさらに速くなります。Google は、ユーザーが離れたときにページをメモリ内にキャッシュする新しいバックフォワード キャッシュを検討しています。こちらの投稿の bfcache の説明とプロトタイプをご覧ください。

最後に、Intersection Observr v2 では、ターゲットの実際の「可視性」を追跡するという考え方が導入されています。

調整の対象

私たちの仕事はブラウザの機能だけではありません。また、ウェブ アプリケーションのパフォーマンスを確認し、ウェブアプリを構築して、世界中のウェブ デベロッパーを支援するさまざまな方法を検討します。今月調整された機能の一部をご紹介します。

新しい動画とポッドキャスト

Martin は、JavaScript SEO という新しいシリーズを開始します。最初のエピソードは、Google 検索が JavaScript サイトをインデックスに登録する方法に関するものです。Meggin さんは最近、ミートアップで web.dev プロジェクトの振り返りを発表しました。Jake と Surma が、画像回転のテストについて説明する HTTP203 ポッドキャストの新しいエピソードで帰ってきます。

また、YouTube チャンネルでは、「Chrome の新機能」、「DevTools の新機能」、ウェブの現状など、定期的にニュースを公開しています。

特別な呼びかけ

Puppeteer の例をご覧になったことはありますか？昨年の Eric Bidelman 氏のツイート「📯?The 12 Days of Puppeteer 🤹?いい ♂️🎁?」でご覧になっているかもしれません。Puppeteer のコードサンプルが豊富に収録されているので、ブラウザでできることをクリエイティブに考えられます。ぜひご覧ください。

（あなたの新しい挑戦 Eric が頑張ってください。 またね）

まとめ

最初の月まとめはいかがでしたか？楽しんでいただけた、または改善に関するアイデアがありましたら、Twitter で @kosamari までご連絡ください ✅

ここで紹介した機能を使用して新しいソリューションを構築した場合や、Google の記事に基づいてコードベースに変更を加えた場合は、@ChromiumDev までお知らせください。

3 月には、モバイルウェブの体験について詳しく知るために、何人かがインドに派遣されます ✈️ そこで得た知見を共有できることを楽しみにしています。

来月お会いしましょう 👋?