vermenin hediyesi
Yeni nesil web uygulamalarını kullanmanın bazı belirgin avantajları vardır, bunlardan biri navigasyonun paylaşım API'sini kullanmaktır. Sürekli gelişen zengin yetenekler seti sayesinde, tercih ettiğiniz gezgininiz artık aşağıdaki öğeleri paylaşmak için Web Share API'sini çağırabilir:
- düz metin
- bir başlık sağlayarak bağlantılar
- doğrudan dosyalar
Bir kullanıcının tarayıcısı yeni navigator.share'i destekliyorsa, bu özelliği hemen şimdi kullanabilirsiniz!
Gösteri zamanı!
Paylaşım işlevini kullanmak olabildiğince basittir, işte sitede gerçekten kullanılan bir örnek:
<Button
className={classes.container}
aria-label={"Share this article"}
onClick={() => {
// '.share' can only by called when
// triggered by click-events to make
// sure it's the user's intention.
navigator.share?.({
title: info.title,
text: info.description,
url: `${getBaseRoute(routes.posts)}/${info.slug.current}`,
}).catch(console.error);
// Optionally virbrate slightly.
navigator.vibrate?.([30, 20, 10]);
}}>
<ShareIcon />
<Typography>{"Share"}</Typography>
</Button>
Gördüğünüz gibi, bu geri arama, zaman uyumsuz paylaşım işlevini (mümkünse) çağırır ve paylaşım sayfasında güzel bir URL + açıklayıcı başlık ve alt başlık gösterilebilmesi için bazı veriler sağlar. Gösterilen kod, bu makalenin sonunda biraz farklı bir varyantta kullanılmıştır. Tarayıcınız paylaşımı destekliyorsa, "Eylemler" satırında ilgili bir düğme görüntülenecektir.
Nerede kullanılır
Yazılı olarak, API çoğunlukla popüler tarayıcıların (Chrome, Opera, Safari) mobil türevlerinde kullanılabilir, ancak yalnızca Masaüstünde Safari + Edge'de kullanılabilir. Bu işlevsellik belirli donanım gereksinimleriyle sınırlı olmadığı için desteğin önümüzdeki aylarda artmasını bekliyorum.
Ve evet, bu Web Share API'sine hızlı bir girişti, daha fazla bilgi için bağlantılı web.dev'e ve ekteki MDN makalelerine göz atın.
- Tom
