HTML5 — продолжаем погружение: Online events, Page Visibility и History Api

Online events, Page Visibility и History Api

Наверняка будущие веб-разработчики будут здорово удивляться, как мы обходились без этих, соавершенно необходимых вещей.

Прежде всего это проверка соединения браузера с сетью. Теперь это происходит с помощбю online и offline events и делается следующим образом:

if (navigator.onLine){
    alert('we are online!');
} else {
    alert('offline :-\\);
}

Соответственно появились новые обработчики событий onOnline и onOffline:

window.addEventListener('offline'
function(){
    alert('ААААААААААААА! Все пропало!');
});

Как мы без всего этого обходились раньше? Я не знаю.

Одно замечание, состояние onLine подразумевает наличие связи не с ка какой то абстрактной сетью, а непосредственно с веб-сервером, на котором хоститься запрошенная страница. То есть если вы запросили документ с хоста на вашем компьютере, вы будете 'onLine'.

Page Visibility API позволяет, определить момент когда страница не активна (свернута или открыта другая вкладка). Это позволяет например приостановить воспроизведение видео или анимации ли наоборот выполнить какой нибудь сценарий в фоновом режиме:

document.addEventListener('visibilitychange',function(e){
    if (document.hidden) {
          stopVideo();
       } else {
          startVideo();
       }
  });

API определяет одно событие (visibilitychange) четыре visibility- свойтства у документа:

visible — документ активен

hidden — документ скрыт

preview — документ доступен для просмотра

prerendered — документ предварительно отрисован (пказается другого важного новшества HTML5, Prerendering

Контроль истории посещений вообще и кнопки Back в частности всегда был несбыточной мечтой, вот теперь она стала реальностью. History API DOM объектом Histoty, поддерживающий следующие методы:

• history.go(n) — перемещение по истории посещений. В случае отрицательного значения n переход назад, иначе — вперед.
• history.back() - перемещение, как при нажатии кнопки Back или history.go(-1)
• history.forward() - перемещение, как при нажатии кнопки Forward или history.go(1)

Это всё просто переходы. Мало? Дальше будет интересней.

• history. State() - Этот метод возвращает текущий объект состояния хистори (проще — текущую страницу из истории)

Объект state содержит заголовок страницы, данные и её url

• history. pushState(data, title [, url ] ) - добавление новой позиции в историю. Первый аргумент тут — данные, которые теперь будут располагаться под заданным заголовком с присвоенным url.
• window . history . replaceState(data, title [, url ] ) - замещение данных

Пример:

history.pushState({name:'about'},'About','/about.html');
history.replaceState({name:'newName'},'About','/about.html');

Если не совсем понятно, зачем все это нужно, поясняю — таким образом мы можем добавлять и изменять собственные объекты в History.

Последствий (на данный момент, так как спецификация активно разрабатывается)

• history. Length - метод возвращает число страниц в объекте History

ля:

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