Skip to content

Commit d2a7870

Browse files
committed
docs: describe new opts w/ recipes
1 parent 21f601b commit d2a7870

File tree

2 files changed

+36
-6
lines changed

2 files changed

+36
-6
lines changed

README.md

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ You can also grab `quicklink` from [unpkg.com/quicklink](https://unpkg.com/quick
3535

3636
## Usage
3737

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

4040
Quickstart:
4141

@@ -80,6 +80,8 @@ The above options are best for multi-page sites. Single-page apps have a few opt
8080
* `timeout`: Integer for the `requestIdleCallback` timeout. A time in milliseconds by which the browser must execute prefetching. Defaults to 2 seconds.
8181
* `timeoutFn`: Function for specifying a timeout. Defaults to `requestIdleCallback`. Can also be swapped out for a custom function like [networkIdleCallback](https://github.com/pastelsky/network-idle-callback) (see demos)
8282
* `priority`: Boolean specifying preferred priority for fetches. Defaults to `false`. `true` will attempt to use the `fetch()` API where supported (rather than rel=prefetch)
83+
* `sameOrigin`: Restricts prefetching to URLs of the same origin. Defaults to `false`. Any truthy value will ensure no cross-domain requests are sent & will override/ignore any `options.origins` value.
84+
* `origins`: Static array of URL hostname strings that are allowed to be prefetched. Defaults to an empty array, which _allows all_ URLs to be prefetched.
8385

8486
TODO:
8587
* Explore detecting file-extension of resources and using [rel=preload](https://w3c.github.io/preload/) for high priority fetches
@@ -139,6 +141,34 @@ Defaults to low-priority (`rel=prefetch` or XHR). For high-priority (`priority:
139141
quicklink({ priority: true });
140142
```
141143

144+
**Allow same-origin requests only**
145+
146+
Forcibly disables all cross-domain requests. All domains are allowed by default.
147+
148+
```js
149+
quicklink({ sameOrigin: true });
150+
```
151+
152+
**Specify a custom list of allowed origins**
153+
154+
Provide a list of hostnames that should be prefetch-able. All domains are allowed by default.
155+
156+
> **Important:** You must also include your own hostname!
157+
158+
```js
159+
quicklink({
160+
origins: [
161+
// add mine
162+
'my-website.com',
163+
'api.my-website.com',
164+
// add third-parties
165+
'other-website.com',
166+
'example.com',
167+
// ...
168+
]
169+
});
170+
```
171+
142172
## Browser support
143173

144174
The prefetching provided by `quicklink` can be viewed as a [progressive enhancement](https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/). Cross-browser support is as follows:
@@ -149,7 +179,7 @@ The prefetching provided by `quicklink` can be viewed as a [progressive enhancem
149179
Certain features have layered support:
150180

151181
* The [Network Information API](https://wicg.github.io/netinfo/), which is used to check if the user has a slow effective connection type (via `navigator.connection.effectiveType`) is only available in [Chrome 61+ and Opera 57+](https://caniuse.com/#feat=netinfo)
152-
* If opting for `{priority: true}` and the [Fetch API](https://fetch.spec.whatwg.org/) isn't available, XHR will be used instead.
182+
* If opting for `{priority: true}` and the [Fetch API](https://fetch.spec.whatwg.org/) isn't available, XHR will be used instead.
153183

154184
## Using the prefetcher directly
155185

@@ -170,14 +200,14 @@ Promise.all(promises);
170200
Here's a [WebPageTest run](https://www.webpagetest.org/video/view.php?id=181212_4c294265117680f2636676721cc886613fe2eede&data=1) for our [demo](https://keyword-2-ecd7b.firebaseapp.com/) improving page-load performance by up to 4 seconds via quicklink's prefetching. A [video](https://youtu.be/rQ75YEbJicw) comparison of the before/after prefetching is on YouTube.
171201

172202
For demo purposes, we deployed a version of the [Google Blog](https://blog.google) on
173-
Firebase hosting. We then deployed another version of it, adding quicklink to the homepage and benchmarked navigating from the homepage to an article that was
203+
Firebase hosting. We then deployed another version of it, adding quicklink to the homepage and benchmarked navigating from the homepage to an article that was
174204
automatically prefetched. The prefetched version loaded faster.
175205

176206
Please note: this is by no means an exhaustive benchmark of the pros and cons of in-viewport link prefetching. Just a demo of the potential improvements the approach can offer. Your own mileage may heavily vary.
177207

178208
## Related projects
179209

180-
* Using [Gatsby](https://gatsbyjs.org)? You already get most of this for free baked in. It uses `Intersection Observer` to prefetch all of the links that are in view and provided heavy inspiration for this project.
210+
* Using [Gatsby](https://gatsbyjs.org)? You already get most of this for free baked in. It uses `Intersection Observer` to prefetch all of the links that are in view and provided heavy inspiration for this project.
181211
* Want a more data-driven approach? See [Guess.js](https://guess-js.github.io). It uses analytics and machine-learning to prefetch resources based on how users navigate your site. It also has plugins for [Webpack](https://www.npmjs.com/package/guess-webpack) and [Gatsby](https://www.gatsbyjs.org/docs/optimize-prefetching-with-guessjs/).
182212

183213
## License

src/index.mjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ function prefetcher(url) {
4848
* @param {Array} options.urls - Array of URLs to prefetch (override)
4949
* @param {Object} options.el - DOM element to prefetch in-viewport links of
5050
* @param {Boolean} options.priority - Attempt higher priority fetch (low or high)
51-
* @param {Boolean} options.sameOrigin - Restrict prefetching to assets with same origin.
51+
* @param {Boolean} options.sameOrigin - If truthy, restricts prefetching to assets with same origin.
5252
* @param {Array} options.origins - Allowed origins to prefetch (empty allows all)
5353
* @param {Number} options.timeout - Timeout after which prefetching will occur
54-
* @param {function} options.timeoutFn - Custom timeout function
54+
* @param {Function} options.timeoutFn - Custom timeout function
5555
*/
5656
export default function (options) {
5757
options = Object.assign({

0 commit comments

Comments
 (0)