Web Share API, ilk kez Android için Chrome 61’de tanıtılan ve halen bir çok tarayıcı tarafından geliştirilmesi süren bir Web API‘sidir. Temelde, doğrudan bir web sitesinden veya web uygulamasından içerik paylaşırken bir aygıtın (veya Safari kullanılıyorsa masaüstünün) yerel paylaşım iletişim kutusunu tetiklemek için bir yol sağlar.
Bir kullanıcının bir web sayfasındaki içeriği yerel yollarla paylaşması zaten mümkün olsa da, tarayıcı menüsündeki seçeneği bulması gerekir ve bu durumda bile neyin paylaşılacağı üzerinde herhangi bir kontrol yoktur.
Bu API’nin tanıtımı, geliştiricilerin, bir kullanıcının cihazındaki yerel içerik paylaşım özelliklerinden yararlanarak uygulamalara veya web sitelerine paylaşım işlevi eklemelerine olanak tanır.
Bu yaklaşım, geleneksel yöntemlere göre bir dizi avantaj sağlar:
- Kullanıcıya, uygulamanızda sahip olabileceğiniz sınırlı sayıya kıyasla, içerik paylaşmak için çok çeşitli seçenekler sunulur.
- Bireysel sosyal platformlardan üçüncü taraf komut dosyalarını kaldırarak sayfa yükleme sürelerinizi iyileştirebilirsiniz.
- Farklı sosyal medya siteleri ve e-posta için bir dizi düğme eklemenize gerek yoktur. Cihazın yerel paylaşım seçeneklerini tetiklemek için tek bir düğme yeterlidir.
- Kullanıcılar, yalnızca önceden tanımlanmış seçeneklerle sınırlanmak yerine tercih ettikleri paylaşım hedeflerini kendi cihazlarında özelleştirebilirler.
- API’nin nasıl çalıştığının ayrıntılarına girmeden önce, tarayıcı desteği sorununu ortadan kaldıralım. Dürüst olmak gerekirse, tarayıcı desteği şu anda harika değil. Yalnızca Android için Chrome ve Safari (masaüstü ve iOS) ile kullanılabilir.
Web Share API Kullanımı
API’nin kullanımına geçmeden önce hazırlanan belgenin HTTPS ile iletilmesi gerektiğini belirtmek isterim.
Öncelikli olarak tarayıcının Web API uyumu olup olmadığını kontrol ederek başlıyoruz.
1 2 3 4 5 6 7 | if (navigator.share) { //tarayıcı desteği var } else { //tarayıcı desteği yok } |
yada
1 2 3 4 5 6 7 | if (navigator.canShare) { //tarayıcı desteği var } else { //tarayıcı desteği yok } |
Web Share API promise-based tabanlı çalışmaktadır. En temel görevi de Share nesnesini tarayıcıya iletmektir. Bir share nesnesi en az bir metin başlığı(title), bir metin(text) ve adres(url) içermelidir.
Örnek:
Örneği yaparken ilk olarak bir tane buton oluşturup butonun tıklama olayına anonim fonksiyon aktaralım.
1 2 3 4 5 6 7 8 9 10 11 12 | <button id="paylas">Paylaş</button> <script> const paylasButon = document.getElementById("paylas"); paylasButon.addEventListener("click", async () =>{ //butona tıklayınca çalışacak bölüm }); </script> |
Artık butona tıkladığımızda çalışacak kodları yazmaya başlayabiliriz. Öncelikli olarak tarayıcının paylaşma özelliğinin olup olmadığını kontrol edelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <button id="paylas">Paylaş</button> <script> const paylasButon = document.getElementById("paylas"); paylasButon.addEventListener("click", async () =>{ if (navigator.canShare) { //Web share api çalışıyor. } else { //Web share api çalışmıyor. } }); </script> |
Yukarıda bir paylaş butonunda en az title, text ve url öğleerinin olması gerektiğini belirtmiştik. Bu şekilde bir öğe oluşturup navigator.share metoduna parametre olarak iletiyoruz.
Oluşturulan fonksiyon Promise tabanlı olduğu için await bildiğirimi ile navigator.share metodunu çalıştırıyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <button id="paylas">Paylaş</button> <script> const paylasButon = document.getElementById("paylas"); paylasButon.addEventListener("click", async () =>{ if (navigator.canShare) { try { //paylaşma özelliği await navigator.share({ title:"Tasarım Kodlama", text:"Programlama ve Web tasarımı konularında bilgiler sunar.", url:"https://www.tasarimkodlama.com" //window.location.href mevcut url }) console.log("Paylaş çalıştı") } catch (error) { console.log("Bir sorun oldu") } } else { Console.log("Tarayıcı desteklemiyor") } }); </script> |
Web Share API Kullanımı ile Resim Paylaşımı
İstersek Web Share API ile dosya paylaşımı da yapabiliriz. Örnek FILE nesnesi ile dosya gönderimi yapılabilir. Yukarıdaki share nesnesine bir tane de dosya nesnesi ekleyerek uygulamayı yeniden düzenliyoruz. Güvenlik gerekçesi ile sadece mp3 ve resim dosyalarına izin verdiğini belirtmek isterim. 2021 Mart tarihli olarak Chrome tarayıcısında dosya paylaşımı mümkün olurken Opera ve diğer tarayıcılarda sorunlar yapanmakytadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <input type="file" id="dosya"> <button id="paylas">Paylaş</button> <script> const paylasButon = document.getElementById("paylas"); paylasButon.addEventListener("click", async () =>{ var dosya = document.getElementById('dosya').files; console.log(dosya[0]); //mevcut dosya if (navigator.canShare) { try { //paylaşma özelliği await navigator.share({ files:dosya, //mevcut resim da paylaşıma ekler title:"Tasarım Kodlama", text:"Programlama ve Web tasarımı konularında bilgiler sunar.", url:"https://www.tasarimkodlama.com" //window.location.href mevcut url }) console.log("Paylaş çalıştı") } catch (error) { console.log("Bir sorun oldu") } } else { Console.log("Tarayıcı desteklemiyor") } }); </script> |
Merhaba,
Yukarıda vermiş olduğunuz kodlardan aşağıdaki kod grubunu sitemde kullanmak istedim, “Paylaş” butonu çıkıyor fakat çalışmıyor, neden olabilir.
“Paylaş
const paylasButon = document.getElementById(“paylas”);
paylasButon.addEventListener(“click”, async () =>{
if (navigator.canShare) {
try {
//paylaşma özelliği
await navigator.share({
title:”Tasarım Kodlama”,
text:”Programlama ve Web tasarımı konularında bilgiler sunar.”,
url:”https://www.tasarimkodlama.com” //window.location.href mevcut url
})
console.log(“Paylaş çalıştı”)
} catch (error) {
console.log(“Bir sorun oldu”)
}
} else {
Console.log(“Tarayıcı desteklemiyor”)
}
});
“
Siteniz https olarak hizmet vermesi gerekiyor.
Belirttiğiniz gibi evet https olarak hizmet veriyor. Paylaş butonu oluşuyor fakat webview olarak yaptırdığım android uygulamasından giriş yapıyorum ve “Paylaş” butonuna tıklıyorum ama buton çalışmıyor.
Anladığım kadarıyla androidde kullanılan tarayıcının sürümü uyumlu değil. Destekleyen tarayıcıları buradan görebilirsin
https://caniuse.com/web-share