Эта запись в блоге изначально была опубликована на веб-сайте webinuse.com
Бывают случаи, когда нам нужно отслеживать интернет-соединение пользователей. Это особенно полезно, если мы создаем CRM, CMS или другое программное обеспечение, связанное с контентом. Возможно, пользователь пытается что-то сохранить и соединение теряется, вместо того, чтобы потерять то, что он уже сделал, мы можем предупредить нашего пользователя о потере соединения и сохранить данные локально, например. локальное хранилище.
Помимо предупреждения, мы можем отправить им сообщение о том, что мы сохраним все локально, чтобы пользователи знали, что мы заботимся об их времени, опыте и данных.
Как зарегистрировать потерянное соединение
К счастью, в JavaScript есть решение для этого. Это событие называется .onoffline
. Как только JS регистрирует потерю интернет-соединения, он запускает событие .onoffline
. Это событие поддерживают все основные браузеры, сообщает MDN.
Как и любое другое событие, есть два способа добавить прослушиватель событий. Давайте посмотрим на пример ниже.
/** * We can trigger onoffline event by using addEventListener * */
window.addEventListener("offline", (event) => { //here we run our code, what to do //when connection is lost })
/** * We can trigger onoffline event by using onoffline * */
window.onoffline = event => { //here we run our code, what to do //when connection is lost }
Как зарегистрироваться при восстановлении соединения
После того, как мы зарегистрировали потерянное соединение, мы, вероятно, захотим зарегистрировать, когда соединение будет восстановлено.
Подобно событию .onoffline
, есть событие .ononline
. Он срабатывает, когда JS замечает, что мы снова в сети. Давайте проверим пример. Это событие поддерживают все основные браузеры, сообщает MDN.
/** * We can trigger ononline event by using addEventListener * */
window.addEventListener("online", (event) => { //here we run our code, what to do //when connection is restored })
/** * We can trigger onoffline event by using ononline * */
window.ononline = event => { //here we run our code, what to do //when connection is restored }
Что делать?
Когда пользователь не в сети, мы можем отправить предупреждение и сохранить данные в localStorage.
Почему это хорошо?
- Пользователь предупрежден и знает, что если что-то не работает должным образом, это не вина приложения, а чья-то еще
- Лучший пользовательский опыт. Показывает, что мы думали о них, даже когда интернет не работал
- Мы можем избавить пользователя от дополнительной боли потери данных, которые он уже ввел.
Итак, давайте рассмотрим пример того, как это будет выглядеть, если мы попытаемся реализовать это в реальном мире.
/** * First we can deal with * offline state * */
function offlineState() { /** * The first thing we need to do is * get data that user could posibly * enter or change, e.g. form elements * */ const data = document.querySelector("#input").value;
/** * Our example is simple, but usually here * we would collect all data and * put it in array or object. * */
localStorage.setItem("data", data);
alert("Your connection is lost! Data is saved locally!"); }
//Now, let's add event listener
window.addEventListener("offline", offlineState);
/** * Next thing we will do is create * function for when application is back * online * */
function onlineState() { /** * The first thing we will do is * get data from localStorage * and return it to form * */
let data = localStorage.getItem("data");
document.querySelector("#input").value = data;
//Now we notify user that everything is //back online again
alert("We are back online! Keep the good work!"); }
//Next thing is creating event listener
window.addEventListener("online", onlineState);
Этот пример просто показывает, что мы можем сделать. Это не окончательное руководство.
Если вам интересно, чтобы я написал полную функцию для событий .onoffline
и .ononline
, вы можете найти меня в Твиттере.
Если у вас есть какие-либо вопросы или что-то еще, вы можете найти меня в моем Твиттере, или вы можете прочитать некоторые из моих других статей, таких как Что такое WordPress? Супер простое руководство для начинающих.