Window: событие pagehide

По аналогии с событиями unload и beforeunload, это событие не всегда срабатывает в браузерах, особенно на мобильных. Например, событие pagehide может вовсе не сработать в следующем сценарии:

1. Пользователь открывает страницу с мобильного браузера.
2. Некоторое время спустя он переключается на другое приложение.
3. А затем он закрывает браузер при помощи менеджера приложений.

Тем не менее, в отличие от событий unload и beforeunload, это событие совместимо кешом для перехода вперёд и назад (bfcache), поэтому обработчик этого события не помещает странице быть закешированной в bfcache.

Поэтому, чтобы определить завершение пользовательской сессии предпочтительнее всего использовать событие visibilitychange. Если в браузерах не поддерживается visibilitychange, вместо него следует использовать событие pagehide как наиболее подходящую альтернативу.

В случае, если нужно определить именно наступление событий unload, то событие pagehide как нельзя лучше подойдёт для этого.

Дополнительные сведения о том, как данное событие связано с другими событиями жизненного цикла страницы, смотрите на странице Page Lifecycle API.

В следующем примере добавлен обработчик для отслеживания событий pagehide, чтобы что-то сделать на случай, если страница была сохранена в кеше для возможного повторного использования.

window.addEventListener(
  "pagehide",
  (event) => {
    if (event.persisted) {
      /* Страница была сохранена в кеше, её можно повторно использовать */
    }
  },
  false,
);

Этот обработчик также можно написать с помощью свойства обработчика события onpagehide в объекте Window:

window.onpagehide = (event) => {
  if (event.persisted) {
    /* Страница была сохранена в кеше, её можно повторно использовать */
  }
};

• Событие pageshow.
• Page Lifecycle API содержит рекомендуемые практики по обработке поведения жизненного цикла страницы в веб-приложениях.
• PageLifecycle.js: JavaScript-библиотека, которая решает несоответствия в работе жизненного цикла страница в разных браузерах.
• Кэш для перехода назад и вперед объясняет, что такое кеш "назад/вперед", и его последствия для различных событий жизненного цикла страницы.