diff --git a/src/content/docs/browser-rendering/workers-binding-api/reuse-sessions-with-geolocation.mdx b/src/content/docs/browser-rendering/workers-binding-api/reuse-sessions-with-geolocation.mdx new file mode 100644 index 00000000000000..88b7d2c8814265 --- /dev/null +++ b/src/content/docs/browser-rendering/workers-binding-api/reuse-sessions-with-geolocation.mdx @@ -0,0 +1,126 @@ +--- +pcx_content_type: get-started +title: Reuse sessions with geolocation +sidebar: + order: 4 +--- + +import { Render, PackageManagers, WranglerConfig } from "~/components"; + +This guide explains how to build a Cloudflare Worker that renders a web page using a fork of Puppeteer. Each request launches a new browser session (with the session location set to Afghanistan in this case) to navigate to the specified URL and return the HTML content of the page. + +## 1. Create a Worker project + +[Cloudflare Workers](/workers/) provides a serverless execution environment that allows you to create new applications or augment existing ones without configuring or maintaining infrastructure. Your Worker application is a container to interact with a headless browser to do actions, such as taking screenshots. + +Create a new Worker project named `browser-worker` by running: + + + + + +## 2. Install Puppeteer + +In your `browser-worker` directory, install Cloudflare's [fork of Puppeteer](/browser-rendering/platform/puppeteer/): + +```sh +npm install @cloudflare/puppeteer --save-dev +``` + +## 3. Configure the [Wrangler configuration file](/workers/wrangler/configuration/) + + +```toml +name = "browser-worker" +main = "src/index.ts" +compatibility_date = "2023-03-14" +compatibility_flags = [ "nodejs_compat" ] + +browser = { binding = "MYBROWSER" } + +```` + + +The binding `MYBROWSER` allows the Worker to interact with the headless browser. + +## 4. Implement the Worker Code + +Replace your default code with the following updated script. This code launches a new browser session for every request, sets the session’s location to Afghanistan, navigates to the provided URL, and returns the HTML content of the page. + +```ts + +import puppeteer from "@cloudflare/puppeteer"; + +export default { + async fetch(request, env, ctx): Promise { + const { searchParams } = new URL(request.url); + let url = searchParams.get('url'); + let html; + if (url) { + url = new URL(url).toString(); // Normalize the URL + // Launch a new browser session with the location set to Afghanistan ('AF') + const browser = await puppeteer.launch(env.MYBROWSER, { location: 'AF' }); + const page = await browser.newPage(); + await page.goto(url); + html = await page.content(); + await browser.close(); + return new Response(html); + } else { + return new Response('Please add an ?url=https://example.com/ parameter'); + } + }, +} satisfies ExportedHandler; +``` + +### Key points + +- Session management: + A new browser session is launched for every incoming request. The session is automatically closed after retrieving the page content. + +- Location specification: + The browser session is configured to run with a location parameter set to `'AF'` (Afghanistan). + +- URL validation: + The script checks for a valid URL in the query string, normalizes it, and handles the case where the URL is not provided. + +## 5. Test the Worker + +Since local testing for browser rendering is not supported, run your Worker remotely by executing: + +```sh +npx wrangler dev --remote +``` + +Test the Worker by navigating to the following URL (replace `` with the appropriate endpoint): + +```sh +/?url=https://example.com +``` + +## 6. Deploy the Worker + +After testing, deploy your Worker to Cloudflare’s global network with: + +```sh +npx wrangler deploy +``` + +Once deployed, your Worker will be accessible at: + +```sh + +..workers.dev/?url=https://example.com``` + +```