第6回 TypeScript×Puppeteerで始めるスクレイピング – キャッシュ

キジ(@kiji)です｡今回はキャッシュについてやっていこうと思います｡前回の内容同様､通信量､速度にも関係してくるお話になります｡前回の記事は以下になります｡

301 Moved Permanently

www.libetech.info

本記事でできること

スクレイピングでデータなどを集める際に､同じページを何回も行き来することがあります｡その度に､ブラウザではサーバーにリクエストを投げ､画像ファイルやスクリプトファイルなど､画面を表示するためのファイルを取得するために通信されています｡

Puppeteerのブラウザ操作において､ブラウザキャッシュの制御､及び任意のファイルをだけをキャッシュすることができるようになります｡

環境

$ node -v
v14.17.3

# typescript
4.4.2

# puppeteer
10.2.0

説明

Puppeteerでは､｢setCacheEnabled｣メソッドで制御する事ができます｡しかし､このメソッドではブラウザキャッシュが有効･無効になるだけになります｡

await page.setCacheEnabled( true );

上記では､サーバー側の設定によって､キャッシュできる､できないファイルが出てきます｡そのため､取得するファイルを確認し､Puppeteer側で制御してキャッシュし､キャッシュしたファイルを返却したいと思います｡

返却は｢request｣イベント､キャッシュは｢response｣イベントで実施します｡

const FILE_PATH = './cache/'
page.on('request', (req : HTTPRequest) => {
    let url = req.url();
    let file_name = basename(url);

    // ローカルのキャッシュがある
    if( fs.existsSync(`${FILE_PATH}${file_name}`) ) {
        // キャッシュ期限内の場合
        let cache  : any = JSON.parse(fs.readFileSync(`${FILE_PATH}${file_name}`));
        if( cache && cache.expires > Date.now() ) {
            req.respond( cache ).catch( e => { console.error( e ) });
            return;
        }
    // 上記以外は通常
    } else {
        req.continue();
    }
});

page.on('response', async (res : HTTPResponse) => {
    let url = res.url();
    let file_name = basename(url);
    let cache  : any = { };

    if( fs.existsSync(`${FILE_PATH}${file_name}`)) {
        cache = JSON.parse(fs.readFileSync(`${FILE_PATH}${file_name}`));
    }

    // 有効期限内にキャッシュがある場合はリターン
    if( cache && cache.expires > Date.now() ) {
        return;
    }

    // 画像ファイルの場合はキャッシュする
    if( file_name.indexOf('.js') >= 0 && ( res.status() >= 200 && res.status() <= 304 ) ) {

        let buffer;
        try {
            buffer = await res.buffer().catch( e => console.error( e )) as Buffer;
        } catch ( e ) {
            console.error( e );
            return;
        }  
        cache = {
            'status'  : res.status()
            , 'headers' : res.headers()
            , 'body'    : buffer.toString()
            , 'expires' : Date.now() + 3600 * 1000
        };
        fs.writeFileSync(`${FILE_PATH}${file_name}`, JSON.stringify(cache));


    } else {
        return;
    }
});

ソースコード

実行結果

まとめ

• Puppeteerでキャッシュの操作をしました｡
• ブラウザキャッシュ以外のキャッシュ方法を紹介しました｡

参考文献