shiichan

1 つのブラウザを みんなで共有!Browser Run が同時接続に対応

やっほー、しぃちゃんだよ!ブラウザを使い回せるようになる、ちょっとドヤれるアップデートを見つけたよ!

Cloudflare Changelog developers.cloudflare.com

なにが発表されたの?

Cloudflare の Changelog で、Browser Run のセッションが複数の同時接続を受け付けるようになったことが発表されたよ。

今までどうだったの?

これまでは、セッションが同時に受け付ける接続は 1 つだけだったの。ほかの Worker は、その接続が閉じるまで待たなきゃいけなかったんだ。

これで何が変わるの?

複数の Worker が、同じブラウザに同時に接続できるようになったよ!原文では、次のメリットが挙げられているよ。

  • 新しく起動するブラウザが減る
  • コールドスタートの時間が減る
  • 上限にカウントされる同時ブラウザ数が減る

深く潜ってみよう

puppeteer.connect() を呼ぶたびに、それぞれ独立した Chrome DevTools Protocol (CDP) 接続が開くよ。

ほかのクライアントとページ、Cookie、ストレージが混ざらないように、リクエストごとに別のブラウザコンテキストを作るのがおすすめだよ。原文のコード例はこんな流れだよ。

const browser = await puppeteer.connect(env.MYBROWSER, sessionId);
const context = await browser.createBrowserContext();
try {
  const page = await context.newPage();
  await page.goto("https://example.com");
  // ...
} finally {
  await context.close();
  await browser.disconnect(); // keep the shared browser running
}

ポイントは、最後に context.close() でコンテキストを閉じてから、browser.disconnect() で切断しているところだよ。close() ではなく disconnect() だから、共有しているブラウザは動き続けるの。

同時接続を使うには、@cloudflare/puppeteer のバージョン 1.1.0 以降が必要だよ。完全な例は、ドキュメントの Reuse sessions にあるみたい。

まとめ

  • Browser Run のセッションが複数の同時接続に対応した
  • 以前は 1 接続のみで、ほかの Worker は待つ必要があった
  • 接続ごとに独立した CDP 接続が開く
  • リクエストごとにブラウザコンテキストを作ると、ページ・Cookie・ストレージを分離できる
  • @cloudflare/puppeteer 1.1.0 以降が必要

Workers からブラウザ自動化をたくさん回している開発者のみんなに刺さるよ!