Reuse sessions with geolocation

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 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:

npm

npm create cloudflare@latest -- browser-worker

pnpm

pnpm create cloudflare@latest browser-worker

yarn

yarn create cloudflare browser-worker

For setup, select the following options:

• For What would you like to start with?, choose Hello World Starter.
• For Which template would you like to use?, choose Worker only.
• For Which language do you want to use?, choose TypeScript.
• For Do you want to use git for version control?, choose Yes.
• For Do you want to deploy your application?, choose No (we will be making some changes before deploying).

2. Install Puppeteer

In your browser-worker directory, install Cloudflare's fork of Puppeteer:

npm install @cloudflare/puppeteer --save-dev

3. Configure the Wrangler configuration file

wrangler.jsonc

{
  "name": "browser-worker",
  "main": "src/index.ts",
  "compatibility_date": "2023-03-14",
  "compatibility_flags": [
    "nodejs_compat"
  ],
  "browser": {
    "binding": "MYBROWSER"
  }
}

wrangler.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.

import puppeteer from "@cloudflare/puppeteer";

export default {
    async fetch(request, env, ctx): Promise<Response> {
        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<Env>;

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:

npx wrangler dev --remote

Test the Worker by navigating to the following URL (replace <LOCAL_HOST_URL> with the appropriate endpoint):

<LOCAL_HOST_URL>/?url=https://example.com

6. Deploy the Worker

After testing, deploy your Worker to Cloudflare’s global network with:

npx wrangler deploy

Once deployed, your Worker will be accessible at:

<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev/?url=https://example.com```