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

10 stycznia 2022JavaScript
1 min515 wyświetleń

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 🚀

Przeczytaj także inne artykuły

Next Step w Web Developmencie - Czym Jest Next.js?

Next.js to najczęściej pobierany framework React.js. Jego największą zaletą jest Server Side Rendering, ale możemy go również wykorzystać jako Static Site Generator. Next.js postawiony jest na serwerze Node.js, dzięki czemu możemy w prosty sposób stworzyć aplikacje Fullstack. W 2022 roku wciąż utrzymuje się na pozycji lidera, więc nie trać czasu i zobacz, co potrafi!

7 stycznia 2022Next
4 min244 wyświetleń