Last active
April 21, 2022 06:55
-
-
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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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