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>

Editörde Görüntüle

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/