Added threshold option to allow users select the % of link areas th…

…at entered the viewport before prefetching (#214)
GoogleChromeLabs · Jun 18, 2021 · d3746e1 · d3746e1
1 parent 2b3dc21
commit d3746e1
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -131,6 +131,12 @@ Default: `Infinity`
 
 The _total_ requests that can be prefetched while observing the `options.el` container.
 
+#### options.threshold
+Type: `Number`<br>
+Default: `0`
+
+The _area percentage_ of each link that must have entered the viewport to be fetched, in its decimal form (e.g. 0.25 = 25%).
+
 #### options.throttle
 Type: `Number`<br>
 Default: `Infinity`

diff --git a/src/index.mjs b/src/index.mjs
@@ -49,6 +49,7 @@ function isIgnored(node, filter) {
  * @param {Array|RegExp|Function} [options.ignores] - Custom filter(s) that run after origin checks
  * @param {Number} [options.timeout] - Timeout after which prefetching will occur
  * @param {Number} [options.throttle] - The concurrency limit for prefetching
+ * @param {Number} [options.threshold] - The area percentage of each link that must have entered the viewport to be fetched
  * @param {Number} [options.limit] - The total number of prefetches to allow
  * @param {Number} [options.delay] - Time each link needs to stay inside viewport before prefetching (milliseconds)
  * @param {Function} [options.timeoutFn] - Custom timeout function
@@ -63,6 +64,7 @@ export function listen(options) {
 
   const [toAdd, isDone] = throttle(options.throttle || 1/0);
   const limit = options.limit || 1/0;
+  const threshold = options.threshold || 0;
 
   const allowed = options.origins || [location.hostname];
   const ignores = options.ignores || [];
@@ -113,6 +115,8 @@ export function listen(options) {
         }
       }
     });
+  }, {
+    threshold
   });
 
   timeoutFn(() => {

diff --git a/test/quicklink.spec.js b/test/quicklink.spec.js
@@ -274,7 +274,7 @@ describe('quicklink tests', function () {
     expect(ours).to.include(`https://example.com/?url=${server}/3.html`);
     expect(ours).to.include(`https://example.com/?url=${server}/4.html`);
   });
-
+  
   it('should delay prefetch for in-viewport links correctly (UMD)', async function () {
     const responseURLs = [];
     page.on('response', resp => {
@@ -303,4 +303,26 @@ describe('quicklink tests', function () {
     expect(responseURLs).to.include(`${server}/4.html`);
   });
 
+  it('should consider threshold option before prefetching (UMD)', async function () {
+    const responseURLs = [];
+    page.on('response', resp => {
+      responseURLs.push(resp.url());
+    });
+
+    await page.goto(`${server}/test-threshold.html`);
+    await page.setViewport({
+      width: 1000,
+      height: 800,
+    });
+    await page.waitFor(1000);
+    expect(responseURLs).to.be.an('array');
+    expect(responseURLs).to.include(`${server}/1.html`);
+    expect(responseURLs).to.include(`${server}/2.html`);
+    await page.evaluate(_ => {
+      window.scrollBy(0, window.innerHeight);
+    });
+    await page.waitFor(400);
+    expect(responseURLs).to.include(`${server}/3.html`);
+    expect(responseURLs).to.include(`${server}/4.html`);
+  });
 });
diff --git a/test/test-threshold.html b/test/test-threshold.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Prefetch: Basic Usage</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" media="screen" href="main.css">
+  <style>
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-evenly;
+    }
+
+    li {
+      margin-bottom: 32px;
+    }
+
+    a {
+      display: block;
+      width: 400px;
+      height: 600px;
+      background: #ccc;
+      text-align: center;
+    }
+  </style>
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
+</head>
+
+<body>
+  <ul>
+    <li>
+      <a href="1.html">Link 1</a>
+    </li>
+    <li>
+      <a href="2.html">Link 2</a>
+    </li>
+    <li>
+      <a href="3.html">Link 3</a>
+    </li>
+    <li>
+      <a href="4.html">Link 4</a>
+    </li>
+  </ul>
+  <script src="../dist/quicklink.umd.js"></script>
+  <script>
+    quicklink.listen({threshold: 0.5});
+  </script>
+</body>
+
+</html>