Suatu saat kita akan membuat aplikasi yang membutuhkan distribusi konten melalui internet, aplikasi web tentunya. Ketika pengguna memakai aplikasi tersebut, hal terbaik yang patut disematkan adalah menggunakan fitur yang menampilkan apakah kondisi internet dalam posisi online atau mungkin offline. Untuk menyematkan fitur tersebut, HTML5 telah mempunyai fitur untuk menanganinya.
HTML5 Online Navigator
Fitur HTML5 ini bernama Navigator Online. Dimana implementasinya cukup mudah diikuti dan sangat baik jika dipakai untuk aplikasi web. Dalam tutorial ini, saya menggunakan browser Mozilla Firefox yang telah support untuk fitur Navigator Online HTML5.
Contents
Tutorial
- Buka folder localhost Anda, dan buat folder baru bernama html5online (opsional),
- Buat file bernama index.html. Tulis kode berikut :
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8> | |
| <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1“> | |
| <title>HTML5 Navigator</title> | |
| <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js“></script> | |
| <link href=”http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300” rel=”stylesheet” type=”text/css“> | |
| <link href=”style.css” rel=”stylesheet” type=”text/css“> | |
| <body> | |
| <div class=”top“> | |
| </div> | |
| <section id=”wrapper“> | |
| <header> | |
| <h1>HTML5 Navigator Online</h1> | |
| </header> | |
| <section> | |
| <h3>Kondisi Internet Anda: <span id=”kondisi“>checking…</span></h3> | |
| <p>Cek dengan cara mematikan fitur online, jika di Mozilla Firefox (klik File –> Work Offline)</p> | |
| <p>Atau dengan mematikan koneksi internet di Komputer Anda</p> | |
| </section> | |
| <script> | |
| var status = document.getElementById(‘kondisi’) | |
| setInterval(function () { | |
| status.className = navigator.onLine ? ‘online’ : ‘offline’; | |
| status.innerHTML = navigator.onLine ? ‘online’ : ‘offline’; | |
| }, 100); | |
| </script> | |
| </body> | |
| </html> |
by Setelah membuat file index.html tersebut, Anda bisa membuka browser Firefox lalu mencoba dengan mengatur settingan online atau offline koneksi internet. Pengaturan ini terletak di menu File, lalu centangi Work Offline untuk offline dan hilangkan centang Work Offline untuk kembali ke kondisi online.
Saya menyarankan Anda untuk menggunakan browser Mozilla Firefox ketika membuat tutorial atau menjalankan demo HTML5 online navigator ini.
