Как реализовать корректную работу кнопки назад в браузере?

Question

[IdFox]

День добрый

Подскажите как реализовать корректную работу кнопки назад

Есть страничка (1), она должна быть закеширована
Она отдается с заголовками (php)

header('Pragma: cache');
header('Cache-Control: max-age=600, public');
header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 600));

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

Когда на ней нажимаем кнопку назад в браузере - страничка (1) выдается из кеша
Но - уже без подгруженного AJAX контента

Как сделать так, чтобы
1. Весь контент был на месте в том состоянии как он был ДО перехода
2. Как сделать, чтобы возврат произошел именно на то место (вертикальный скрол от верха странички)

Спасибо за подсказки

Comments

[ksnk]

Подгрузил контент - history.replaceState({loaded:4},'') -- типа уже 4 страницы товаров сгрузил с сайта
При возврате на прежнюю страницу срабатывает событие popstate и там можно попытаться понять, сколько страниц тебе надо дозагрузить с сайта
https://developer.mozilla.org/en-US/docs/Web/API/H...

Answer 1

[black1277]

Вам нужно использовать кэширование, чтобы при возврате назад сайт мог загрузить уже загруженные данные моментально из кэша. Лучше всего для этого подходит использование Service Worker API Вот пара ссылок для понимания: youtube и Habr
А чтобы возврат происходил именно на то место откуда перешли - можно использовать якорную ссылку

Answer 2

[AUser0]

Или делать как AliExpress и другие китайские сайты, открывая новый таб на каждый чих. Или не уходить со странички, JavaScript-ом открывая модальное окно с данными "второго уровня". Ну и третий вариант, сложнее - как-то кэшировать AJAX, скроллировать JavaScript-ом.