Turbolinks

参考:

turbolinks/turbolinks: Turbolinks makes navigating your web application faster – GitHub

ドキュメント

参考:

turbolinks/README.md at master · turbolinks/turbolinks – GitHub

turbolinks/turbolinks Wiki – GitHub

Turbolinks | Rails ガイド [公式]

概要

参考:

Turbolinks 5 と Turbolinks Classic (2.x) の比較 – Qiita

Turbolinks5 についてまとめてみる – Qiita

使い方

参考:

静的サイトを turbolinks で高速化したので Tips を紹介する – Qiita

turbolinks チートシート – 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" を設定するアセットは揃える必要がある。

参考:

Reloading When Assets Change – turbolinks/turbolinks: Turbolinks makes navigating your web application faster – GitHub

turbolinks/head_details.ts at v5.3.0-beta.1 · turbolinks/turbolinks – GitHub

イベント

  • turbolinks:click
  • turbolinks:before-visit
  • turbolinks:visit
  • turbolinks:request-start
  • turbolinks:request-end
  • turbolinks:before-cache
  • turbolinks:before-render
  • turbolinks:render
  • turbolinks:load

参考:

Rails5 で Turbolinks の挙動が変わってた。- Qiita

Ruby on Rails でリンクで移動した時 javascript が実行されない問題 – Qiita

Turbolinks 5 で JavaScript が発火しない問題の対処 | deadwood

Rails5 の turbolinks で jquery が動かないときの対処法 | 地方でリモートワーク & 億り人目指して投資してます

Full List of Events – turbolinks/turbolinks – GitHub

ブラウザバック時のイベント

  • turbolinks:visit
  • turbolinks:before-cache
  • turbolinks:before-render
  • turbolinks:render
  • turbolinks:load

参考:

Rails5 の turbolinks の影響により、ブラウザバック時の Javascript が発火しない問題 – teratail

JavaScript から遷移させる

遷移を開始する。

Turbolinks.visit(location)

ブラウザの履歴を置き換える場合は、action に 'replace' を指定する。

Turbolinks.visit(location, { action: 'replace' })

参考:

Turbolinks.visit – turbolinks/turbolinks: Turbolinks makes navigating your web application faster – GitHub

プレビュー

プレビュー表示時には 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 外への遷移ではページ全体の読み込みを実行する。

参考:

Setting a Root Location – turbolinks/turbolinks: Turbolinks makes navigating your web application faster – GitHub

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)
  })
})

参考:

Refused to execute inline script because it violates the following Content Security Policy · Issue #430 · turbolinks/turbolinks – GitHub

メタタグ (meta) / SEO への影響

参考:

Meta Tags not changing – Stack Overflow

Tips

参考:

Rails 4 の turbolinks について最低でも知っておきたい事 | KRAY Inc

Turbolinks 生存戦略 – Qiita

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA