https://github.com/huacnlee/turbolinks-prefetch

Turbolinks extends for prefetch links to speeds up your website.
https://github.com/huacnlee/turbolinks-prefetch

npm prefetch turbolinks

Last synced: 3 months ago
JSON representation

Turbolinks extends for prefetch links to speeds up your website.

• Host: GitHub
• URL: https://github.com/huacnlee/turbolinks-prefetch
• Owner: huacnlee
• Archived: true
• Created: 2020-09-28T02:13:33.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-08-14T03:29:33.000Z (over 3 years ago)
• Last Synced: 2024-09-20T04:19:11.707Z (4 months ago)
• Topics: npm, prefetch, turbolinks
• Language: JavaScript
• Homepage:
• Size: 51.8 KB
• Stars: 70
• Watchers: 3
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Turbolinks Prefetch

[![](https://img.shields.io/npm/v/turbolinks-prefetch.svg)](https://www.npmjs.com/package/turbolinks-prefetch)

[Turbolinks](https://github.com/turbolinks/turbolinks) extend for prefetch links to speeds up your website.

[中文介绍与说明](https://ruby-china.org/topics/40471)

## WorkFlow

```

hover --> [prefetch] ----> [XHR fetch] -> [Turbolinks cache.put]

              |

          

              |

            ignore

click ---- exist --> [isPrefetch] -> [Turbolinks.visit advance] ---> [render page]

             |                         |                 |

             |                         |                 --async-> [fetch background] -> [render if updated]

             |                         |

             |                       

             |                         |--- [Turbolinks.visit restore] --> render -> nothing

          No cahce

             |

             ---> [Turbolinks.visit]

```

## Installation

```bash

$ yarn add turbolinks-prefetch

```

## Usage

```js

import Turbolinks from "turbolinks";

window.Turbolinks = Turbolinks;

import TurbolinksPrefetch from "turbolinks-prefetch";

TurbolinksPrefetch.start();

```

Prefetch request will send `Purpose: prefetch` header, so you may need this to ignore some thing.

For example views count increment:

```rb

class TopicsController < ApplicationController

  def show

    if request.headers["Purpose"] != "prefetch"

      # Ignore hit counter for prefetch request

      @topic.increment_hit

    end

  end

end

```

### Disable prefetch

By default, TurbolinksPrefetch will enable prefetch for all links.

Except:

- Links not have same host (Origin);

- Open in new window links `target="_blank"`;

- The links has `data-remote` attribute;

- The links has `data-method` attribute;

- The links has `data-prefetch="false"` attribute;

If you wants disable prefetch, you can do like this:

```html

Google

Open in new window

Put

Delete

Disable by directly

```

## Demo



https://github.com/ruby-china/homeland/commit/e1378468703b8c3cfd7e33a17dc703ff8294a3e9

## Demo site

- [Ruby China](https://ruby-china.org)

- [HackerShare](https://hackershare.dev)