Cześć! Pewnie nie raz miałeś/aś sytuację, że podczas przeglądania strony nagle straciłeś/aś połączenie z nią. Dzisiaj opowiem o tym trochę głębiej. Zapraszam!

Krótki bolesny przykład

Jesteś na stronie internetowej. Wypełniasz formularz, który nie ogranicza się do podania imienia, e-maila oraz treści, tylko jest on troszkę bardziej skomplikowany i nie wypełniasz go w minutę. Nagle tracisz połączenie. Jest panika, że stracisz to wszystko i będziesz musiał(a) pisać wszystko od nowa.

Wykrywanie aktualnego stanu połączenia

Istnieje bardzo ciekawa biblioteka offline.js, która pozwala na wykrycie nagłego stracenia połączenia i zapisania formularza z danymi w cache. Z takiego rozwiązania korzysta na przykład edytor wordpress-a na którym mam bloga.

Dzięki tej bibliotece możesz być spokojny o swoje dane, które chcesz przesłać podczas, gdy nagle internet z jakiegoś powodu odmówi posłuszeństwa.

Jak to wszystko działa?

Biblioteka działa w dość prosty, ale skuteczny sposób. W określonych odstępach czasowych biblioteka wysyła żądanie do pliku na serwerze (domyślnie jest to faviconka) i jeżeli żądanie nie zakończy się sukcesem to w prosty sposób dostajemy informację, że to połączenie zostało utracone.

Jak to zainstalować na swojej stronie?

Bardzo prosto. Potrzebujemy wejść tutaj i pobrać pliki. Potrzebujemy w zasadzie tylko trzech plików:

  1. offline.min.js – główny katalog – główny skrypt JS
  2. offline-theme-default.css – katalog themes – domyślny wygląd (możesz wybrać inny i spróbować innego wyglądu)
  3. offline-language-polish.css – katalog themes – plik z odpowiednimi komunikatami (jeżeli chcesz możesz wybrać inny język)

To wszystko. Pozostaje Ci jedynie podpiąć te trzy pliki do swojej strony i wszystko powinno działać bez problemu.

Zmiana domyślnego wysyłania faviconki

Jeżeli nie chcesz (bądź nie masz) wysyłać faviconki możesz to zmienić. Wystarczy uruchomić plik offline.min.js w jakimkolwiek edytorze i wyszukać frazy Offline.options. Tam znajduje się adres faviconki i możesz zmienić ją na inny plik.

Podsumowanie

Jak widzisz biblioteka offline.js jest bardzo przyjemna i prosta w obsłudze. Potrzebujemy dosłownie kilku chwil żeby zaczęła ona działać na Twojej stronie. A czy Ty korzystasz z tej biblioteki? A może zamierzasz? Podziel się tą informacją razem z Nami w komentarzu poniżej!