Deprecated
Turbolinks 2.5.2 から Turbolinks本体にプログレスバーの機能が追加されたのでそちらを使用するのが一般的になりそうです。3.0.0からはデフォルトで使用される予定。
詳しくはTurbolinksのREADMEで。
nprogress-rails
- 自社サービスのBOOTH.pmで@geta6が実装して良かったので共有します
- RailsのViewに簡単にプログレスバーを追加出来るgem
- Youtube likeなプログレスバー
- Turbolinksとの相性がよい
Youtubeのプログレスバー
Turbolinksを使っててよく起こる問題
- Turbolinksを使っているとTurbolinksで遷移したのか、ページが切り替わったのかわかりずらい
- ので、Javascriptでeventを書く際に
readyなのかpage:loadなのかを意識するのが大変面倒。 - Turbolinksで遷移する時ににAjaxで時間がかかると処理が止まってるように見える。
プログレスバーを追加すると何がいいか
- Turbolinks遷移時にはプログレスバーが表示され、そうでない時は表示されない(ページが切り替わるため)
- ユーザーにとって処理が行われている事が可視化されるので処理が止まってるのでは？という不安をある程度軽減出来る。
- 開発者にとって、この遷移はTurbolinksである、この遷移はそうではないということが視覚化されて捗る
内部的な処理
- page:fetch でプログレスバーをスタートさせて
- page:changeでプログレスバーを終了させているだけで
- とても簡単な処理となっている
Tips
- プログレスバーがある程度進んで、完了する前にページが切り替わる場合、Turbolinksで正しく遷移できてない可能性があるのでそれらを無くしていくことでTurbolinksをうまく活用することが出来る。
- ほとんどの場合、cssやjsが異なるページにアクセスしていることが多い。(data-turbolinks-trackしているコンテンツの内容が違う)。Turbolinksを使う場合はapplication.js, application.cssに集約するのがbest practice。