Задать вопрос

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

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

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

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

5bf44ff69ca8c697973568.jpeg5bf45002b35ef663150000.jpeg
  • Вопрос задан
  • 4103 просмотра
Подписаться 10 Средний 1 комментарий
Решения вопроса 1
@MoksS
Прочитайте пожалуйста, это вам как вариант https://developer.mozilla.org/ru/docs/Web/API/Navi...5bf482010d2a0303590990.png
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 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
Скорее всего сервис воркеры. Как делать не знаю)
А может это провайдер инжектит? Интернета нет на каком уровне (отключен адаптер, или неполадки в сети)?
Ответ написан
Sanes
@Sanes
Ajax скрипты по таймеру дергают скорее всего.
Ответ написан
Комментировать
nikitamarcius
@nikitamarcius
zaart привет. Смотри готовый вариант https://codepen.io/nikitamarcius/pen/xYMJVE (нативный JS), он работает на предложенном Your_Jesus варианте.
Ответ написан
Комментировать
iCoderXXI
@iCoderXXI
React.JS/FrontEnd engineer
Service Worker это называется, гуглим...
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы