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

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

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

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

5bf44ff69ca8c697973568.jpeg5bf45002b35ef663150000.jpeg
  • Вопрос задан
  • 3049 просмотров
Пригласить эксперта
Ответы на вопрос 6
Vlad_IT
@Vlad_IT
Front-end разработчик
Ребята, это не пинг и не NavigatorOnLine, так делать нельзя, ибо пользователь может читать статью, а вы ему при потере интернета все обломаете. Такая плашка работает на сайтах, чей контент грузится по ajax, без перезагрузки страницы. Плашка должна показываться при неудачном ajax запросе получения страницы, и в идеальном случае, предлагать посмотреть оффлайн страницы (предварительно загруженные в хранилище). Если же сайт не ajax, можно при помощи того же NavigatorOnLine делать проверку, что если сайт в оффлайне, превентить переходы по ссылкам, и показывать эту плашку только в случае клика на ссылку.
Ответ написан
Stalker_RED
@Stalker_RED
Если сделать ajax запрос при отключенном интернете, то он оборвется по таймауту.
Можно подписаться на событие таймаута и показать заранее заготовленную табличку.
xhr.ontimeout = function (e) {
  // показать табличку
};

При "обычном" POST или GET запросе (переходе по ссылке или отправка формы) это не сработает, и табличку о обрыве соединения вам покажет сам браузер.
lJJHkr.png
Ответ написан
@ilovemaryjane
Скорее всего сервис воркеры. Как делать не знаю)
А может это провайдер инжектит? Интернета нет на каком уровне (отключен адаптер, или неполадки в сети)?
Ответ написан
nikitamarcius
@nikitamarcius
zaart привет. Смотри готовый вариант https://codepen.io/nikitamarcius/pen/xYMJVE (нативный JS), он работает на предложенном Your_Jesus варианте.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы