Skip to content

nickFalcone/hover-fetch

Repository files navigation

NPM info

Netlify Status

A programmatic, cross-browser, zero-dependency way to prefetch links.

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future... When the user visits one of the prefetched documents, it can be served up quickly out of the browser's cache. — MDN Web Docs

Demo

demo video

Try the demo at https://hoverfetch.com/

Supported browsers

link rel prefetch support

Install

$ npm install @nfalcone/hover-fetch

Use

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <script async defer src="app.js" type="module"></script>
  </head>
  <body>
    <h1>hover-fetch</h1>
    <ul>
      <li><a class="link-to-prefetch" href="https://example.com/">Test 1</a></li>
      <li><a href="http://browserify.org/">Test 2</a></li>
      <li><a href="https://pi-hole.net/">Test 3</a></li>
    </ul>
  </body>
</html>
// app.js
import hoverFetch from '@nfalcone/hover-fetch';

const anchor = document.querySelector('.link-to-prefetch');
hoverFetch(anchor); // will initiate a prefetch request when `anchor` is hovered

Develop

Setup

$ git clone git@github.com:nickFalcone/hover-fetch.git

$ npm install --save-dev

Local build/watch

$ npm run dev # serves ./stub on port 8081

stub/app.js consumes index.js directly.

stub/index.html embeds stub/bundle.js (the browserify bundled file)

Test

$ npm run test # serves ./stub on port 8080 and runs Jest