Offline.js ile Anlık İnternet Bağlantı Kontrolü {Çevrimdışı olduğunuzu algılamak}

JavaScript’in birçok işlevsel özelliğinden biri, belirli bir tarayıcının çevrimiçi veya çevrimdışı olup olmadığını tespit edebilmesidir. Bu işlevsellik, tarayıcınız tarafından sağlanan gezgin nesneler aracılığıyla kolaylıkla kullanılabilir; ancak kendi Javascript kodunuzu yazmaktan hoşlanmıyorsanız kullanabileceğiniz hazır bir alternatif var; offline.js kütüphanesi.

Tarayıcı çevrimiçi durumunu anlamaya neden ihtiyaç duyabilirim?

Şöyle bir senaryo düşünelim, uzun bir makale veya sekmeli formlar halinde çalışıyorsunuz, sonra tüm sevimli işlerinizi kaydetmek için “Kaydet” butonuna tıkladığınızda, bir şeyler test gidiyor, bağlantınız kopuyor boş bir sayfa kaldı yada bir bağlantı koptu mesajı görüyorsunuz karşınızda. Her birimiz daha önce böyle bir durumla maalesef ki karşılaştık; sunucu, yanıt vermediğinden veya ağ bağlantısı kesildiğinden, işlemlerimizi tamamlayamadık.

Karadüzen post veya get ile çalışan bir isteğiniz varsa da bu çok problem değildir, bağlantı koptuğu anda sayfayı yenilersiniz, parametreleriniz tekrar gönderilir. Tabii ki, modern tarayıcılar çoğunlukla önbellekte bir şeyler saklayacak ve ağ kilitlendiğinde bir cankurtaran gibi bize bir çözüm sunmaya çalışacak, ancak bazen istekler bildiğiniz gibi AJAX aracılığıyla gönderiliyor. Bu gibi durumlar her zaman daha pratik ama daha sorunsaldır, çünkü yeni içeriğinizi sunucu tarafına göndermeye çalışıncaya ve değişikliklerin etkili olmasına kadar AJAX hatalarını görebildiğiniz tek yer tarayıcı konsolunuzdur, bu aşamaya gelene kadar bir şeylerin yanlış gittiğini fark etmezsiniz, kaldı ki kaç kişi konsolu açıp işlemlerim tamamlandı mı diye kontrol ediyor? Sonuç olarak bağlantı nedeniyle sıkıntılar yaşadınız. Ama endişelenmeyin, artık bu yazıda öğreneceğiniz kütüphane ile bağlantı kontrollerinizi anlık olarak yapabileceksiniz.

Offline.js, herhangi bir web bağımlılığı olmadan çalışan ve Chrome, Firefox ve IE (sürüm 8 ve üzeri) tarafından desteklenen, gerçekten hafif bir betiktir (minikleştirilmiş ve sıkıştırılmış biçimdeki yalnızca 3 KB). Offline.js tarayıcıyı çevrimdışı duruma düştüğünde algılar, biliniyorsa yeniden bağlanma zamanı gibi göze çarpmayan ancak oldukça kullanışlı uyarılar ve ek bilgiler sağlar. Birden çok hazır CSS stili ve dili ile birlikte gelir. (Türkçe dil desteği mevcut) Öne çıkan ana özelliklerden biri AJAX (asynchronous) istek izleme işlemidir; bu nedenle üzerinde çalıştığınız sayfa yenilenmediğinde bile bağlantı sorunlarını algılayıp tepki gösterecektir.

Offline.js‘nin bunlara ulaşma biçimi oldukça basittir – belirli bir aralık başına sunucunuzdaki belirli bir dosyaya düzenli olarak bir HTTP isteği gönderir; isteği tamamlayamazsa, o zaman bir şeylerin ters gittiğini bilir ve ona göre tepki verir. Varsayılan olarak bu dosya favicon.ico olarak ayarlanmıştır, çünkü çoğu web sitesi ana dizinde bir favicon dosyası içerdiğinden bu oldukça mantıklı bir seçimdir.

Kurulum – Kullanım

Offline.js‘yi kullanmak için, .js dosyasını GitHub’dan indirmeniz ve bir tema seçmeniz yeterlidir.  Ana JavaScript dosyası, web sitenizin HEAD bölümüne eklenmelidir. Aşağıda sizlerle örnek bir kullanımı paylaşıyorum.