puppeteer 13.1.1がリリースされました。
Bug Fixes
・use content box for OOPIF offset calculations
https://github.com/puppeteer/puppeteer/releases/tag/v13.1.1
・・・のですがこちらはバグ修正のみなのです。
その前にリリースされたpuppeteer 13.1.0のリリースを見ましょう。
Features
・chromium: roll to Chromium 98.0.4758.0
Bug Fixes
・apply OOPIF offsets to bounding box and box model calls
・correctly compute clickable points for elements inside OOPIFs
・error for pre-existing OOPIFs
https://github.com/puppeteer/puppeteer/releases/tag/v13.1.0
ポイントはChromiumが98になりました。現在配布されているChromeが97ですので、puppeteerのChromiumはバージョンが1つ先行することになります。
では、合わせてChromium 98の変更点をおさらいしておきましょう。
- COLRv1 Color Gradient Vector Fonts
- Origin Trials Region Capture
- Adding auto Keyword for contain-intrinsic-size
- AudioContext.outputLatency
- CSS Color Adjust: ‘only’ Keyword for color-scheme
- document.adoptedStyleSheets is Now Mutable
- High Dynamic Range Color Media Queries
- New window.open() Behavior for Popups, Tabs, and Windows
- Private Network Access Preflight Requests for Subresources
- structuredClone() Method on Windows and Workers
- WebAuthn minPinLength Extension
- Window Controls Overlay for Installed Desktop Web Apps
- WritableStream controller AbortSignal
- Remove SDES Key Exchange for WebRTC
この中でハイライトした興味深いもの2つについて解説します。
New window.open() Behavior for Popups, Tabs, and Windows
windows.open() はポップアップウィンドウを生成するために使われるメソッドです。
Chromium 98ではオプションに popup を指定することで、ポップアップウィンドウ (popup=1) にするか、タブ (popup=0) として開くか、を選択できるようになりました。（タブが使えない環境ではウィンドウになります）
const popup = window.open('_blank','','popup=1'); // ポップアップの場合
const tab = window.open('_blank','','popup=0'); // タブの場合
structuredClone() Method on Windows and Workers
こちらは説明するまでもないでしょう。オブジェクトのディープコピー (Deep Copy) をするメソッドが実装されました。
JavaScriptではオブジェクトの代入はリファレンスのコピーにすぎません。また、Object.assign() で元のオブジェクトをコピーしたとしても、第一階層はコピーされますが、第二階層以降は浅いコピー (Shallow Copy) になり、真にディープコピーするには自前で再帰的にassign()等をする関数を実装する必要がありました。
この structuredClone() は文字通りオブジェクトの再帰的なディープコピーを作ってくれるメソッドになります。自前でディープコピーのメソッドを実装したら自己参照して無限ループになった・・・みたいなことにならずに済むわけです。
ちなみに FireFox は94で対応済、NodeJSは17.0からの対応のようです。
詳細は web.dev を参照してください。また、MDNにも関数の概要が記載されていますので、こちらも読んでおきましょう。
