Membuat Notifikasi saat offline

Pernah gak temen – temen melihat notifikasi pada Gmail seperti gambar berikut :
gmail-offline-dokumenary

atau bagi pengguna web.whatsapp.com notifikasinya terlihat seperi ini :

WhatsApp Web-dokumenary.net

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 :
Problem loading page
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 :

[html]
<head>
<script src="offline.min.js"></script>
<link href="offline-theme-chrome.css" rel="stylesheet" />
</head>
[/html]

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

Tags: , , , ,

Comments

  1. wah, akhirnya keinget jg , beberapa waktu saya pernah mau buat seperti ini , akhirnya skrg ketemmua jawaban nya 😀

    Reply
  2. atorvastatin brand buy atorvastatin 20mg generic buy atorvastatin 10mg online

    Reply
  3. buy cipro without a prescription – buy keflex 250mg sale buy augmentin 1000mg generic

    Reply
  4. cipro 1000mg price – keflex without prescription amoxiclav order

    Reply
  5. ciprofloxacin order online – chloromycetin cheap erythromycin order

    Reply
  6. flagyl 400mg without prescription – purchase cefaclor online cheap buy generic azithromycin over the counter

    Reply
  7. ivermectin 3mg pills – buy ceftin paypal order sumycin without prescription

    Reply
  8. order valacyclovir generic – purchase starlix without prescription order zovirax generic

    Reply
  9. ampicillin us monodox online order amoxil generic

    Reply
  10. buy metronidazole generic – generic clindamycin azithromycin 500mg tablet

    Reply
  11. how to buy lasix – coumadin 5mg over the counter capoten 25 mg sale

    Reply
  12. buy metformin for sale – buy generic bactrim for sale lincomycin 500mg drug

    Reply
  13. order retrovir 300 mg online – allopurinol 100mg pills allopurinol 300mg brand

    Reply
  14. clozapine 50mg for sale – famotidine 40mg without prescription order famotidine generic

    Reply

Leave a Reply

Your email address will not be published / Required fields are marked *