logo

Finner ut om brukeren din er online eller offline

På jobben utvikler vi en PWA (blant annet), og som en ny funksjon måtte vi advare brukere når de er frakoblet . Dette bør oppmuntre dem til først å gjenopprette nettverkstilkoblingen før de iverksetter ytterligere tiltak, og unngå mulige uønskede bivirkninger fra å være frakoblet.

Etter testing så jeg på hvordan det ble implementert og ble positivt overrasket.

Navigator.onLine

Navigator-objektet, som du får tilgang til i nettleseren via window.navigator, har en onLine-egenskap. Denne boolen er utsatt for falske positiver, men vi var ikke ute etter perfekt dekning på denne.

Men pass på den store L!

  
  window.navigator.online
  // undefined

  window.navigator.onLine
  // true

Online og offline arrangementer

Så vi vet hvordan vi kan sjekke om en bruker er online eller offline. Men hvordan kan vi oppdage endringer ? Å skrive tilpassede arrangementer har aldri vært noens favoritt, men heldigvis er online og offline arrangementer lett tilgjengelige.

Vil du prøve det? Kopier og lim inn følgende kode i en HTML-fil og åpne den i nettleseren. Deretter leker du med nettverkstilkoblingen (i operativsystemet eller nettleserens DevTools) for å se den i aksjon.

  
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Online/offline</title>
      </head>
      <body>
        <h1 id="status"></h1>
      </body>
      <script>
        function userIsOnline() {
          document.getElementById("status").textContent = "User is online";
        }

        function userIsOffline() {
          document.getElementById("status").textContent = "User is offline";
        }

        if (window.navigator.onLine) {
          userIsOnline();
        } else {
          userIsOffline();
        }

        window.addEventListener("online", userIsOnline);
        window.addEventListener("offline", userIsOffline);
      </script>
    </html>

Nettverksinformasjon

Selv om det var utenfor rekkevidden for vårt bruksområde, var det interessant å oppdage at window.navigation.connection inneholdt flere nettverksgodbiter, i form av en NetworkInformation-forekomst.

I mitt tilfelle inneholdt den følgende:

  
  downlink: 10,
  effectiveType: "4g",
  rtt: 50,
  saveData: false

Hehe, min downlink virker treg som faen? Det er ment å representere nedlastingshastigheten min i Mbps, men den er ikke engang i nærheten av det jeg forventer.

Vel, det virker som Chrome vilkårlig setter denne verdien til 10 som et tiltak mot fingeravtrykk.

Vel, takk Google for at du holder meg trygg;)