Web uygulamaları, platforma özgü uygulamalarla aynı sistem tarafından sağlanan paylaşım özelliklerini kullanabilir.
Web Share API sayesinde web uygulamaları, platforma özel uygulamalarla aynı sistem tarafından sağlanan paylaşım özelliklerini kullanabilir. Web Share API, web uygulamalarının bağlantıları, metinleri ve dosyaları cihazda yüklü diğer uygulamalarla platforma özgü uygulamalarla aynı şekilde paylaşmasını sağlar.
Özellikler ve sınırlamalar
Web paylaşımı aşağıdaki özelliklere ve sınırlamalara sahiptir:
- Yalnızca HTTPS üzerinden erişilen bir sitede kullanılabilir.
- Paylaşım üçüncü taraf bir iframe'de gerçekleşirse
allowözelliği kullanılmalıdır. - Tıklama gibi bir kullanıcı işlemine yanıt olarak çağrılmalıdır.
onloadişleyicisi aracılığıyla çağrılması mümkün değildir. - URL, metin veya dosya paylaşabilir.
Bağlantıları ve metinleri paylaşma
Bağlantıları ve metinleri paylaşmak için share() yöntemini kullanın. Bu yöntem, gerekli bir properties nesnesi içeren, söze dayalı bir yöntemdir.
Tarayıcıda TypeError hatası oluşmaması için nesnenin şu özelliklerden en az birini içermesi gerekir: title, text, url veya files. Örneğin, bir metni URL olmadan paylaşabilirsiniz. Bunun tersi de geçerlidir. Üç üyenin de izin vermesi, kullanım alanlarının esnekliğini artırır. Aşağıdaki kodu çalıştırdıktan sonra kullanıcının hedef olarak bir e-posta uygulaması seçtiğini varsayalım. title parametresi e-posta konusu, text ileti gövdesi ve dosyalar ekler olabilir.
if (navigator.share) {
navigator.share({
title: 'web.dev',
text: 'Check out web.dev.',
url: 'https://web.dev/',
})
.then(() => console.log('Successful share'))
.catch((error) => console.log('Error sharing', error));
}
Siteniz aynı içerik için birden fazla URL'ye sahipse geçerli URL yerine sayfanın standart URL'sini paylaşın. document.location.href sayfasını paylaşmak yerine sayfanın <head> sayfasında standart URL <meta> etiketini kontrol edip bunu paylaşırsınız. Bu, kullanıcıya daha iyi bir deneyim sağlar. Bu hem yönlendirmelerden kaçınmak hem de paylaşılan bir URL'nin belirli bir istemci için doğru kullanıcı deneyimini sunmasını sağlar. Örneğin, bir arkadaşınız mobil URL paylaşırsa ve siz bu URL'ye masaüstü bilgisayardan bakarsanız masaüstü sürümünü görürsünüz:
let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
url = canonicalElement.href;
}
navigator.share({url});
Dosyaları paylaşma
Dosya paylaşmak için önce navigator.canShare()'ü test edin ve arayın. Ardından navigator.share() çağrısına bir dosya dizisi ekleyin:
if (navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
files: filesArray,
title: 'Vacation Pictures',
text: 'Photos from September 27 to October 14.',
})
.then(() => console.log('Share was successful.'))
.catch((error) => console.log('Sharing failed', error));
} else {
console.log(`Your system doesn't support sharing files.`);
}
Örnekte, özellik algılamanın navigator.share() yerine navigator.canShare() için test yaparak işlendiğini unutmayın.
canShare() öğesine iletilen veri nesnesi yalnızca files özelliğini destekler.
Belirli ses, resim, PDF, video ve metin dosyası türleri paylaşılabilir.
Tam listeyi Chromium'da İzin Verilen Dosya Uzantıları başlıklı makalede bulabilirsiniz. Gelecekte daha fazla dosya türü eklenebilir.
Üçüncü taraf iframe'lerinde paylaşım
Paylaşım işlemini üçüncü taraf iFrame içinden tetiklemek için iframe'i allow özelliğiyle web-share değeriyle yerleştirin:
<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>
Bu özelliğin nasıl çalıştığını Glitch'teki bir denemede görebilir ve kaynak kodunu inceleyebilirsiniz.
Özelliğin sağlanmaması durumunda Failed to execute 'share' on 'Navigator': Permission denied mesajını içeren bir NotAllowedError gösterilir.
Santa Tracker örnek olayı
Açık kaynak bir proje olan Santa Tracker, Google'da yeni yıl geleneğidir. Her Aralık ayında, oyunlar ve eğitici deneyimlerle yeni yıl sezonunu kutlayabilirsiniz.
2016'da Santa Tracker ekibi, Android'de Web Share API'yi kullandı. Bu API, mobil cihazlar için mükemmel bir seçimdi. Önceki yıllarda ekip, alan değerli olduğu ve birden fazla paylaşım hedefi olmasının gerekçelendirilemediği için mobil cihazlardaki paylaşım düğmelerini kaldırmıştı.
Ancak Web Share API sayesinde tek bir düğme sunarak değerli piksellerden tasarruf ettiler. Ayrıca, Web Paylaşımı ile paylaşım yapan kullanıcıların, API etkin olmayan kullanıcılara kıyasla yaklaşık %20 daha fazla paylaşım yaptığını da tespit ettiler. Web Paylaşımı'nı iş başında görmek için Santa Tracker'a gidin.
Tarayıcı desteği
Web Share API için tarayıcı desteği ayrıntılıdır ve belirli bir yöntemin desteklendiğini varsaymak yerine özellik algılama özelliğini (önceki kod örneklerinde açıklandığı gibi) kullanmanız önerilir.
Bu özellik için destek kapsamına dair genel bir özet aşağıda verilmiştir. Ayrıntılı bilgi için destek bağlantılarından birini izleyin.
navigator.canShare()navigator.share()
API'yi destekleme
Web Share API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı tedarikçilerine bunları desteklemenin ne kadar kritik olduğunu gösterir.
#WebShare hashtag'ini kullanarak @ChromiumDev hesabına tweet gönderin ve bu özelliği nerede ve nasıl kullandığınızı bize bildirin.