Знаете ли вы, что вы можете удерживать внимание пользователей вашего сайта даже в случае их отключения от сети! Я знаю, что вы спрашиваете себя, как это возможно.
Не паникуйте, это не требует телефонного звонка каждому пользователю 🙂 lol просто простые утверждения javascript и готово.
Для начала, я думаю, вы когда-нибудь пытались загрузить Youtube или Twitter, когда вы не подключены. Если нет, то я предлагаю вам попробовать, прежде чем идти дальше.
Что вы поняли!
Как вы могли заметить, у этих гигантов все еще есть, что показать вам, что не так уж и плохо в этом случае.
Давайте посмотрим на страницы, которые они отображают.
-
Автономная страница Youtube
-
Автономная страница Twitter
Теперь сравните эти две страницы со страницей по умолчанию, которую браузер выдает вам, когда вы пытаетесь зайти на многие другие сайты без подключения к Интернету.
Вот что вы получите, вы, вероятно, получите вот это
Или вот это,
Помните, что эти страницы отображаются даже тогда, когда пользователь пытается перейти на другую страницу, хотя он, возможно, зашел на сайт до того, как отключился от сети (если только вы не используете технологии, позволяющие это сделать).
А теперь, ребята, давайте будем честными и сравним реакцию youtube и twitter на отключение интернета и реакцию браузеров по умолчанию. Как вы думаете, что удобнее для пользователя и продолжает привлекать хоть малую часть внимания пользователей к сайту, на который они хотели попасть?
Хммм! Хммм! Надеюсь, мы все согласимся, что подход youtube и twitter лучше. Это лучший способ удержать мысли пользователей на своих продуктах, пока они (пользователи) ждут подключения к Интернету.
Почему вы не делаете то же самое на своем сайте? Успех не приходит от очень больших вещей, нет, даже то, как вы реагируете на небольшие ситуации, показывает, насколько вы готовы к своей аудитории и клиентам. Помните, что ваш успех будет определяться тем, насколько хороший опыт пользователи получат от вашего продукта.
В этом руководстве я хочу поделиться с вами простым способом на javascript определить, подключены ли ваши пользователи к сети или нет, и как вы можете предоставить им содержательную страницу.
Я знаю, что вы думаете, почему вы не начинаете, вы знаете что! Сначала немного улыбнитесь, и мы сможем двигаться дальше.
Многие разработчики используют AJAX для определения статуса подключения браузера (онлайн или офлайн), посылая запрос на сервер. Однако это не самый лучший метод определения состояния браузера, поскольку он требует пропускной способности и может повлиять на удобство использования.
Однако JavaScript’s Browser Object Model(BOM) предоставляет прямой способ определения состояния подключения браузера, т.е. является ли он онлайн или офлайн.
Чтобы выполнить эту проверку, мы будем использовать два возможных подхода
1. Использование свойства .onLine объекта navigator.
Этот первый подход нацелен на все возможные браузеры,
Вот как он устроен:
navigator.onLine
Объект navigator содержит информацию о браузере.
Свойство onLine возвращает true, если браузер находится в сети, иначе false.
Свойство navigator.onLine, как я уже говорил, хорошо тем, что оно поддерживается во всех браузерах, как показано в этой таблице:
Кроме того, свойство onLine доступно только для чтения.
Чтобы проверить, как работает этот подход, используйте эти простые html-коды:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to check
if the browser is online.</p>
<button onclick="isOnline()">
Click Me
</button>
<p id="demo"></p>
<script>
function isOnline() {
if (navigator.onLine) {
document.getElementById(
"demo").innerHTML = "Online";
} else {
document.getElementById(
"demo").innerHTML = "Offline";
}
}
</script>
</body>
</html>
2. Использование событий ononline и onoffline javascript
Примечание: События ononline и onoffline поддерживаются только в Firefox и Internet Explorer версий 8-10.
Для проверки этих событий вы можете создать файл .html и использовать следующие коды
<!DOCTYPE html>
<html>
<body>
<p>This example uses the addEventListener() method to attach a "online" and "offline" event to the window object.</p>
<p>Open the File menu and click on "Work Offline" to toggle between working online and offline.</p>
<p><strong>Note:</strong> The ononline and onoffline events are only supported in Firefox and Internet Explorer version 8 to 10.</p>
<script>
window.addEventListener("online", onFunction);
window.addEventListener("offline", offFunction);
function onFunction() {
alert ("Your browser is working online.");
}
function offFunction() {
alert ("Your browser is working offline.");
}
</script>
</body>
</html>
Или вот эти,
<!DOCTYPE html>
<html>
<body ononline="onFunction()" onoffline="offFunction()">
<p>Open the File menu and click on "Work Offline" to toggle between working online and offline.</p>
<p><strong>Note:</strong> The ononline and onoffline events are only supported in Firefox and Internet Explorer version 8 to 10.</p>
<script>
function onFunction() {
alert ("Your browser is working online.");
}
function offFunction() {
alert ("Your browser is working offline.");
}
</script>
</body>
</html>
Вот и все, вы видите, что теперь вы можете знать, подключен человек или нет.
Возвращаясь к способам youtube или twitter, вы видели, что они отображают хорошо оформленные страницы.
Как они это делают?
Вот как это происходит,
Когда пользователь посещает сайт, посещенная страница и медиа (аудио/видео/изображения) сохраняются/кэшируются браузером. Необходимо указать, какие файлы сохранять/кэшировать. Таким образом, если файл/страница существует в кэше браузера, то браузер показывает его. Это работает независимо от того, находится ли пользователь в автономном режиме или онлайн. Как правило, в кэш-файлах хранится в основном статическое содержимое и основные файлы JavaScript.
Когда запрашивается страница, если существует живая кэшированная копия страницы, браузер показывает ее. JavaScript, связанный со страницей, затем проверяет, активно ли интернет-соединение или нет. Если оно не активно, то кэшированная страница отображается с сообщением «Нет интернета».
Вот и все, секрет заключается в том, чтобы проверить, находится ли пользователь в сети или нет (возможно, используя любой из методов, показанных выше), и отобразить статическую страницу, которую он кэшировал.
Оставайтесь на связи
Чтобы не затягивать эту статью, я не буду вдаваться в подробности того, как кэшировать страницы и многое другое, я выпущу другую статью, посвященную этому очень скоро!
Заключение
Удержание внимания пользователей на вас в любом случае является одной из лучших практик. В этой статье мы рассмотрели, как можно определить, находится ли пользователь онлайн или офлайн, и решить, что делать после этого.
Надеюсь, это руководство помогло вам!
Ура! Теперь ваша очередь
Вот и все,
Мне бы хотелось узнать ваше мнение в разделе комментариев!
Оставайтесь с нами, чтобы увидеть много других интересных материалов.