Puppeteer and ServiceWorkers offline mode

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.3.0
• Platform / OS version: CentOS 7 x64
• URLs (if applicable): -
• Node.js version: 8.11.1

What steps will reproduce the problem?

Please include code that reproduces the issue.

1. Initialise empty project with puppeteer
2. Create test file with following content

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox']});
  const page = await browser.newPage();
  page.on('console', msg => console.log('PAGE LOG:', msg.text()));
  await page.goto('https://googlechrome.github.io/samples/service-worker/custom-offline-page/', { waitUntil: 'networkidle0' });
  console.log('Setting app offline');
  await page.setOfflineMode(true);
  await page.waitFor(1*2000);
  await page.reload();
  await page.waitFor(1*2000);
  await page.screenshot({path: 'test.png'});
});

1. Check the resulting screenshot, the page was reloaded but the offline mode was not applied.

What is the expected result?

The resulting screenshot will contain offline page as in classic example https://googlechrome.github.io/samples/service-worker/custom-offline-page/

What happens instead?

Seems like the offline mode is not applied and the page is loaded regularly.

StackOverflow question for reference: Service worker installation in Headless Chrome (via puppeteer)

[mdiblasio]

Is there any update on how to run offline tests that also disable the network for service workers?

[ebidel]

Yea this is weird. I’d expect this example to work as you’ve outlined.

The main page gets cached offline (expected) but it appears the SW isn’t intercepting the network requests, and therefore, not serving the fallback content.

Slightly modified repro.

const puppeteer = require('puppeteer');

const url = 'https://googlechrome.github.io/samples/service-worker/custom-offline-page/';

(async() => {
const browser = await puppeteer.launch({
  headless: false,
});

const page = await browser.newPage();
page.on('console', msg => console.log('PAGE LOG:', msg.text()));
await page.goto(url, {waitUntil: 'networkidle0'});
await page.evaluate('navigator.serviceWorker.ready');

console.log('Going offline');
await page.setOfflineMode(true);

 // Does === true for the main page but the fallback content isn't being served.
page.on('response', r => console.log(r.fromServiceWorker()));

await page.reload({waitUntil: 'networkidle0'});

// await browser.close();
})();