W wielu aplikacjach webowych możemy zauważyć komunikat o utraconym połączeniu z internetem. Jest to świetne rozwiązanie pod kątem UX, ale można je również wykorzystać do lepszego funkcjonowania aplikacji.
Jak śledzić połączenie użytkownika?
Śledzenie połączenia nie wymaga pobierania dodatkowych bibliotek i możesz w prosty i szybki sposób wprowadzić cały mechanizm z użyciem Javascript:
Offline event
Event odpalany w momencie utraty połączenia.
window.addEventListener( 'offline', ( event ) => {
// Notification when connection is lost
});window.onoffline = event => {
// Notification when connection is lost
};Online event
Event odpalany w momencie odzyskania połączenia.
window.addEventListener( 'online', ( event ) => {
// Notification about reconnection
};window.ononline = event => {
// Notification about reconnection
});Wykorzystanie
Najlepszym przykładem wykorzystania tego mechanizmu jest sytuacja, w której użytkownik wprowadza dane do formularza, bądź wykonuje akcję, która wymaga zapisania danych. W momencie utracenia połączenia z internetem wysyłamy użytkownikowi powiadomienie oraz możemy zapisać wprowadzone przez niego dane do np. localStorage.
Dlaczego warto?
- Użytkownik wie, że w razie problemów wina leży po stronie połączenia, a nie aplikacji,
- User experience - pokazujemy, że pamiętamy o użytkowniku, nawet gdy utraci połączenie,
- Zapisując dane wychodzimy naprzeciw użytkownikowi, który nie musi martwić się ponownym wpisywaniem danych.
Podsumowanie
Dbanie o użytkownika, gdy straci połączenie, to zdecydowany quick win.
W prosty sposób jesteśmy w stanie wprowadzić mechanizm powiadomień, który z pewnością zostanie doceniony przez wielu użytkowników i pozwoli Ci lepiej obsługiwać błędy.
Warto wprowadzić to rozwiązanie w swojej aplikacji, szczególnie teraz, kiedy większość użytkowników korzysta z aplikacji mobilnie, gdzie często są narażeni na utratę Wi-Fi / zasięgu.
Miłego dzionka 🚀