turbolinks-prefetch
v1.0.4
Published
Turbolinks extends for prefetch links to speeds up your website.
Downloads
76
Readme
Turbolinks Prefetch
Turbolinks extend for prefetch links to speeds up your website.
WorkFlow
hover --> [prefetch] --<no cache>--> [XHR fetch] -> [Turbolinks cache.put]
|
<exist cache / in fetching>
|
ignore
click --<check cache>-- exist --> [isPrefetch] -> [Turbolinks.visit advance] ---> [render page]
| | |
| | --async-> [fetch background] -> [render if updated]
| |
| <Yes>
| |--- [Turbolinks.visit restore] --> render -> nothing
No cahce
|
---> [Turbolinks.visit]
Installation
$ yarn add turbolinks-prefetch
Usage
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:
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:
<a href="https://google.com">Google</>
<a href="/topics/123" target="_blank">Open in new window</a>
<a href="/topics/123" data-method="PUT" data-remote>Put</a>
<a href="/topics/123" data-method="DELETE">Delete</a>
<a href="/topics/123" data-prefetch="false">Disable by directly</a>
Demo
https://github.com/ruby-china/homeland/commit/e1378468703b8c3cfd7e33a17dc703ff8294a3e9