v2.4.0
Giriş yap

Javascript Web Share API

Bu API sayesinde mobil sayfalarınızda ve PWA uygulamalarınızda native paylaşım ekranını gösterebilir ve paylaşılıp paylaşılmadığını anlayabilirsiniz.

Bu işlemi yaparken dikkat etmeniz gereken noktalar var.

  • Kullandığınız sayfanın HTTPS olması gerekiyor.
  • İşlemin kullanıcı tarafından tetiklenmesi gerekiyor. Yani örneğin bir click event'ı ile kullanılabilir.
  • Ocak 2021 tarihi ile de tarayıcı desteği yeterince iyi görünüyor.

Şimdi ilk olarak bunun desteklenip desteklenmediğini anlayalım.

if (navigator.share){
    // destekleniyor
} else {
    // desteklenmiyor
}

Artık bir link paylaşabiliriz.

<button id="share-btn">Paylaş</button>
<script>
    const button = document.getElementById('share-btn');
    button.addEventListener('click', e => {
        e.preventDefault();
        if (navigator.share){
            const shareData = {
                title: 'Prototürk',
                text: 'Bu sitede çok güzel içerikler var',
                url: 'https://prototurk.com'
            }
            navigator.share(shareData)
                .then(() => {
                    alert('Başarıyla paylaşıldı')
                })
                .catch(e => {
                    alert('Paylaşırken hata oluştu: ' + e)
                });
        }
    });
</script>

Bu örneği mobil tarayıcınızda yukarıdaki koşullara uygun bir ortamda test edebilirsiniz.

Daha fazla detay için: https://web.dev/web-share/

tayfunerbilen
98 gün önce yazdı - 683 kez görüntülendi.
Önceki Javascript Intersection Observer API