WORDPRESS KONETA ワードプレスの宝物

ブラウザバックの感知について。
ブラウザバックしたら、前のページにて設定したものがはずれていたりしますよね。

例えば、プライバシーのチェックなどが良い例です。

この状態で「内容確認」に進んだとしても

このように「プライバシー」のチェックが外れていたります。
クライアント様の中にはこの辺りを気にする方も多いので、その際に使用していけるものとなります。

対応方法

これはJavascriptで画面読み込み完了イベントの発火を制御すれば対応可能です。

wordpressのようなサイト全体をphpなどのサーバサイドのプログラムで作成作成されているサイトですと、phpの戻り値の対応も可能かもしれませんが、あくまで今回の対応はフロントエンドプログラムにて対応していきたいと思います。

理由はいろいろあると思いますが、日々の業務の課で一番気になるのが、やはりサーバの負荷を減らしたい。ということです。こちらは中々馬鹿に出来ないSEOにも関係してきますのでフロントエンドプログラムであるJavascriptで行きたいと思います。

さて、いくつかあるイベントの種類の中でも、「pageshow」はメジャーなブラウザでもキャッシュから読み込まれた場合でも発火します。

PageTransitionEvent.persistedを使用して対応します。

window.addEventListener("pageshow", function(event){
    if (event.persisted) {
        // キャッシュから読み込まれた際の挙動
    }
});

こんな感じです。

次にPerformanceNavigationTiming.typeを使用。

window.addEventListener("pageshow", function(event){
    var entries = performance.getEntriesByType("navigation");
    entries.forEach(function(entry) {
        if(entry.type == 'back_forward') {
            // ブラウザの履歴から読み込まれた際の処理
        }
    });
});

PerformanceNavigationTiming.type は文書ナビゲーションがどのように読み込まれたかを示すプロパティであり、「back_forward」がブラウザの履歴から遷移した際の値です。

今回のまとめ

どちらで対応しても良いのですが、ブラウザ間での挙動に気を付けてください。
特に、windowsではスムーズに動いていたとしてもMacではカクついたり、まったく動かなかったりとありますので、ケースバイケースで使い分けていただければと思います。

またwordpressなどを使用して、さらにプラグインをインストールしているとそのプラグインの機能でバックしても同じ状態のものもあります。

その際は逆にブラウザのコンソールでチェックしてください。
意外とエラーが出ていたりしますのでその際はプラグイン・Javascriptのどちらかを外すようにしてください。

最近のwordpressやその他のCMSツールはとても優秀ですので、今作っているサイトに何が足りなくて何を習得しないといけないかをしっかりと見極めるのがプロとして作業するには大事と思います。