Проверка доступности Интернета на JavaScript

Все мы с вами пользуемся Интернетом. На компьютере или на мобильном устройстве – неважно, во всех них могут быть перебои в работе. Закончились деньги или просто отключился свет – при взаимодействии в таких условиях с вашим сайтом важные не сохраненные данные могут пропасть.

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

Модуль формируется из трех составляющих. Это верстка:

<div class="m_inCheck_main">

	<div class="m_inCheck" style="opacity: 0;">
 
		<div class="m_inCheck_padding">

			<div class="m_inCheck_title m_inCheck_all_text">У Вас остуствует Интернет!</div>
			<div class="m_inCheck_text m_inCheck_all_text">Дальнейшая работа с сайтом невозможна ...</div>

		</div>
    
		<div class="m_inCheck_hide" title="Скрыть уведомление" onclick='document.getElementsByClassName("m_inCheck")[0].classList.remove("m_inCheck_show");'></div>
  
	</div>
  
</div>

Оформление (стиль):

/** © 2018 Artem Malcov | https://www.pandoge.com/moduli-i-skripty/proverka-dostupnosti-interneta-na-javascript **/

.m_inCheck_main * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.m_inCheck_main *:before, .m_inCheck_main *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.m_inCheck {
	position: fixed;
	right: 15px;
	bottom: 15px;
	background: #d31c0c url("/img/bg.png");
	border-radius: 4px;
	width: 360px;
	height: 60px;
	border-top: 1px solid #ec3515;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
	font-family: arial;
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	transform: translateY(20%);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
	visibility: hidden;
}

.m_inCheck_title {
	font-size: 17px;
}

.m_inCheck_text {
	font-size: 13px;
	margin: -1px 0 0 0;
}

.m_inCheck_all_text {
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	color: #fff;
}

.m_inCheck_padding {
	background: url("/img/info.png") no-repeat 14px center;
	background-size: 34px 34px;
	height: 59px;
	padding: 10px 0 0 62px;
}

.m_inCheck_hide {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 15px;
	height: 15px;
	border-radius: 4px;
	background: #a41d0a url("/img/close.png") no-repeat center center;
	transition: .2s;
}

.m_inCheck_hide:hover {
	cursor: pointer;
	background: #961800 url("/img/close.png") no-repeat center center;
	transition: .2s;
}

.m_inCheck_show {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1 !important;
	visibility: visible;
	z-index: 9999999;
}

И сам скрипт:

<script>

	setInterval(function() {
		
		var request_inCheck = new XMLHttpRequest();

		request_inCheck.open("GET", window.location.pathname, true);
		request_inCheck.timeout = 2000;

		request_inCheck.addEventListener("readystatechange", function() {
			
			if(request_inCheck.status == 0) {

				document.getElementsByClassName("m_inCheck")[0].classList.add("m_inCheck_show");

			} else {

				document.getElementsByClassName("m_inCheck")[0].classList.remove("m_inCheck_show");

			}
			
		});

		request_inCheck.send();
		
	}, 5000); // Проверка каждые 5 секунд

</script>

Визуально это все выглядит так:

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