Как выводить заглушку на сайте при отсутствии интернет соединения?

Question

[zaart]

Здравствуйте!

Попалась мне на глаза одна фича, которую используют сайт вк и днс (может и друге, но я не встречал еще)

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

Comments

[Anton Mashletov]

А почему бы просто не посмотреть их код?

Answer 1

[MoksS]

Прочитайте пожалуйста, это вам как вариант https://developer.mozilla.org/ru/docs/Web/API/Navi...

Answer 2

[Владимир Проскурин]

Ребята, это не пинг и не NavigatorOnLine, так делать нельзя, ибо пользователь может читать статью, а вы ему при потере интернета все обломаете. Такая плашка работает на сайтах, чей контент грузится по ajax, без перезагрузки страницы. Плашка должна показываться при неудачном ajax запросе получения страницы, и в идеальном случае, предлагать посмотреть оффлайн страницы (предварительно загруженные в хранилище). Если же сайт не ajax, можно при помощи того же NavigatorOnLine делать проверку, что если сайт в оффлайне, превентить переходы по ссылкам, и показывать эту плашку только в случае клика на ссылку.

Answer 3

[Stalker_RED]

Если сделать ajax запрос при отключенном интернете, то он оборвется по таймауту.
Можно подписаться на событие таймаута и показать заранее заготовленную табличку.

xhr.ontimeout = function (e) {
  // показать табличку
};

При "обычном" POST или GET запросе (переходе по ссылке или отправка формы) это не сработает, и табличку о обрыве соединения вам покажет сам браузер.

Answer 4

[ilovemaryjane]

Скорее всего сервис воркеры. Как делать не знаю)
А может это провайдер инжектит? Интернета нет на каком уровне (отключен адаптер, или неполадки в сети)?

Comments

[Дмитрий Литвиненко]

+ NavigatorOnLine.onLine

[ilovemaryjane]

Дмитрий Литвиненко, интересная фича. Надо попробовать сделать.

Answer 5

[Sanes]

Ajax скрипты по таймеру дергают скорее всего.

Answer 6

[nikitamarcius]

zaart привет. Смотри готовый вариант https://codepen.io/nikitamarcius/pen/xYMJVE (нативный JS), он работает на предложенном Your_Jesus варианте.

Answer 7

[Андрей]

Service Worker это называется, гуглим...