close
Javascript

Jak wykryć, że użytkownik stracił połączenie ze stroną?

offline-js

Utrata połączenia bywa bolesna. Szczególnie jeśli akurat wypełnialiśmy długi formularz i dane zostały utracone. W tym artykule dowiesz się jak szybko wykryć utratę połączenia i powiadomić o tym użytkownika.

Po co wykrywać stan połączenia?

Wykrywanie stanu połączenia okaże się szczególnie przydatne, jeśli nie chcemy utracić danych wysyłanych przez użytkownika. Załóżmy, że piszesz artykuł w edytorze online. Po zakończeniu prac klikasz “Zapisz”, czekasz chwilę i widzisz białą stronę – utraciłeś połączenie. Cała praca poszła na marne.

Z pomocą przychodzi nam biblioteka Offline.js, która pozwala na wykrycie utraty połączenia i zapisanie danych (nawet tych wysłanych przez AJAX) w cache. Z takiego rozwiązania korzysta między innymi edytor wpisów w WordPress:

wordress utracone polaczenie

Dzięki temu użytkownik nie musi się obawiać, że utraci efekty swojej pracy.

Offline.js działa w prosty sposób. W określonych odstępach czasowych wysyła żądanie do określonego pliku na serwerze (domyślnie jest to favicon). Jeśli żądanie nie zakończy się sukcesem, to wiadomo, że połączenie zostało utracone.

Instalacja biblioteki

Instalacja Offline.js ogranicza się do pobrania i podpięcia 3 plików. Przejdź na tę stronę i pobierz pliki:

  • offline.min.js – główny skrypt JS
  • offline-theme-default.css (katalog themes) – plik domyślnego motywu (możesz wybrać inny)
  • offline-language-english.css – plik z komunikatami (możesz je przetłumaczyć na polskie)

Po podpięciu plików biblioteka zacznie działać automatycznie. Przetestujmy teraz jej działanie.

Testowanie Offline.js

Offline.js nie zadziała na serwerze lokalnym. Musisz przenieść pliki na serwer zewnętrzny. Po umieszczeniu plików na serwerze i otworzeniu strony, wyłącz internet.

Jak widzisz po zamknięciu połączenia strona automatycznie wyświetli stosowny komunikat i spróbuje nawiązać ponowne połączenie.

Zaawansowane opcje

Alternatywny adres testu połączenia

Domyślnie Offline.js sprawdza połączenie przez żądanie załadowania pliku favicon. Możesz jednak ustawić inny URL, który będzie służył do sprawdzania połączenia.

Stan połączenia

W dowolnym momencie (np. przed wysłaniem formularza) możemy sprawdzić stan połączenia:

Obsługa zdarzeń

Offline.js umożliwia nam utworzenie własnej obsługi zdarzeń. Możemy to zrobić w ten sposób:

Zdarzenia (event):

  • up – połączenie odzyskane
  • down – połączenie utracone
  • confirmed-up – test połączenia zakończony sukcesem
  • confirmed-down – test połączenia zakończony porażką
  • checking – testowanie połączenia

Pełną listę zdarzeń znajdziesz w oficjalnej dokumentacji.

Graj w oczekiwaniu na połączenie

Ciekawą opcją biblioteki Offline.js jest możliwość uruchomiania gry Snake w takcie utraty połączenia. Musimy tylko podpiąć plik snake.js i dodać nową opcję:

snake

Tags : offline.js
  • Jason Roy

    Available subjects°

    Financial Accounting
    Management Accounting
    Research
    Project Management
    Programming
    Business Law
    Hospitality and Tourism
    Human Resource
    Marketing
    Logistics
    Leadership
    .
    .
    .
    You may check course availability via message

    Get Help Now! https://www.calltutors.com/AskAssignment

  • Dzięki za artykuł! Pozwolisz, że dodam go do kolejnej edycji Warto Wiedzieć (https://github.com/piecioshka/warto-wiedziec).

    Najciekawszy feature tej biblioteki jest SNAKE 🐍
    Ciekawy pomysł autorów!

    • Jasne, dzięki za link! Zebrałeś tam niezłą kolekcję. Na pewno przy okazji ją też podlinkuje 🙂

  • h3x Poland

    hmm nie łatwiej użyż window.addEventListener(‘online’,()=>{})