iOS の Mobile Safari でページを開くときにキャッシュをつかったときをハンドリングする

前回の記事を書いていて思い出したのですが、iOS の Mobile Safari はブラウザバック、ブラウザフォワードでページ遷移した際、遷移先のページが初期状態になっていないことが多々あります。

kimizuka.hatenablog.com

例えば前回のDEMOだと、LINKボタンを押してページ遷移した後にブラウザバックで戻ってくるとローディングのアニメーションが表示された状態で表示されます。

前回のDEMO

この現象の対策としては、キャッシュをつかってページを表示した時とハンドリングする方法があります。
具体的には window の pageshowイベントに渡ってくる引数の persisted を見ればキャッシュをつかったかどうかが判断できます。

JavaScript

window.addEventListener("pageshow", function(evt) {
    if (evt.persisted) { // キャッシュをつかった際にtrueになる
        // キャッシュをつかった際の初期化処理とかを書く
    }
}, false);

これを応用して前回のコードをキャッシュをつかった際にリロードするように改修してみます。

JavaScript

(function(win, doc) {

    "use strict";
    
    win.addEventListener("pageshow", function(evt) {
        if (evt.persisted) { // キャッシュが効いているときにtrueになる
            location.replace(location.protocol + "//" + location.hostname + location.pathname);
        }
    }, false);
    
    doc.querySelector(".btn").addEventListener("click", function(evt) {
        var that = this;
        evt.preventDefault();
        doc.querySelector(".loading").classList.add("on");
        setTimeout(function() {
            location.href = that.getAttribute("href") + "?" + Date.now();
        }, 500);
    }, false);
    
})(this, document);