An interesting recent browser API for me.

• Worker上の複数のWebAssembly instance間でメモリを共有可能にする

  • https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas

• Canvasのパフォーマンスヒントを追加(低レイテンシーモード)。ペン・スタイラス用途

  • https://www.chromestatus.com/feature/5648950090530816

• WebAuthn による安全なクライアント認証 API

  • https://www.chromestatus.com/feature/5669923372138496
  • http://www.publickey1.jp/blog/18/webauthnchromefirefoxedgew3cweb.html

• メモリプレッシャーイベント navigator.onmemorypressure -https://www.chromestatus.com/feature/5719614029824000

• 新しい汎用センサーAPI

  • https://www.chromestatus.com/feature/5698781827825664

• CustomElements で class NewButtonElement extends HTMLButtonElement を可能に

  • これまでは class NewbuttonElement extends HTMLElement しかできなかった
  • https://www.chromestatus.com/feature/4670146924773376

• CSS Selector Lv4 :focus-visible セレクタ

  • https://www.chromestatus.com/feature/5823526732824576

• node.classList.replace():void が replace():boolean に

  • 実際に書き換えが発生したかを知るための contains() が不要になりコードがコンパクトに
  • https://www.chromestatus.com/feature/5690841569951744

• Array.prototype.{flatten,flatMap}

  • https://www.chromestatus.com/feature/6629507075145728

• AudioWorklet

  • 従来の ScriptProcessorNode は非推奨に
  • https://www.chromestatus.com/feature/4588498229133312

• WebXR Device API (VR + AR = XR)

  • https://www.chromestatus.com/feature/5680169905815552

• WebSockets over HTTP/2

  • https://www.chromestatus.com/feature/6251293127475200

• WebAudio: Remove dezippering

  • https://www.chromestatus.com/feature/5287995770929152

• Web Locks API

  • 複数タブにまたがるリソースのロック。タブ間の協調動作を可能に
  • https://www.chromestatus.com/feature/5287995770929152

• ImageBitmap render for Canvas

  • リソースの無駄を抑え最適化されたレンダリングを可能に
  • https://www.chromestatus.com/feature/5709799995998208

• catch (error) を catch() または catch と書けるようにする

  • https://www.chromestatus.com/feature/5810795665424384

• 存在しない blob URL を読み込ませた場合に404を返さずネットワークエラーにする

  • https://www.chromestatus.com/feature/5689937680662528

• Media Capabilities: decoding API

  • メディアを実際にデコードする前に、デコード可能かどうかをより詳しく調べる事が可能に
  • video.canPlayType(“foo/bar”) が ‘maybe’ を返してくるので困ってた人々への福音?
  • https://www.chromestatus.com/feature/5869632707624960

• Link rel=modulepreload

  • モジュールを事前にロードする事を指示することができる
  • 既に普段使いしている機能
  • https://www.chromestatus.com/feature/5762805915451392

• JSON の文字列に U+2028 と U+2029 を使用する事を可能に

  • JSON の仕様を ECMAScript 側に寄せた
  • https://www.chromestatus.com/feature/6102319234023424

• Fetch API の options で keepalive の指定が可能に

  • https://www.chromestatus.com/feature/5760375567941632

• Fetch API を cancel 可能に

  • AbortController と signal を使用することで XHR の abort() 相当の振る舞いを再現可能に
  • https://developers.google.com/web/updates/2017/09/abortable-fetch
  • https://www.chromestatus.com/feature/5631483679080448

• MediaQuery 内部で CSS calc() を使用可能に

  • https://www.chromestatus.com/feature/5643732019838976

• new CSS Typed Object Model

  • CSS を js から文字列ではなく px や em といった型付きのまま扱う事ができる新しいAPIを提供
  • https://developers.google.com/web/updates/2018/03/cssom
  • https://www.chromestatus.com/feature/5682491075592192

• Text以外のオブジェクトも扱う事ができる非同期クリップボードAPI

  • document.execCommand() を過去の遺物にする新しいAPI
  • 画像やユーザ定義オブジェクトなどもゆくゆくは扱えるようにするらしい
  • https://www.chromestatus.com/feature/5861289330999296

• PerformanceEntry.toJSON()

  • パフォーマンス情報のJSON化が簡単に
  • https://www.chromestatus.com/feature/6730557958389760

• CSS display: contents

  • display: contents 要素はboxを作成しないが、子要素は作成する
  • ユースケースがまだよくわからない…
  • https://www.chromestatus.com/feature/5663606012116992

• Worklet

  • 新しい Thread API。 Worker を置き換えてゆくもの
  • AudioWorket や PaintWorket もあるよ
  • https://www.chromestatus.com/feature/5275637463908352

• CSS Paint API

  • div { background-image: paint(“foo”); } で描画スペースを予約し
  • CSS.paintWorklet.addModule(“Foo.js”); で Foo.js を module としてロードして
  • class Foo { paint(ctx, geom, props) { … } } registerPaint(“foo”, Foo); するとCanvas APIで自由にレンダリング
  • https://www.chromestatus.com/feature/5685444318593024