Как предотвратить перезагрузку веб-страницы из кэша при использовании мобильного браузера Safari?

Mobile Safari использует специальный механизм кеширования Page Cache ( здесь), который в основном поддерживает текущую страницу, но находится в спящем режиме, когда мы переходим на другую страницу. Таким образом, он может немедленно отобразить предыдущую страницу в ее последнем состоянии, когда пользователь нажимает back кнопка.

Это полезно для навигации и просмотра веб-страниц, но в особых случаях это раздражает, так как вам может понадобиться получать свежую копию страницы каждый раз, когда пользователь переходит на эту страницу. (в моем случае у меня есть страницы: логин и главная страница).

Я полностью осознаю, что ничто не мешает пользователю открывать несколько вкладок одного и того же приложения. Я не обеспокоен этим.

Кросс-браузерное решение для предотвращения кэширования страницы не помогает, так как Safari сохраняет страницу открытой, но невидимой и приостановленной.

Window.onpageshow и обработка event.persisted не помогает, так как кажется, что браузер не выполняет onpageshow событие по некоторым причинам во второй раз (когда вы нажимаете back кнопка).

Примечание для тех, кто не знает, что onpageshow событие о: Apple не рекомендует использовать load а также unload события, потому что с концепцией кеш страницы эти события не имеют четкого смысла. Так, onpageshow должен делать то, что мы ожидаем от load событие.

2 ответа

Решение

Когда пользователь нажмет кнопку "Назад", вы получите тот же документ, что и раньше (старая страница, которая была приостановлена). Так что если вы справитесь onpagehide событие и внесите некоторые изменения в страницу непосредственно перед переходом на новую страницу, ваши изменения будут храниться там.

Я попытался добавить блок скрипта в body непосредственно перед навигацией:

if (isSafari) {
        window.addEventListener('pagehide', function(e) {
            var $body = $(document.body);
            $body.children().remove();
                $body.append("<script type='text/javascript'>window.location.reload();<\/script>");
        });
    }

это не работает, потому что скрипт немедленно выполняется там, где я собирался его выполнить, когда пользователь возвращается на страницу.

НО, если вы откладываете свои модификации DOM после ухода pagehide обратный вызов, (как-то так):

if (isSafari) {
        window.addEventListener('pagehide', function(e) {
            var $body = $(document.body);
            $body.children().remove();

            // wait for this callback to finish executing and then...
            setTimeout(function() {
                $body.append("<script type='text/javascript'>window.location.reload();<\/script>");
            });
        });
    }

Тада это работает! как только пользователь нажимает кнопку "Назад" на следующей странице, Safari загружает приостановленную страницу и выполняет этот новый блок сценария, который ранее не выполнялся.

Еще одно потенциальное решение - посмотреть на event.persisted флаг, чтобы определить, кешируется он или нет:

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload() 
    }
};
Другие вопросы по тегам