webサイト訪問者に一度だけスーパーリロードをしてもらう

ブラウザのキャッシュを削除して読み込み直して下さい

  1. サイトを更新する
  2. 「更新されてねーぞ」「表示がおかしいぞ」と連絡を受ける
  3. ブラウザのキャッシュを削除して読み込み直すように依頼する
  4. 「あー、直ったわ」と解決報告を受ける

サイトを更新した時にこのやり取りが良くある。
どうにかして、こちら(サイト管理者)の意思で、ブラウザのキャッシュ削除とリロードをさせる事ができないものかと考えた。

JavaScriptでどうにかする

superReload.js
location.reload(true);

ポイントはtrue
location.reload();は現在のページを読み込み直すJavaScript。
trueの値を指定すると、ブラウザのキャッシュを使わずにサーバーからデータを取得してくれるようになる。
詳細はwindow.location - Web API インターフェイス | MDN辺りを参照。

「一度だけ」実行する

reloadOnlyOnce.js
docCookies.setItem("temp", "true"); //適当なcookieの書き込みを行い、
if("true" == docCookies.getItem("temp")){ //正常に利用できる環境であれば実行
    if("true" != docCookies.getItem("refresh")){ //初回訪問時は実行される
        docCookies.setItem("refresh", "true"); //2回目以降は、cookieに値が書き込まれているので実行されない
        docCookies.removeItem("temp");
        location.reload(true); //ブラウザのキャッシュを使わずにリロードを実行
    }else{
        docCookies.removeItem("temp");
    }
}

クッキーを使って、初回訪問かを判定して初回訪問ならばリロードを実行する。2回目以降の訪問では更新は実行されない。
クッキーを利用できない環境は、諦める。
プライベートブラウジングモード、コンテンツブロッカーによるクッキーの読み書き禁止等をしている場合等、cookieを利用できない環境で、永遠とページがリロードされ続ける無限リロード地獄にならないよう、諦める。
そもそも、ブラウザのキャッシュを削除できない(そういった発想が出てこない)人はプライベートブラウジングモードとか使わないだろうし、逆にコンテンツブロッカー等を利用しているリテラシーが高い人達は、案内が無くても勝手にブラウザのキャッシュ削除くらいはやってくれるので、あまり問題は無いと思っている。

「docCookies」って何?

上記コードにでてくるdocCookiesは以下のページを参照して下さい。
document.cookie - Web API インターフェイス | MDN
cookieの読み書きにとても便利で、よくお世話になっています。

注意点!

web計測について何も考えずに、このJavaScriptをサイトに組み込むと、計測に以下の影響がでます。

  • PV数が初回訪問時に+1多くカウントされPV数が若干増加したように見える
  • サイト離脱率が低下したように見える
  • サイト平均滞在時間が短くなったように見える

他にも影響がでるかもしれませんが、初回訪問時だけは計測タグを読み込ませないように設定し、2回目の訪問を初回訪問扱いにする必要があります。
その場合は、refererの計測が取得できなくなりますので、refererの値を別途保持しておいたりと、工夫が必要になります。
リターゲティング広告と連動させるための計測タグ等を入れている場合には、初回訪問時にリロードがほぼ必ず発生する状況について、よく考える必要があります。
また、ランディングページ等では離脱率の低い効果的な集客が出来ているように見えてしまい、後々の意思決定にまで悪影響を及ぼす事になるので、やはり計測タグの実行タイミングには注意が必要です。
まぁ、厳密な計測の必要が無いような個人サイト等であれば、あんまり気にする必要はないと思います。

ところで、これだとサイト更新しても反映しなくない?

サイトを更新する時に、Cookieに喰わせる値を変えるなどの工夫でしのぎます。
docCookies.setItem("refresh", "20180101");docCookies.setItem("refresh", "20180201");とかにするとか。
あとは、更新が定刻であるならばcookieの有効期限でコントロールする方法もあるかと思います。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.