Testing Service Workers with Puppeteer
Posted: 2024-01-06
Warning: Technical content inside 😉
Service Worker is a JavaScript that your browser runs in the background. It is not part of the web page, rather it allows to add additional features like push notifications or background synchronization.
Browser enforces very strong security mechanism around service worker: - script can only be started from a https or localhost urls - no code can be injected from web page - service worker is not allowed to access DOM directly - service worker can communicate with web pages it controls by responding to messages sent via postMessage api
Protections around code injection makes testing of service workers complicated, however Puppeteer is a tool that can help with that. Puppeteer communicates with Chrome browser via Chrome DevTools Protocol - CDP. This means we have access to networking events.
The easy way with setRequestInterception unfortunately does not work reliably with service workers. They operate in a different target context so we need to use CDP directly.
The following code snippet shows how to do this:
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('https://example.com')
browser.on('targetcreated', async (target) => {
const client = await target.createCDPSession()
await client.send('Network.enable')
client.on('Network.requestWillBeSent', params => {
console.log( 'target: ', target.name, 'params: ', params)
}
}
We register a callback which puppeteer will call when a new target is created (example: a new page or new service worker). Then we register another callback on CDP client with method Network.requestWillBeSent which allows us to inspect traffic from Service Worker and perform necessary testing activities.
Hurray! We have achieved state of inception: a callback in a callback aka callback-hell.