この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
ブラウザバックでページ遷移した時に起こる不具合は意外とたくさんあることに気づくポッキーの日。その１つとしてjsのイベントがどうやっても取れない現象に出くわしたので、その時の対処法をメモとして残しておきます。
きっかけ
ブラウザバックした際、デザインが崩れてしまう不具合が報告されたので調査することに。デザイン崩れの原因が２つの特定条件の時に起こるみたい。
・スマホ端末とタブレット端末のみ
・端末を縦横に向きを変えて任意のページからブラウザバックした時に起こる
ちなみにリロードすると元に戻る。デザイン崩れが発生しているのがjsのプラグインを使っている箇所だったのでソースを見ても訳分からない..。なのであまり良くないですが、デザインが崩れるページに戻った際はリロードして崩れないようにしようと思いました。
原因と対応
結論から言うと、この不具合の根本原因はturbolinksによる影響でした。
ページロードの高速化(これしか知らない)などのメリットがあるけど、デメリットの方が多いと言われるturbolinks..。実際にデメリットの部分を実感できたのでまぁぁ良しとしましょう。
turbolinksの影響だと気づいていない時にブラウザバックでイベントを取得する方法をいろいろ探してたら、このイベント(下記に記載)なら取れるよ！って言う記事がたくさんあったのですが、turbolinksの前では全く効果ありませんでした。
$(window).load(function(){});
$(window).onload(function(){});
$(window).unload(function(){});
$(window).pageshow(function(){});
$(window).onpageshow(function(){});
参考: iOS ブラウザバック時にリロードさせる (javascript)
turbolinksを無効にすれば手っ取り早いですが
#app/assets/javascripts/application.js
//= require turbolinks #これを削除
そうもいかず路頭に迷ってたら見つけました、turbolinksが提供しているイベントが！
ブラウザバック時に以下のイベントを取得することができるみたい。
page:before-unload
page:change
page:update
page:restore
参考: infinite scrollとRails4のTurbolinks
結果としてこの記述でブラウザバックした時にページリロードすることができました。
$(document).on 'page:restore', ->
location.reload();
他にもturbolinks絡みの不具合を経験したので嫌いになりかけていましたけど(もう使いたくない)、便利なところもあるのでうまく共存していきたいですね..。turbolinksについて、そもそもturbolinksって何？だったりメリットデメリット、使っていく上で気をつけるべきことなのがわかりやすい記事があったので載せておきます。
connpass
Peatix
Wantedly
デザインチームnote