Skill Level
Intermediate
Categories
Web Development
Reading Time
14 minutes, 3 seconds
Technology
HTML, CSS, JavaScript
Framework
No framework
Library
No library
Memeriksa Dan Visualisasi Konektivitas Browser Dengan JavaScript Web API

Malam, Bosku!

JavaScript telah menjadi bahasa scripting yang populer beberapa tahun ke belakang hingga tahun 2018 ini. Banyak hal menarik yang dapat kita buat dengan JavaScript, seperti Slider, Modal, Accordion dan lain sebagainya. Tentu semua hal tersebut agar membuat website yang kita buat menjadi lebih attractive.

Malam ini kita bahas yang ringan aja, ya! Kesempatan kali ini kita akan bahas tentang salah satu JavaScript Web API, yaitu navigator.onLine. onLine merupakan property yang tersedia dari object navigator pada JavaScript Web API.

Property tersebut mengembalikan hasil boolean (true and false) yang berarti, jika true maka browser dalam keadaan online dan jika false maka browser dalam keadaan offline. Property onLine diperbarui nilainya ketika kemampuan browser mengkoneksikan ke jaringan berubah.

Setiap browser memiliki cara yang berbeda dalam mengimplementasikan property ini.

Pada Chrome dan Safari, bila browser tidak dapat terhubung ke LAN atau router maka akan dianggap offline. Tapi, dalam semua kondisi yang lain, dianggap online. Jadi, sementara kamu dapat berasumsi bahwa browser sedang offline ketika nilai property ini adalah false. Tapi, kamu tidak dapat berasumsi browser sedang online ketika nilai property ini adalah true. Kenapa? Karena kamu bisa mendapatkan nilai true "palsu", seperti dalam kasus di mana komputer menjalankan software virtualisasi yang memiliki virtual ethernet adapters yang selalu "terhubung." Oleh karena itu, jika kamu benar-benar ingin menentukan status online pada browser, kamu harus mengembangkan cara tambahan untuk memeriksanya. Ya, ini agak perlu "kerja tambahan" lagi.

Sedangkan, pada Firefox dan Internet Explorer, mengalihkan browser ke offline mode akan mengembalikan nilai false untuk property ini. Sampai Firefox versi 41, semua kondisi yang lain mengembalikan nilai true. Sejak Firefox versi 41, pada OS X dan Windows, nilainya akan mengikuti konektivitas jaringan yang sebenarnya.

Halah, banyak teori!

Setelah penjelasan di atas yang (mungkin) membuat kamu pusing, mari kita praktekan dengan cara yang menyenangkan! Kita prakteknya pake JSFiddle aja, ya :)

Sebelumnya, mari periksa terlebih dahulu, apakah property ini didukung oleh browser kamu atau tidak,

if(window.navigator.onLine) {
	console.log('Supported!');
}else{
	console.warn('Not supported!');
}

Bila di-console Devtools kamu muncul tulisan Supported!, itu tandanya property ini didukung oleh browser kamu saat ini.

Lalu, syntax untuk mengetahui nilai return dari property ini menggunakan cara berikut,

let online = window.navigator.onLine;

Variable di atas akan menghasilkan type boolean, yaitu true dan false.

Lanjutkeun!

Ok, setelah memeriksa ketersediaan property onLine, selanjutnya kita akan membuat sebuah event listener untuk memeriksa konektivitas internet. Kamu dapat menggunakan event listener window.ononline dan window.onoffline.

window.addEventListener('online', () => {
	console.log('Kamu sedang Online!');
});

window.addEventListener('offline', () => {
	console.warn('Oh, tidak! Kamu sedang Offline!');
});

Kode di atas adalah cara sederhana atau dasar untuk mengetahui status konektivitas internet pada browser. Dengan cara tersebut, kamu akan mengetahui status internet di browser pada console Devtools.

Untuk mengujinya, on/off jaringan internet kamu, sehingga kedua tulisan tersebut akan muncul di console Devtools seperti berikut,

Online/Offline

Ayo, bikin interface yang bagus!

Agar lebih menarik, mari kita tambahkan HTML + CSS supaya memiliki interface yang lebih menarik dan memudahkan penguna kemudian pengguna akan lebih bersemangat dalam menjalani hidup!

Kita akan menggunakan tulisan berikut ini untuk ditampilkan ke pengguna ketika sedang online,

🚀 Kamu sedang online!

Kemudian ketika sedang offline,

😔 Oh, tidak! Kamu sedang offline :(

Tentu, bukan hanya itu! Kita akan menambahkan CSS agar memiliki interface yang menarik dan memiliki UX yang lebih baik.

Saya ingatkan kembali, ya. Kita gunakan JSFiddle atau platform ngoding online lainnya supaya gak ribet!.

Pertama buat struktur HTML seperti berikut untuk instruksi dan sebagai contoh halaman sebuah website,

<div class="content">
  <h1>Matikan Jaringan Internet Kamu</h1>
  <p>
    Untuk mengujinya, kamu dapat mematikan konektivitas internet kamu, dengan cara <i>turn off</i> Wi-Fi atau perangkat apapun yang membuat komputer kamu terhubung dengan internet.
  </p>
  <a href="https://kodinger.com/memeriksa-onlineoffline-browser-dengan-javascript-web-api/">Pergi Ke Tutorial</a>
</div>

Kode di atas merupakan sebuah instruksi dan sekaligus sebuah contoh halaman website. Karena, snippet ini kamu dapat terapkan di website yang kamu punya.

Kemudian tambahkan sedikit CSS untuk memberikan style pada element .content dan "anak"-nya.

.content {
  font-family: 'Segoe UI';
  margin: 0 auto;
  line-height: 30px;
  width: 800px;
  max-width: 380px;
}

.content a {
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid #8e98f5;
  color: #8e98f5;
}

Kode CSS di atas hanya untuk me-reset style dari element dengan class .content dan tag a yang ada di dalamnya.

Selanjutnya buat stuktur HTML sebagai notifikasi ketika user sedang online atau offline,

<div class="connectivity is-online" id="is-online">
  🚀 Kamu sedang online!
</div>

<div class="connectivity is-offline" id="is-offline">
  😔 Oh, tidak! Kamu sedang offline :(
</div>

Letakkan kode terebut di atas element dengan class .content. Kedua element di atas memiliki base class yang sama, yaitu .connectivity dengan maksud agar kita dapat menghemat properties di CSS karena akan memiliki interface yang sama.

Kemudian kita berikan class .is-online dan .is-offline sebagai pembeda antara notifikasi online dan offline. Karena di CSS nanti kita akan bedakan warna dari kedua notifikasi tersebut.

Ada juga id is-offline dan is-online yang bertujuan sebagai identifier untuk kita gunakan di JavaScript nanti dan bertujuan untuk mengakses DOM dari element HTML tersebut.

Sekarang saatnya berikan style pada struktur tersebut, kita akan buat notifikasi tersebut melayang di tengah atas browser pengguna dan memiliki jarak 10px dari atas. Juga, kita akan berikan efek animasi agar lebih terlihat smooth. Efek animasi yang akan kita berikan adalah,

  • Notifikasi akan berada di atas layar browser dengan jarak -100px
  • Notifikasi akan muncul secara perlahan ke jarak dari -100px ke 10px

Jika digambarkan, akan seperti berikut,

Buat rule baru pada CSS, dengan selector .connectivity,

.connectivity {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  font-family: 'Segoe UI';
  font-size: 18px;
  border-radius: 3px;
  padding: 15px 25px;
  box-shadow: 0 0 35px rgba(0,0,0,.05);
  transition: all 1s;
}

Terlihat pada kode di atas, kita berikan properti top dengan nilai -100px agar tidak terlihat oleh user sampai class .is-show diberikan pada element tersebut. Buat rule baru untuk class .is-show yang bertujuan untuk menampilkan element notifikasi ketika class tersebut diterapkan pada element dengan class .connectivity.

.connectivity.is-show {
  top: 10px;
}

Pada kode di atas kita berikan properti top dengan nilai 10px agar notifikasi muncul ke bagian atas layar browser dengan jarak 10px. Pada rule sebelumnya, kita berikan properti transition pada class .connectivity agar memberikan efek transisi yang halus ketika properti top berubah nilainya.

Selanjutnya kita berikan warna background dan warna teks yang berbeda pada element notifikasi offline dan online.

.connectivity.is-online {
  background-color: #8e98f5;
  color: #dfe2fe;
}

.connectivity.is-offline {
  background-color: #ffe08e;
  color: #fc8728;
}

Dengan seperti itu, kita akan memiliki tampilan notifikasi seperti berikut untuk offline,

Dan seperti berikut untuk online,

Ok, sampai sini kita sudah selesai membuat interface dengan HTML dan CSS. Selanjutnya kita perlu menambahkan event listener untuk memunculkan notifikasi sesuai keadaan jaringan dengan JavaScript.

Ayo dong tampilin notifikasinya pake JavaScript!

Untuk menampilkan element notifikasi tersebut hanya perlu menambahkan class .is-show pada masing-masing element. Tapi, kita perlu menambahkan class tersbut ke element notifikasi offline atau online secara otomatis berdasarkan keadaan jaringan internet pada browser pengguna.

Untuk menambahkan class pada element dengan JavaScript, kita dapat gunakan property .classList. Seperti berikut,

document.getElementById('some-element').classList += ' additional-class';

Pada kasus ini, kita akan menambahkan class is-show pada element notifikasi offline atau online,

// ketika online
document.getElementById('is-online').classList += ' is-show';
// atau ketia offline
document.getElementById('is-offline').classList += ' is-show';

Yang perlu kita lakukan sekarang adalah memasukkan kode di atas ke dalam masing-masing event listener online dan offline seperti berikut,

window.addEventListener('online', () => {
	document.getElementById('is-online').classList += ' is-show';
});

window.addEventListener('offline', () => {
	document.getElementById('is-offline').classList += ' is-show';
});

Ketika event offline terpicu, maka akan menambahkan class is-show pada element dengan ID is-offline. Begitu pula pada element dengan ID is-online.

Sampai sini, kita sudah dapat menampilkan notifikasi ketika status jaringan internet berubah,

Ada masalah? Kedua notifikasi bertumpukan? Ya, kamu benar! Kenapa seperti itu? Karena seharusnya 1 notifikasi saja yang ditampilkan pada user, dalam kata lain, ketika perlu menyembunyikan notifikasi yang sedang is-show agar tidak terjadi tubrukan.

Misal, ketika notifikasi online sedang ditampilkan, maka kita perlu menyembunyikannya dulu ketika akan menampilkan notifikasi offline. Begitupun sebaliknya, maka langkah yang perlu kita lakukan adalah menghapus class is-show pada kedua element notifikasi sebelum menampilkan kedua notifikasi tersebut. Bingung? Lihat kodenya,

window.addEventListener('online', () => {
	document.getElementById('is-offline').classList.remove('is-show');	
	document.getElementById('is-online').classList += ' is-show';
});

window.addEventListener('offline', () => {
	document.getElementById('is-online').classList.remove('is-show');	
	document.getElementById('is-offline').classList += ' is-show';
});

Pada kode di atas, kita menambahkan baris kode document.getElementById('is-offline').classList.remove('is-show'); dan document.getElementById('is-online').classList.remove('is-show'); pada masing-masing event listener, gunanya untuk menghapus class is-show pada masing-masing element notifikasi.

Dalam kata lain, ketika notifikasi online sedang ditampilkan maka akan disembunyikan terlebih dahulu sebelum menampilkan notifikasi offline, begitu juga sebaliknya.

Ok, sampai sini sudah dapat kan esensinya? Semoga sudah, ya! :)

Kamu dapat masalah lagi? Kalau saya, ada. Saya pikir notifikasi online tidak perlu terus ditampilkan, karena akan sedikit mengganggu pengguna, betul? Seharusnya, ketika notifikasi online ditampilkan maka notifikasi tersebut akan hilang dengan sendirinya dalam beberapa detik (mungkin).

Baik, saya ingin membuat notifikasi online menghilang dalam 5 detik setelah muncul. Kamu tahu caranya? Ya! Kita gunakan setTimeout(). Dengan setTimeout() kita dapat mengeksekusi kode ketika waktu yang ditentukan habis. Misal seperti berikut,

setTimeout(() => {
  alert('Hello!');
}, 1000);

Bila kode di atas dieksekusi, maka akan menampilkan alert dialog pada browser ketika waktu tunggu sudah mencapai 1000ms atau 1 detik.

Sekarang kita akan gunakan kode tersebut dan letakkan ke dalam event listener online, namun yang akan kita eksekusi bukan alert dialog, tapi document.getElementById('is-online').classList.remove('is-show'); . Kenapa? Karena kita akan menghapus class is-show pada notifikasi online agar kembali bersembunyi dalam 5 detik setelah muncul.

Jadi, di dalam event listener online menjadi seperti berikut,

window.addEventListener('online', () => {
	document.getElementById('is-offline').classList.remove('is-show');	document.getElementById('is-online').classList += ' is-show';
  setTimeout(() => {
  		document.getElementById('is-online').classList.remove('is-show');
  }, 5000);
});

Dengan seperti itu, maka kita memiliki hasil akhir seperti berikut ini,

Selesai sudah. Kamu dapat lihat demo dan kodenya di sini.

Final Words

Pada post kali ini saya rasa cukup bermanfaat. Karena, kita sudah mencoba membuat visualisasi konektivitas jaringan internet pada browser dengan HTML, CSS dan JavaScript. Kamu dapat mengadopsi potongan kode pada post ini dan disematkan pada kode project yang sedang kamu garap. Semoga bermanfaat, ya!

Referensi:

Baca juga post berikut

Submit Form Dengan jQuery Ajax

Menghilangkan Branding Pada Boxbilling V...

Muhamad Nauval Azhar
3 months ago  •  Posted by
Muhamad Nauval Azhar
Junior Programmer

Pecinta Alam (Mbah dukun)

Dapatkan notifikasi untuk setiap artikel baru dan jadilah yang pertama tahu!