Kako provjeriti status internetske veze pomoću Async JavaScript-a

Možete li pomoću JavaScript provjeriti je li vaša aplikacija povezana s internetom?

U ovom ću članku pružiti ažurirani odgovor na ovo pitanje o otkrivanju internetske veze. (Ma! Reci to brzo pet puta!)

Rješenje će koristiti JavaScript-ov Fetch API i asinkroni kod s Async & Await. Ali prvo, pogledajmo prihvaćeno rješenje i razgovarajmo zašto ono možda nije najbolji izbor za vašu prijavu.

navigator.onLine

Internetsko svojstvo navigatorskog sučelja navigator.onLinečesto se koristi za otkrivanje mrežnog i izvanmrežnog statusa preglednika.

Čini se da u kombinaciji sa slušateljima internetskih i izvanmrežnih događaja pruža jednostavno rješenje za programere koje je lako implementirati.

Pogledajmo kako bismo implementirali navigator.onLine

Započnite dodavanjem slušatelja događaja učitavanja. Kad se pokrene događaj učitavanja, slušatelj će provjeriti internetsko svojstvo navigatorskog sučelja, a zatim prikazati mrežni status.

Internetsko svojstvo navigatora pruža logički (istiniti ili lažni) odgovor. Da bismo dovršili akciju slušatelja, upotrijebit ćemo trokraki izraz kako bismo postavili vrijednost prikaza statusa.

window.addEventListener("load", (event) => { const statusDisplay = document.getElementById("status"); statusDisplay.textContent = navigator.onLine ? "Online" : "OFFline"; });

Pa zašto riječ navigator? Pa, to je referenca na preglednik Netscape Navigator iz 90-ih.

Centrirajte element h1 na svojoj HTML stranici s ID-om "status". Ako na svoju stranicu primijenite gornji JavaScript kôd, trebali biste vidjeti kako prikazuje "Online".

Ali ovo ažurira element h1 samo kada se stranica učita. Dodajmo slušatelje izvanmrežnih i mrežnih događaja kako bismo ažurirali prikaz statusa bilo kad se bilo koji od tih događaja aktivira.

window.addEventListener("offline", (event) => { const statusDisplay = document.getElementById("status"); statusDisplay.textContent = "OFFline"; }); window.addEventListener("online", (event) => { const statusDisplay = document.getElementById("status"); statusDisplay.textContent = "Online"; });

Možemo otići na karticu Aplikacije Chrome Dev Tools i kliknuti na ServiceWorker kako bismo postavili preglednik da reagira kao da je izvan mreže.

Označite i poništite potvrdni okvir Izvanmrežno nekoliko puta. Trebali biste vidjeti kako prikaz statusa odmah reagira na pokrenute izvanmrežne i mrežne događaje.

Kopajmo malo dublje

Na prvi dojam, gore se čini kao dobro rješenje koje je prilično jednostavno. Nažalost, dok čitamo više o mrežnom svojstvu navigatora i mrežnim i izvanmrežnim događajima, otkrivamo da postoji problem.

Traženje navigator.onLine na CanIUse.com pokazuje široku podršku mreži | izvanmrežni status koji pruža svojstvo. Međutim, gledajući bilješke ispod tablice podrške, vidimo to

“Internet ne znači uvijek povezanost s Internetom. To također može značiti samo vezu s nekom mrežom ”.

Hmm, to pomalo baca ključ.

Dakle, ako stvarno želite utvrditi mrežni status preglednika, trebali biste razviti dodatna sredstva za provjeru.

Pogledajmo i referencu MDN dokumenata za navigator.onLine. Web dokumenti MDN izrađuju sigurnosnu kopiju podataka CanIUse.com i dodaju dodatne bilješke.

“Preglednici drugačije implementiraju ovo svojstvo ... ne možete pretpostaviti da istinska vrijednost nužno znači da preglednik može pristupiti internetu. Možda dobivate lažno pozitivne ... "

I to potvrđuje našu bojazan od korištenja internetskog svojstva navigatora kao našeg rješenja za otkrivanje internetske veze. To je rješenje koje može izazvati pustoš u našim aplikacijama koje ovise o znanju kada su dostupni vanjski izvori podataka.

Jedan od takvih primjera je kada pokušavamo utvrditi je li Progresivna web aplikacija mrežna ili nije. MDN čak preporučuje,

"... ako stvarno želite utvrditi mrežni status preglednika, trebali biste razviti dodatna sredstva za provjeru."

Brzo pretraživanje weba za "mrežni navigator ne radi" otkriva razne postove na forumu u kojima su oni koji ovisno o ovom svojstvu nailaze na probleme.

Pa, koje je rješenje?

Moramo znati kada je naša aplikacija zaista povezana s Internetom, a ne samo s usmjerivačem ili lokalnom mrežom. Vratimo se našoj JavaScript datoteci i krenimo ispočetka.

Ideja je podnijeti zahtjev i graciozno ga riješiti uz hvatanje pogrešaka ako ne uspije. Ako zahtjev uspije, mi smo na mreži, a ako ne uspije, nismo.

Zatražit ćemo malu sliku u razmaku kako bismo odredili mrežni status. Suvremeni JavaScript nudi Fetch API i asinkroni kod s Async & Await. Koristit ćemo ove alate za postizanje svog cilja.

checkOnlineStatus ()

Počnimo s stvaranjem funkcije asinkrne strelice nazvane checkOnlineStatus. Funkcija će vratiti true ili false kao što to čini internetsko svojstvo navigatora.

Unutar funkcije postavit ćemo probani blok gdje čekamo zahtjev za dohvaćanjem slike od jednog piksela. Osigurajte da vaš serviser ne sprema ovu sliku u predmemoriju.

HTTP kodovi odgovora između 200 i 299 ukazuju na uspjeh, a mi ćemo vratiti rezultat usporedbe statusnog koda. To će biti točno ako je status odgovora od 200 do 299, a u suprotnom false.

Također moramo osigurati blok catch koji hvata pogrešku ako zahtjev ne uspije. Vratit ćemo false u bloku catch kako bismo naznačili da smo definitivno izvan mreže ako se to dogodi.

const checkOnlineStatus = async () => { try { const online = await fetch("/1pixel.png"); return online.status >= 200 && online.status < 300; // either true or false } catch (err) { return false; // definitely offline } };

Dalje ćemo koristiti metodu setInterval i proslijediti joj anonimnu funkciju asinkronizacije. Funkcija asinkronizacije čekat će rezultat naše funkcije checkOnlineStatus. Zatim ćemo upotrijebiti trostruku izjavu s rezultatom za prikaz trenutnog mrežnog statusa.

Za testiranje ovog primjera postavite kašnjenje intervala na svake 3 sekunde (3000 milisekundi). To je doista prečesto. Provjeravanje svakih 30 sekundi (30000 milisekundi) može biti dovoljno za vaše stvarne potrebe.

setInterval(async () => { const result = await checkOnlineStatus(); const statusDisplay = document.getElementById("status"); statusDisplay.textContent = result ? "Online" : "OFFline"; }, 3000); // probably too often, try 30000 for every 30 seconds

S našim novim kodom spremljenim, posjetimo karticu Aplikacije u Chrome Dev Tools da testiramo izvanmrežni odgovor.

I almost forgot to include the load event listener with async functionality! The load event detection is probably only important if you have a Progressive Web App utilizing a service worker for offline availability. Otherwise, your web page or app simply won't load without a connection.

Here's the new load event listener:

window.addEventListener("load", async (event) => { const statusDisplay = document.getElementById("status"); statusDisplay.textContent = (await checkOnlineStatus()) ? "Online" : "OFFline"; });

A Final Thought

The above interval code is good for displaying a connection status in your app. That said, I don't suggest relying on a connection status that was checked 20 or 30 seconds prior to making a critical data request in your application.

Therefore, you should call the checkOnlineStatus function directly prior to the request and evaluate the response before requesting data.

const yourDataRequestFunction = async () => { const online = await checkOnlineStatus(); if (online) { // make data request } }

Conclusion

While navigator.onLine is widely supported, it provides unreliable results when determining if our applications are truly connected to the Internet. Utilizing the Fetch API and asynchronous JavaScript, we can quickly code a more reliable solution.

Here’s a link to the code gist on GitHub, and here's a video tutorial I put together: