Headless Chrome In Action All In One

Headless Chrome In Action All In One

Headless Chrome

https://developers.google.com/web/updates/2017/04/headless-chrome

Puppeteer & SSR

https://developers.google.com/web/tools/puppeteer/articles/ssr

bug

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-02-22
 * @modified
 *
 * @description
 * @augments
 * @example
 * @link
 *
 */

const log = console.log;

const Koa = require('koa');
const app = new Koa();

const fs = require('fs');
const path = require('path');

const puppeteer = require('puppeteer');


const Poster = async (url) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // await page.emulate(devices['iPhone X']);
  await page.goto(url);
  await page.screenshot({
    path: 'poster-template-ssr.png',
    fullPage: true,
  });
  await browser.close();
}

// logger
app.use(async (ctx, next) => {
    await next();
    const rt = ctx.response.get('X-Response-Time');
    log(`${ctx.method} ${ctx.url} - ${rt}`);
});

// x-response-time
app.use(async (ctx, next) => {
    const start = Date.now();
    await next();
    const ms = Date.now() - start;
    ctx.set('X-Response-Time', `${ms}ms`);
});

// response
app.use(async ctx => {
    ctx.response.set("content-type", "text/html");
    const html = fs.createReadStream('./index.html');
    ctx.body = html;
    // response html
    const uid = 1234567;
    const url = `http://localhost:3000/template/index.html?id=${uid}`;
    await Poster(url);
});

app.listen(3000);

partly ok

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @created 2020-02-22
 * @modified
 *
 * @description
 * @augments
 * @example
 * @link
 *
 */

const log = console.log;

const Koa = require('koa');
const app = new Koa();

const fs = require('fs');
const path = require('path');

const puppeteer = require('puppeteer');


const Poster = async (url) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  // await page.emulate(devices['iPhone X']);
  await page.goto(url);
  await page.screenshot({
    path: 'poster-template-ssr.png',
    fullPage: true,
  });
  await browser.close();
}

// logger
app.use(async (ctx, next) => {
    await next();
    const rt = ctx.response.get('X-Response-Time');
    log(`${ctx.method} ${ctx.url} - ${rt}`);
});

// x-response-time
app.use(async (ctx, next) => {
    const start = Date.now();
    await next();
    const ms = Date.now() - start;
    ctx.set('X-Response-Time', `${ms}ms`);
});

// response
app.use(async ctx => {
    ctx.response.set("content-type", "text/html");
    const html = fs.createReadStream('./index.html');
    ctx.body = html;
    // response html
    const uid = 1234567;
    const url = `http://localhost:3000/template/index.html?id=${uid}`;
    // 连续监听，memory leak 抖动 bug
    setTimeout(() => {
      Poster(url);
    }, 3000);
});

app.listen(3000);

full page scroll

https://alvarotrigo.com/fullPage/examples/apple.html

demos

refs

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---