Skip to content

Instantly share code, notes, and snippets.

@giacomozecchini
Last active April 21, 2022 06:55
Show Gist options
  • Save giacomozecchini/5872c56ab8e3025c5f647538043138da to your computer and use it in GitHub Desktop.
Save giacomozecchini/5872c56ab8e3025c5f647538043138da to your computer and use it in GitHub Desktop.
This script checks if a page is bfcache eligible and prints reasons if it isn't. It can be easily modified to check multiple pages.
// This script checks if a page is bfcache eligible and prints reasons if it isn't.
// It can be easily modified to check multiple pages.
// Chrome crbug: https://bugs.chromium.org/p/chromium/issues/detail?id=1312486
// Puppeteer issue: https://github.com/puppeteer/puppeteer/issues/8182
const puppeteer = require('puppeteer');
(async () => {
// Configuring and launching the browser
const browser = await puppeteer.launch({
headless: false,
args: [
'--window-size=1920,1080',
'--enable-features=BackForwardCache' // Enabling BackForwardCache, some versions of Puppeteer have this disabled by default (https://github.com/puppeteer/puppeteer/pull/8196)
]
});
try {
const page = await browser.newPage();
await page.setViewport({
width: 1920,
height: 1080
});
// Creating a CDP Session to listen for CDP Page events
const session = await page.target().createCDPSession();
await session.send('Page.enable');
// Defining the URL you want to test and creating the output object
const url = new URL('https://developer.google.com/');
const output = {
'url': url,
'notRestoredReason': []
};
// Listening for a CDP Page.backForwardCacheNotUsed event and adding the notRestoredExplanations to the output object if present
session.on('Page.backForwardCacheNotUsed', async (bfcache) => {
if (bfcache.notRestoredExplanations){
output.notRestoredReason = bfcache.notRestoredExplanations;
}
});
// Navigating to the URL. Update the waitUntil and timeout options according to your website rendering behaviour
const navigationOptions =
await page.goto(url, {
waitUntil: 'networkidle2', // Navigation is considered to be completed when there are no more than 2 network connections for at least 500 ms
timeout: 0 // No timeout
});
// Navigating to chrome://terms copying what the DevTools bfcache test does
await page.goto('chrome://terms');
// Navigating back to the URL. Using a workaround as Puppeteer it seems to have a bug when a page is restored correctly from the bfcache
try {
await page.goBack({
waitUntil: 'networkidle2', // Navigation is considered to be completed when there are no more than 2 network connections for at least 500 ms
timeout: 240 // Setting a very long timeout because when bfcache is used a TimeoutError is fired instantaneously (Puppeteer issue?). The waitUntil event will be fired before the timeout.
});
} catch (error){
// We are expecting a TimeoutError if the page is using bfcache correctly
if (error.name != 'TimeoutError'){
console.log(error);
}
}
// Closing the page
await page.close();
// Closing the browser
await browser.close();
// Printing the result
console.log(JSON.stringify(output, null, 4));
} catch (error) {
// Printing errors
console.log(error);
} finally {
// Closing the browser if an error occurs, no mercy for zombies
await browser.close();
}
})()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment