Skip to content

Commit b2ffa41

Browse files
committed
docs(README): add installation instructions, some better jobs.
1 parent 9d8ff74 commit b2ffa41

1 file changed

Lines changed: 17 additions & 2 deletions

File tree

README.md

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,18 @@ Quicklink makes subsequent navigations to pages load faster. It:
1010
* **Checks if the user isn't on a slow connection** (using `navigator.connection.effectiveType`) or has data-saver enabled (using `navigator.connection.saveData`)
1111
* **Prefetches URLs to the links** (using `<link rel=prefetch>` or XHR). Provides some control over the request priority (can switch to `fetch()` if supported).
1212

13+
## Installation
14+
15+
For use with [node](http://nodejs.org) and [npm](https://npmjs.com):
16+
17+
```sh
18+
npm install --save quicklink
19+
```
1320

1421
## Usage
1522

23+
Once initialized, `quicklink` will automatically prefetch URLs for links that are in-viewport during idle time.
24+
1625
Quickstart:
1726

1827
```html
@@ -31,14 +40,20 @@ import quicklink from "dist/quicklink.mjs";
3140
quicklink();
3241
```
3342

43+
The above options are best for multi-page sites. Single-page apps have a few options available for using quicklink with a router:
44+
45+
* Call `quicklink()` once a navigation to a new route has completed
46+
* Call `quicklink()` against a specific DOM element / component
47+
* Call `quicklink{urls:[...]}` with a custom set of URLs to prefetch
48+
3449
## Recipes
3550

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

3853
Defaults to `document` otherwise.
3954

4055
```js
41-
let elem = document.getElementById('stuff');
56+
let elem = document.getElementById('carousel');
4257
quicklink({
4358
el: elem
4459
});
@@ -57,7 +72,7 @@ quicklink({
5772
**Set the request priority for prefetches**
5873

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

6277
```js
6378
quicklink({ priority: 'high' });

0 commit comments

Comments
 (0)