HTML5 ile Browserlarda Bildirim (Notification) Kullanımı

Malum, kış geldi. İş yerine gitmeyip evden çalışmaya karar verdik. İşyerinde kullandığımız Hipchat’i indirmek için web sayfasına girdiğimde online application’unun olduğunu farkedince gireyim dedim. Konuşmaların sağ taraf köşelerde bildirim olarak gelmesi beni araştırmaya iten sebep oldu.

Bildirim Özelliğinin Desteklenip Desteklenmemesi

CSS3, HTML5 derken kimi özellikler browser’lara hemen implemente ediliyor kimisi de gecikmeyle geliyor. Bu konuda yardımımıza da Modernizr koşuyor ki burada da bu nimetten faydalanalım.

[code lang=”js”]
if ( "Notification" in window ) {
console.log("Destekeniyor.");
} else {
console.log("Desteklenmiyor.");
}
[/code]

Bildirim Özelliği için İzin Alımı ve Uygulanması

Bu bölümde kullanıcıdan bildirim gösterimleri için izin almamız gerekiyor. Genellikle bu bölümü herhangi bir trigger ‘a bağlamak gerekebilir ki kullanıcının karşısına web sayfasına girince izin barı çıkmasın. Bilgilendirme API’si için bilgilendirme şart.

[code lang=”js”]
if (Notification.permission === "granted") {
var notification = new Notification("Merhaba İbrahim!");
}
[/code]

Basit bir şekilde izin alımını sağladıktan sonra uygulama için de :

[code lang=”js”]
if (Notification.permission === "granted") {
var notification = new Notification(‘Merhaba İbrahim!’, {
body: ‘Buraya göstermek istediğimiz mesajı yazıyoruz.’,
icon: ‘http://phyesix.com/img/Ibrahim-Nergiz.jpg’,
tag: ‘demo’,
dir: ‘auto’,
lang: ”
});
}
[/code]

See the Pen dPvmMp by Ibrahim Nergiz (@phyesix) on CodePen.

HTML5 ile Gelen “Local Storage” Nedir ? Nerelerde Kullanılır ?

Front-end Developerlar için kullanıcının bilgisayarında bilgi saklamak güzel bir şey olsa gerek. Bu yazı içerisinde, kolay bir şekilde kullanıcı bilgisayarında küçük bilgiler saklamak, sonradan onları okumak ve bunlarla neler yapılacağını açıklamaya çalışacağım.

Neden “Local Storage” ?

Web sitenizde bir uygulama olduğunu düşünelim. Uygulamayı web sitesi üzerinde kullanıp kapattıktan sonra tekrardan açmak istediğinizde her şey sıfırlanmış olur. Eğer aynı şeyi masaüstü uygulamalarda yapmak isterseniz tam tersi durumda, nerede kaldıysanız oradan devam etme şansı tanır.

Yukarıdaki sebepten ötürü, Front-end Developer bazı durumlarda bu bilgilerin bir yerde saklanmasına ihtiyaç duyar. Normalde bu back-end development tarafında, kullanıcı adı şifresi girilerek kurtarılabilir. Peki sisteme giriş yapmayan, daha da öte back-end tarafı ile ilişiğimiz olmadan bu işlemleri yapmak istediğimizde ne olacak ? İşte burada local storage devreye giriyor. Böylelikle sistemimize gelen kullanıcıyı, küçük bir “değer” ile tanıyabileceğiz!

Cookie Vardı, Local Storage ile Cookie Farkı Ne ?

Local Storage gelmeden önce cookie’leri kullanıyorduk. Cookie, kullanıcının bilgisayarında bulunun küçük bir text dosyası olarak tanımlayabilir, bu dosya sizin web siteniz açıldığı sırada domain ile eşleşip işlem görebilecek güce sahiptir de diyebiliriz. Bu dosya içerisine istediğiniz gibi “data” yazabilir, okuyabilir veya silebilirsiniz. Buraya kadar her şey güzel ama bazı noktalar ile limitlendirilmiş durumda:

  • Web sitesine her girilip sayfa yüklendiğinde okunurlar.
  • 4 KB’lık data saklarlar.
  • Bazı güvenlik sorunlarına da neden olabilirler.

HTML5 Destekleyen Browserlarda Local Storage Kullanımı

Local Storage‘n kullanımı sandığınız kadar zor değil. Javascript içerisinde localStorage objesi ile her şeyi yapabilirsiniz. setItem() ve getItem() methodlarını kullanarak bunu yapabiliriz:

[code lang=”js”]
localStorage.setItem(‘socialpopupdate’,’02.12.2013′);
[/code]

Eğer socialpopupdate key’ini okumaya çalışırsak, bize 02.12.2013 değerini dönecektir.

[code lang=”js”]
var tarih = localStorage.getItem(‘socialpopupdate’);
// ->; "02.12.2013"
[/code]

Eğer bu değeri silmek istersek de sizin de tahmin edebileceğiniz üzere removeItem() methodunu kullanabiliriz:

[code lang=”js”]
localStorage.removeItem(‘socialpopupdate’);
var tarih = localStorage.getItem(‘socialpopupdate’);
// ->; null
[/code]

Evet, bu kadar. Küçük bir tüyo verecek olursam da, localStorage yerine sessionStorage’i kullanırsak browser penceresi kapanana kadar data saklayabiliriz.

HTML5 ‘Download’ Attribute’u

Bildiğiniz üzere web sitesi içerisinde download linki oluşturmak oldukça basit bir işlem. Download ettireceğimiz dosyanın adresini <a> tag’i içerisine verdiğimizde bu işi halletmiş oluyoruz. Bazı modern browser’larda PDF, imaj veya text gibi dosyalara link verdiğimizde yeni tab’da açılmaları da ayrı bir problem olabiliyor. İşte bu noktada HTML5’in ‘download’ attribute’u devreye sokmanın zamanı gelmiş demektir.

Download Attribute’u Nasıl Kullanırız ?

Download attribute’u ile bir taşla iki kuş vurabiliyoruz:

  • İlki yukarıda bahsettiğim yeni tabda, browser içerisinde açmayıp download ettirmek.
  • Download ettirirken dosya ismini istediğiniz gibi verebilmeniz.

Örnek verecek olursam, PDF veya imaj dosyamız sunucu veya bizim tarafımızdan rastgele oluşturulmuş bir isimden oluşsun.

[code lang=”js”]
<a href="dosya/bn213nbv123e.pdf">Download PDF</a>
<a href="dosya/JHgbnmbmnGH.jpg">Download Image</a>
[/code]

HTML5’deki download attribute’u sayesinde yukarıdaki iki dosya browser’da açılacaktır. Download Attribute’unu sisteme eklediğimizde:

[code lang=”js”]
<a href="dosya/bn213nbv123e.pdf" download="HTML5 ile İlgili Bilmeniz Gereken Şeyler.pdf">Download PDF</a>
<a href="dosya/JHgbnmbmnGH.jpg" download="PS4.jpg">Download Image</a>
[/code]

Örnek dosyaları bilgisayarınıza indirmek için: TIKLAYINIZ