Как предотвратить перезагрузку веб-страницы из кэша при использовании мобильного браузера 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()
}
};