[Feature] support route aka request interception for service workers #1090
Description
Hi,
I'd like to be able to include markup directly instead of using page.goto to a remote address. I currently have a small example here of what I've tried out but it appears that 'serviceWorker' in navigator is returning false and registering a service worker fails.
I've tried page.setContent as well and I had the same results.
Can anyone tell me what I'm missing? The example I am running:
const { chromium } = require('playwright');
const msg = 'hi';
const serviceWorkerPath = '/sw.js';
const serviceWorkerScope = '/';
const serviceWorker = `console.log("${msg}");`;
const html = `<!doctype html>
<html>
<head>
<title>One Service Worker</title>
</head>
<body>
<script type="text/javascript">
console.log('serviceWorker' in navigator);
try {
navigator.serviceWorker.register('${serviceWorkerPath}', {
scope: '${serviceWorkerScope}'
});
} catch (e) {
console.error(e);
}
</script>
</body>
</html>
`.trim();
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.route('**/*.html', async request =>
request.fulfill({
status: 200,
contentType: 'text/html',
body: html,
}),
);
await page.route(serviceWorkerPath, request =>
request.fulfill({
status: 200,
contentType: 'text/javascript',
body: serviceWorker,
}),
);
await page.goto('http://example.com/index.html', {
waitUntil: 'load',
});
const sw = await page.evaluate(`window.navigator.serviceWorker`);
console.log(sw);
if (sw) {
const swTarget = await browser.waitForTarget(target => target.type() === 'service_worker');
const worker = await browser.serviceWorker(swTarget);
// use worker target/handle
}
await browser.close();
})();