如何使用 puppeteer 缓存文件答案

【问题标题】：How to cache file with puppeteer如何使用 puppeteer 缓存文件
【发布时间】：2021-09-18 03:29:50
【问题描述】：

我想知道如何用 puppeteer 缓存一个文件，所以我不必在脚本启动时再次加载它，假设我有这个脚本：

async function run () {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto("https://www.amazon.com/");
 browser.close();
}
run();

好吧，如果我想保存 html 以便不必再次加载它，我该怎么做？我研究并找到了How can I disable cache in puppeteer?，但我在答案和问题中都没有找到很多细节，有人可以向我解释一下如何将html保存在缓存中吗？

【问题讨论】：

您能再解释一下吗？ Puppeteer 模拟浏览器的行为，因此它缓存资源的方式与浏览器相同。你想解决什么问题？
@Drag13 好吧，我不确定它是否再存储 html，例如，如果我有一个在 html 中引用的 javascript 文件（javascript 文件与 html 分开），我怎么能保存与 html 分开的 javascript 文件，以便再次使用而无需再次加载它
@Drag13 假设您想缓存这个test.js 文件以便再次使用而不必重新加载它，我该怎么做？我想保存文件，以便在需要时使用，而无需重新加载
如果您在一个会话期间进行测试并且您没有手动禁用缓存并且缓存标头存在于您的静态资源中，它将自动完成，就像浏览器一样。如果您想在两次启动之间缓存资源 - 您必须在测试之前“温暖”（加载一次）页面以缓存资源
@Drag13 我相信例如 html 没有被缓存，因为如果我尝试在线访问任何页面然后停止运行脚本并尝试打开同一页面但离线页面不会加载，如果它不加载它不正确存储在缓存中？

标签： javascript node.js puppeteer

【解决方案1】：

Puppeteer 在后台使用 Chrome（或 FireFox）浏览器，以防万一：

这不是第一次访问（缓存已满）
资源具有正确的缓存标头且未过期（缓存控制等）
您没有手动禁用缓存

await page.setCacheEnabled(false);
await pageSession.send('Network.setCacheDisabled', { cacheDisabled: true });

资源已被缓存，您无需手动执行任何操作。

但是，如果您想在缓存页面上进行测试，您需要在测试之前对其进行预热，就像在示例中一样：

async function warmingBrowser(url: URL, pageInstance: Page) {
    await pageInstance.goto(url.href, { waitUntil: 'networkidle0' });
    await pageInstance.close();
}

代码取自perfrunner

如果您想让它完全脱机工作 - Puppeteer 对此无济于事，您需要使用 ServiceWorker 实现自己的缓存策略。

但是这一步有一些陷阱（确切地说是缓存和使缓存无效），所以要注意。

【讨论】：

【解决方案2】：

您可以使用 setRequestInterception 并手动响应您想要的：

page.setRequestInterception(true)
page.on('request', (req) => {
    if (req.url() == 'your_url' && <there is a cached value>) {
        
        return request.respond({ status: 200, body: <your_cached_body>, <your_cached_headers> });
    }
...
});

如果尚未保存，则缓存请求：page.on('requestfinished', async (request) => { if (request.url() hasn't been saved yet) { save...} ...

【讨论】：

将请求拦截设置为true会禁用本机缓存。
是的，但这不是问题。为了实现你自己的缓存机制，你需要大约 10 行代码和一个数据库。