Jak Ostrzec Użytkownika, Że Stracił Połączenie z Internetem?

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 🚀

Umów się na darmową konsultację!

Zaprojektuj razem ze mną profesjonalną stronę internetową dla Twojej firmy, powiększ swoją bazę klientów i bądź o krok przed konkurencją 🚀