Cloudflare Browser Rendering(浏览器呈现) 使用指南[待更新]

前言

在学习Cloudflare Browser Rendering(浏览器呈现) 使用时积累了一些知识，内容来源：Puppeteer

更多和cloudflare + puppeteer 的知识来源，见这个docs/api/puppeteer.page.md

获取页面加载指标,并以json的形式返回

import puppeteer from "@cloudflare/puppeteer";

export default {
    async fetch(request, env) {
        const browser = await puppeteer.launch(env.MYBROWSER);
        const page = await browser.newPage();
        await page.goto("https://example.com");
        const metrics = await page.metrics();
        await browser.close();
        return Response.json(metrics);
    },
};

保持链接

如果用户省略 browser.close() 语句，它将保持打开状态，准备再次连接并重新使用，但默认情况下，它将在不活动 1 分钟后自动关闭。

用户可以选择使用 keep_alive 选项将此空闲时间延长至 10 分钟（以毫秒为单位设置）：

const browser = await puppeteer.launch(env.MYBROWSER, { keep_alive: 600000 });

使用上述内容，浏览器将保持打开状态长达 10 分钟，即使处于非活动状态也是如此。

会话管理

获取打开的会话

puppeteer.sessions() 列出了当前正在运行的会话。它将返回类似下面的输出：

[
  {
    "connectionId": "2a2246fa-e234-4dc1-8433-87e6cee80145",
    "connectionStartTime": 1711621704607,
    "sessionId": "478f4d7d-e943-40f6-a414-837d3736a1dc",
    "startTime": 1711621703708
  },
  {
    "sessionId": "565e05fb-4d2a-402b-869b-5b65b1381db7",
    "startTime": 1711621703808
  }
]

请注意，会话 478f4d7d-e943-40f6-a414-837d3736a1dc 有一个活动的 Worker 连接（connectionId=2a2246fa-e234-4dc1-8433-87e6cee80145），

而会话 565e05fb-4d2a-402b-869b-5b65b1381db7 是空闲的。当连接处于活动状态时，其他工作站无法连接该会话。

获取最近的会话

puppeteer.history() 列出最近的会话，包括开放的和封闭的。了解你当前的使用情况很有用。

[
  {
    "closeReason": 2,
    "closeReasonText": "BrowserIdle",
    "endTime": 1711621769485,
    "sessionId": "478f4d7d-e943-40f6-a414-837d3736a1dc",
    "startTime": 1711621703708
  },
  {
    "closeReason": 1,
    "closeReasonText": "NormalClosure",
    "endTime": 1711123501771,
    "sessionId": "2be00a21-9fb6-4bb2-9861-8cd48e40e771",
    "startTime": 1711123430918
  }
]

会话 2be00a21-9fb6-4bb2-9861-8cd48e40e771 已由客户端使用 browser.close() 明确关闭，而会话 478f4d7d-e943-40f6-a414-837d3736a1dc 则因达到最大闲置时间（检查限制）而关闭。

你还应该能够在仪表板中访问此信息，尽管会稍有延迟。

活动限制

puppeteer.limits() 会列出您的活动限制：

{
  "activeSessions": [
    "478f4d7d-e943-40f6-a414-837d3736a1dc",
    "565e05fb-4d2a-402b-869b-5b65b1381db7"
  ],
  "allowedBrowserAcquisitions": 1,
  "maxConcurrentSessions": 2,
  "timeUntilNextAllowedBrowserAcquisition": 0
}

• activeSessions 列出当前打开会话的 IDs
• maxConcurrentSessions 定义可以同时打开的浏览器数量
• allowedBrowserAcquisitions 指定是否可以根据现有的速率限制打开新的浏览器会话
• timeUntilNextAllowedBrowserAcquisition 定义新浏览器之前的等待时间可以启动。

抓取html内容

代码:browser-worker

使用时：https://xxx.com/?url=https://runnable.run

import puppeteer from "@cloudflare/puppeteer";

export default {
	async fetch(request, env) {
		const { searchParams } = new URL(request.url);
        let url = searchParams.get("url");

        const browser = await puppeteer.launch(env.MYBROWSER);
        const page = await browser.newPage();
        await page.goto(url);
        const pageHtml = await page.content();
        await browser.close();
        return new Response(pageHtml, {
            headers: {
                'Content-Type': 'text/html'
            },
        });
	},
};


async function handleRequest(request, env){
	const { searchParams } = new URL(request.url);
	let url = searchParams.get("url");

	const browser = await puppeteer.launch(env.MYBROWSER);
	const page = await browser.newPage();
	await page.goto(url);
	const pageHtml = await page.content();
	await browser.close();
	return new Response(pageHtml, {
		headers: {
			'Content-Type': 'text/html',
		},
	});
}