Preloading is done with <link rel="prefetch" href="url">.
The source code is 330 lines with lots of comments.
instant.page is progressive enhancement — there’s no impact on browsers that don’t support it.
Chrome and Chromium-based browsers have full support since version 61 (shipped in September 2017).
Firefox supports <link rel="prefetch"> (since 2006!) but will redownload the page if it’s not cached (it’s a open bug).
Safari has support for <link rel="prefetch">, disabled by default, since 13.0.
instant.page’s script is hosted serverless with Cloudflare Workers so that there’s no server to hack into.
Additionally, it uses subresource integrity to make sure the file hasn’t been tampered with.
It’s loaded as a module so that most old browsers won’t execute it.
Hosting the script yourself is also possible. Download the latest version then add a module script tag just before </body>:
<script src="instantpage-5.2.0.js" type="module" defer></script>
You can also install it via npm:
npm i instant.page
The idea of preloading web pages on hover and touchstart comes from an older library of mine, InstantClick, launched in January 2014, which uses Ajax and history.pushState instead of <link rel="prefetch">, transforming a site into a single-page application. It makes a site even smoother but requires additional work.
InstantClick is unfortunately mostly just a proof of concept as it doesn’t have good documentation.
Google’s release of quicklink in December 2018, which preloads links with <link rel="prefetch"> as soon as they are shown, made it clear that I should focus on building a “lite”, easier to use version of InstantClick, which is instant.page, launched in February 2019.
Future related project
InstantClick provides the smoothest experience possible, while still not requiring as much work as a framework (who give lesser results), so I’m considering working on it again later in 2020. It will be renamed to “instant.page extra”.