Membuat Notifikasi saat offline
Pernah gak temen – temen melihat notifikasi pada Gmail seperti gambar berikut :
atau bagi pengguna web.whatsapp.com notifikasinya terlihat seperi ini :
Pasti sering ya, apa lagi jika pake koneksi dari provider yang cuma nebar janji yang katanya kenceng nyatanya mblenjani (ingkar) janji, hahaha…
malah seringnya nemuin ini ya bro :
Wahihihi
Notifikasi pada gmail/wa diatas memiliki fungsi memberitahukan ke kita kalo kita sedang tidak terkoneksi dengan internet.
Mungkin ada yang pernah mengalami akan memposting sesuatu pada sebuah website, sudah menulisnya panjang lebar tapi saat menekan tombol submit/kirim tampilan blank atau server not found karna ternyata koneksi kita putus, haduuhh mama sayangee, wkwkwk.
Saya dulu juga pernah mengalami hal tersebut saat akan mempost matakuliah yang saya pilih ketika masa KRS, setelah selesai saya memilih kemudian saya tekan submit dan hasilnya bukan informasi sukses yang saya dapat, tapi server not found. Walapun masih bisa diback, tapi ya gimana ya, ada perasaan kaget, kecewa, sedih dan menyesal, halaaah lebay.
Jika ada notifikasi tersebut kita sebagai pengguna kan bisa tau koneksi kita sedang putus atau tidak, jadinya saat ingin mempost sesuatu bisa kita tunda dulu sebelum terkoneksi lagi.
Ternyata membuatnya g susah lo bro, kita cuma butuh memangil satu file js dan satu file css pada website kita. Setelah itu website kita akan menginformasikan ke pungujung kita jika mereka sedang offline. Mau tau cara buatnya? mari terapkan cara berikut :
Libaray javascript yang akan kita gunakan bernama offline.js
1. Kunjungi website resmi offline.js di http://github.hubspot.com/offline/docs/welcome/
2. Download offline.js atau ke link https://raw.github.com/HubSpot/offline/v0.7.13/offline.min.js
3. Pilih theme yang ingin digunakan kemudian download
Setelah mendapatkan resource, panggil resource tersebut dan letakkan sebelum tag </head>, kira – kira seperti berikut :
<head> <script src="offline.min.js"></script> <link href="offline-theme-chrome.css" rel="stylesheet" /> </head>
Atau install melalui Eager
*) Pada tutorial Mempercantik Halaman Website Dengan Efek Loading sudah saya jelaskan kelebihan install menggunakan Eager.
Langsung terapkan saja kewebsite kamu bro, tidak ada ruginya memasang skrip ini.
Oke, sekian dulu ya tips kali ini, semoga yang membaca bisa dapet pencerahan, aamiin…
Terimakasih sudah berkunjung
Category: Javascript
Angga andrean
October 24, 2015 - 11:56 am
wah, akhirnya keinget jg , beberapa waktu saya pernah mau buat seperti ini , akhirnya skrg ketemmua jawaban nya 😀