Options to delay page launch and page load

SPAs might take longer than page load to be ready. Add a timeout for now, maybe there's a smarter event we can hook into in the future
piuccio · Aug 2, 2017 · 4d48994 · 4d48994
1 parent 765c317
commit 4d48994
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,23 @@ By default this package runs chrome with `--disable-gpu` and `--headless` you ca
 render(url, ['--disable-http2'])
 ```
 
+### Options
+
+```js
+render(url, {
+  delayLaunch: 0, // milliseconds
+  delayPageLoad: 0, // milliseconds
+  chromeFlags: [], // list of flags
+});
+```
+
+The second parameter of `render` function can either be an array of chrome flags or an object with
+
+* `delayLaunch` Wait to launch Chrome browser, in case you need more time to set up the server
+* `delayPageLoad` Wait after the page load event for your JS to run
+* `chromeFlags` List of chrome flags
+
+
 ## Continuous integration
 
 The package works on any machine with Chrome installed. Most CI environments allows you to install external packages.
@@ -44,7 +61,7 @@ before_install:
   # Needed by `chrome-launcher`
   - export LIGHTHOUSE_CHROMIUM_PATH=google-chrome-stable
 
-install:
+script:
   # Run your build script that fetches a page and writes the output
   - node generate_static_page.js
 ```

diff --git a/__tests__/prerender.test.js b/__tests__/prerender.test.js
@@ -4,4 +4,11 @@ describe('Pre-renderer', () => {
   it('pre-renders a web page', () => {
     return expect(render('https://google.com')).resolves.toMatch(/google/i);
   });
+
+  it('pre-renders a web page with options', () => {
+    return expect(render('https://google.com', {
+      delayLaunch: 100,
+      delayPageLoad: 100,
+    })).resolves.toMatch(/google/i);
+  });
 });
diff --git a/index.js b/index.js
@@ -2,9 +2,15 @@ const chromeLauncher = require('chrome-launcher');
 const chromeInterface = require('chrome-remote-interface');
 const debug = require('debug')('prerender');
 
-module.exports = function (source, chromeFlags) {
+module.exports = function (source, options = {}) {
   debug('Calling prerender function for page %s', source);
-  return chain(
+  const chromeFlags = options.length ? options : options.chromeFlags;
+  const delayLaunch = options.delayLaunch || 0;
+  const delayPageLoad = options.delayPageLoad || 0;
+
+  debug(`Launching chrome in ${delayLaunch}ms`);
+  return wait(delayLaunch).then(() =>
+  chain(
     () => launchChrome(source, chromeFlags),
     connectDebuggingInterface
   )
@@ -16,20 +22,27 @@ module.exports = function (source, chromeFlags) {
 
       () => debug('Waiting for page load event to be fired'),
       () => Page.loadEventFired(),
+      () => debug(`Waiting ${delayPageLoad}ms after page load event`),
+      () => wait(delayPageLoad),
 
       () => debug('Extracting HTML from the page'),
       () => Runtime.evaluate(expression(getHTML)),
 
       (result) => extractHtml(result),
 
+      () => debug('Closing the debugging interface client'),
       () => client.close(),
+      () => debug('Terminating Chrome'),
       () => chrome.kill()
     );
   })
-  .then((results) => results.find(r => r && r.extractedHTML).extractedHTML);
+  .then(
+    (results) => results.find(r => r && r.extractedHTML).extractedHTML
+  ));
 }
 
 function extractHtml(evaluatedCode) {
+  debug('Got result from runtime');
   return { extractedHTML: `<!doctype html>${evaluatedCode.result.value}` };
 }
 
@@ -76,3 +89,10 @@ function chain(...actions) {
     return results;
   });
 }
+
+function wait(time) {
+  if (time) {
+    return new Promise((resolve) => setTimeout(resolve, time));
+  }
+  return Promise.resolve();
+}
diff --git a/package.json b/package.json
@@ -17,19 +17,20 @@
   },
   "scripts": {
     "lint": "eslint index.js",
-    "test": "jest",
-    "test:watch": "DEBUG=prerender jest --watchAll"
+    "test": "DEBUG=prerender jest",
+    "test:watch": "DEBUG=prerender jest --watchAll",
+    "posttest": "npm run lint"
   },
   "dependencies": {
     "chrome-launcher": "^0.3.1",
-    "chrome-remote-interface": "^0.24.0",
+    "chrome-remote-interface": "^0.24.3",
     "debug": "^2.6.8"
   },
   "engines": {
-    "node": ">=4.0"
+    "node": ">=6.0"
   },
   "devDependencies": {
-    "eslint": "^4.1.1",
+    "eslint": "^4.3.0",
     "jest": "^20.0.4"
   }
 }