В веб-приложениях иногда пользователь отключается от сети. На этот раз как приложение будет работать. Итак, если вы создаете хорошее приложение, оно должно определять, когда пользователь переходит в автономный режим, и вести себя соответствующим образом. В некоторых из моих внештатных проектов я сталкивался с подобными проблемами. После этого я обратился к HTML5 MDN для работы с офлайн и онлайн-событиями.
Для создания хорошего приложения вы должны знать , когда пользователь переходит в автономный режим, и писать логику соответственно. Есть некоторые варианты использования, когда важно обнаружение офлайн- и онлайн-событий.
Пример использования 1:
Когда пользователь заполняет длинную форму и заполняет ее в середине, пользователь переходит в автономный режим из-за отключения электроэнергии или какой-либо проблемы с подключением. В этом варианте использования обнаруживайте автономное событие и сохраняйте данные в локальном хранилище, и когда пользователь снова будет подключен к сети, данные будут отправлены на сервер.
Пример использования 2:
Второй вариант использования связан с кешем приложения. Когда пользователь переходит в автономный режим, загружается контент из кеша приложения.
Обнаружение событий офлайн / онлайн:
Для обнаружения оффлайн и онлайн событий вам поможет объект навигатор. Используя приведенный ниже код, вы можете определить, находится ли пользователь в сети или офлайн.
navigator.onLine;
Приведенный выше код даст вам логическое значение true или false. Если пользователь в сети, то в приведенном выше коде будет указано true, в противном случае - false.
if(navigator.onLine === true){
console.log('online')
}else{
console.log('offline')
}
Если пользователь находится в сети, будет напечатана первая консоль, в противном случае будет напечатана вторая консоль. Но этот код фрагмента проверяет только, находится ли пользователь в сети или офлайн. Но в некоторых случаях мы запускаем функцию, когда пользователь отключается от сети или снова подключается к сети. Для этого требования мы можем использовать window.addEventListner.
window.addEventListener('online', () => {
console.log('online')
})
window.addEventListener('offline', () => {
console.log('offline')
})
Пример использования:
Когда пользователь переходит в автономный режим, сохраните данные в локальном хранилище, а когда пользователь вернется в сеть, получите данные из локального хранилища, отправьте их на сервер и очистите локальное хранилище.
function updateOnlineStatus(event){
if(event.type == 'offline') {
console.log('offline')
localStorage.setItem('user', 'Vaibhav Sharma');
}
if(event.type == 'online') {
console.log(localStorage.getItem('user'));
localStorage.clear();
}
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
Разработка кода:
- Создайте функцию, которая передает window.addEventListener, когда пользователь переходит в автономный режим или возвращается в сеть.
- Эта функция проверяет тип события.
- Если тип события - «офлайн», сохраните данные в локальном хранилище.
- Если тип события - «онлайн», выберите данные из локального хранилища и очистите локальное хранилище.
