Turbolinks
参考：
turbolinks/turbolinks: Turbolinks makes navigating your web application faster – GitHub
ドキュメント
参考：
turbolinks/README.md at master · turbolinks/turbolinks – GitHub
turbolinks/turbolinks Wiki – GitHub
概要
参考：
Turbolinks 5 と Turbolinks Classic (2.x) の比較 – Qiita
Turbolinks5 についてまとめてみる – Qiita
使い方
参考：
静的サイトを turbolinks で高速化したので Tips を紹介する – Qiita
Turbolinks を調べてみた / Turbolinks をオフにしないためにやった事 – GitHub Gist
今更ながら Turbolinks を初めて仕事で使ってみたので色々調べてみた | seri::diary
data-turbolinks-track
link タグ、あるいは、script タグに data-turbolinks-track="reload" を設定すると、アセットに変更があった場合にページ全体をリロードする。
data-turbolinks-track="reload" が設定されたアセットのあるページとないページを跨いで遷移するとページ全体がリロードされる。Turbolinks で遷移させるためには、data-turbolinks-track="reload" を設定するアセットは揃える必要がある。
参考：
turbolinks/head_details.ts at v5.3.0-beta.1 · turbolinks/turbolinks – GitHub
イベント
turbolinks:clickturbolinks:before-visitturbolinks:visitturbolinks:request-startturbolinks:request-endturbolinks:before-cacheturbolinks:before-renderturbolinks:renderturbolinks:load
参考：
Rails5 で Turbolinks の挙動が変わってた。- Qiita
Ruby on Rails でリンクで移動した時 javascript が実行されない問題 – Qiita
Turbolinks 5 で JavaScript が発火しない問題の対処 | deadwood
Rails5 の turbolinks で jquery が動かないときの対処法 | 地方でリモートワーク & 億り人目指して投資してます
Full List of Events – turbolinks/turbolinks – GitHub
ブラウザバック時のイベント
turbolinks:visitturbolinks:before-cacheturbolinks:before-renderturbolinks:renderturbolinks:load
参考：
Rails5 の turbolinks の影響により、ブラウザバック時の Javascript が発火しない問題 – teratail
JavaScript から遷移させる
遷移を開始する。
Turbolinks.visit(location)
ブラウザの履歴を置き換える場合は、action に 'replace' を指定する。
Turbolinks.visit(location, { action: 'replace' })
参考：
プレビュー
プレビュー表示時には html 要素に data-turbolinks-preview 属性が付与される。
if (document.documentElement.hasAttribute('data-turbolinks-preview')) {
// Turbolinks is displaying a preview
}
参考：
Detecting When a Preview is Visible – turbolinks/turbolinks at v5.2.0 – GitHub
turbolinks-root
Turbolinks は通常同じオリジン (ドメイン/ポート/プロトコルが完全に一致) の場合に Ajax による遷移を実行するが、turbolinks-root を設定することで遷移先が turbolinks-root の配下にある場合のみに限定することができる。turbolinks-root 外への遷移ではページ全体の読み込みを実行する。
参考：
locationIsVisitable – turbolinks/controller.ts at v5.3.0-beta.1 · turbolinks/turbolinks – GitHub
isPrefixedBy – turbolinks/location.ts at v5.3.0-beta.1 · turbolinks/turbolinks – GitHub
Google Analytics を Turbolinks に対応させる
参考：
gtag.js を使用した単一ページ アプリケーションのトラッキング | Google Developers
turbolinks で静的サイトを擬似 SPA 化 | maesblog
リダイレクターの脆弱性
参考：
Rails4 で turbolinks を謳歌するためのまとめ | 俺の備忘録
CSP nonce に対応させる
Turbolinks からのリクエストの際は、nonce を再利用する。
Rails.application.config.content_security_policy_nonce_generator = \
lambda do |request|
# Use the same CSP nonce for Turbolinks requests
if request.env["HTTP_TURBOLINKS_REFERRER"].present? then
request.env["HTTP_X_TURBOLINKS_NONCE"]
else
SecureRandom.base64(16)
end
end
Turbolinks の Ajax リクエストヘッダーで nonce を送信する。
document.addEventListener('turbolinks:request-start', (
event
) => {
const xhr = event.data.xhr
xhr.setRequestHeader(
'X-Turbolinks-Nonce',
Rails.cspNonce()
)
})
Turbolinks がキャッシュを生成する前に nonce を再付与する。
document.addEventListener('turbolinks:before-cache', () => {
$('script[nonce]').each((
index, element
) => {
$(element).attr('nonce', element.nonce)
})
})
参考：
メタタグ (meta) / SEO への影響
参考：
Meta Tags not changing – Stack Overflow
Tips
参考：