Skip to content

Commit

Permalink
docs(README): add installation instructions, some better jobs.
Browse files Browse the repository at this point in the history
  • Loading branch information
addyosmani committed Nov 25, 2018
1 parent 9d8ff74 commit b2ffa41
Showing 1 changed file with 17 additions and 2 deletions.
19 changes: 17 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,18 @@ Quicklink makes subsequent navigations to pages load faster. It:
* **Checks if the user isn't on a slow connection** (using `navigator.connection.effectiveType`) or has data-saver enabled (using `navigator.connection.saveData`)
* **Prefetches URLs to the links** (using `<link rel=prefetch>` or XHR). Provides some control over the request priority (can switch to `fetch()` if supported).

## Installation

For use with [node](http://nodejs.org) and [npm](https://npmjs.com):

```sh
npm install --save quicklink
```

## Usage

Once initialized, `quicklink` will automatically prefetch URLs for links that are in-viewport during idle time.

Quickstart:

```html
Expand All @@ -31,14 +40,20 @@ import quicklink from "dist/quicklink.mjs";
quicklink();
```

The above options are best for multi-page sites. Single-page apps have a few options available for using quicklink with a router:

* Call `quicklink()` once a navigation to a new route has completed
* Call `quicklink()` against a specific DOM element / component
* Call `quicklink{urls:[...]}` with a custom set of URLs to prefetch

## Recipes

**Set the DOM element to obseve for in-viewport links**

Defaults to `document` otherwise.

```js
let elem = document.getElementById('stuff');
let elem = document.getElementById('carousel');
quicklink({
el: elem
});
Expand All @@ -57,7 +72,7 @@ quicklink({
**Set the request priority for prefetches**

Defaults to low-priority (`rel=prefetch` or XHR). For high-priority,
attempts to use fetch() or falls back to XHR.
attempts to use `fetch()` or falls back to XHR.

```js
quicklink({ priority: 'high' });
Expand Down

0 comments on commit b2ffa41

Please # to comment.