Web uygulamaları, platforma özel uygulamalarla aynı sistem tarafından sağlanan paylaşım özelliklerini kullanabilir.
Web Paylaşımı API'si sayesinde web uygulamaları, sistem tarafından sağlanan paylaşım yeteneklerini platforma özel uygulamalarla aynı şekilde kullanabilir. Web Share API, web uygulamalarının cihazda yüklü diğer uygulamalarla platforma özel uygulamalarla aynı şekilde bağlantı, metin ve dosya paylaşmasını mümkün kılar.
![PWA'nın yüklü olmasıyla sistem düzeyinde paylaşım hedefi seçicisi seçenek olarak sunulur.](https://web.dev/static/articles/web-share/image/system-level-share-target-9be61b07242ad.png?authuser=5&hl=tr)
Özellikler ve sınırlamalar
Web paylaşımında aşağıdaki özellikler ve sınırlamalar bulunur:
- Yalnızca HTTPS üzerinden erişilen bir sitede kullanılabilir.
- Paylaşım bir üçüncü taraf iframe'de gerçekleşiyorsa
allow
özelliği kullanılmalıdır. - Bu parametrenin tıklama gibi bir kullanıcı işlemine yanıt olarak çağrılması gerekir. Bu dosyanın
onload
işleyicisi ile çağrılması mümkün değildir. - URL, metin veya dosya paylaşabilir.
Bağlantı ve metin paylaşma
Bağlantıları ve metni paylaşmak için zorunlu özellikler nesnesi içeren vade temelli bir yöntem olan share()
yöntemini kullanın.
Tarayıcının bir TypeError
öğesi oluşturmasını önlemek için nesnenin şu özelliklerden en az birini içermesi gerekir: title
, text
, url
veya files
. Örneğin, URL'siz metin paylaşabilirsiniz. Aynı şekilde, URL olmadan da metin paylaşabilirsiniz. Üç üyenin tümüne izin vermek, 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ını seçtiğini düşünün. title
parametresi e-postanın konusu, text
, ileti gövdesi, dosyalar ve 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));
}
Sitenizde aynı içerik için birden fazla URL varsa mevcut URL yerine sayfanın standart URL'sini paylaşın. document.location.href
öğesini paylaşmak yerine, sayfanın <head>
etiketindeki standart URL <meta>
etiketini kontrol edip paylaşırsınız. Bu, kullanıcıya daha iyi bir deneyim
sağlayacaktır. Yalnızca yönlendirmeleri önlemekle kalmaz, aynı zamanda paylaşılan URL'nin belirli bir istemci için doğru kullanıcı deneyimini sunmasını da sağlar. Örneğin, bir arkadaşınız mobil bir URL paylaşırsa ve bu URL'ye bir 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()
uygulamasını test edip arayın. Ardından, navigator.share()
için yapılan çağrıya 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.`);
}
Örneğin, özellik algılamayı navigator.share()
yerine navigator.canShare()
için test ederek işlediğine dikkat edin.
canShare()
öğesine iletilen veri nesnesi yalnızca files
özelliğini destekler.
Belirli türlerdeki ses, resim, pdf, video ve metin dosyaları paylaşılabilir.
Tam liste için Chromium'da İzin Verilen Dosya Uzantıları
bölümüne bakın. Gelecekte daha fazla dosya türü eklenebilir.
Üçüncü taraf iframe'lerinde paylaşma
Paylaşım işlemini bir üçüncü taraf iframe içinden tetiklemek için iframe'i allow
özelliğine ve web-share
değerine sahip olacak şekilde yerleştirin:
<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>
Bunu bir Glitch demoda uygulamalı olarak görebilir
ve kaynak kodu görüntüleyebilirsiniz.
Özelliğin sağlanmaması, Failed to execute 'share' on 'Navigator': Permission denied
mesajını içeren bir NotAllowedError
ile sonuçlanır.
Santa Tracker örnek olayı
![Santa Tracker uygulamasında paylaş düğmesi gösteriliyor.](https://web.dev/static/articles/web-share/image/the-santa-tracker-app-sho-6ff6f0a0cebf4.png?authuser=5&hl=tr)
Açık kaynak bir proje olan Santa Tracker, Google'da tatil geleneğidir. Her Aralık yeni yılı oyunlar ve eğitici deneyimlerle kutlayabilirsiniz.
Santa Tracker ekibi 2016'da Android'de Web Share API'yi kullandı. Bu API, mobil cihazlar için çok uygundu. Ekip, önceki yıllarda alan değerli olduğu için mobil cihazlardaki paylaşım düğmelerini kaldırdı ve birden fazla paylaşım hedefine sahip olmasını haklı çıkaramamıştı.
Ancak Web Share API'yi kullanarak tek bir düğme sunarak değerli piksellerden tasarruf etmeyi başardılar. Ayrıca, Web Paylaşımı ile paylaşımda bulunan kullanıcıların, API'yi etkinleştirmemiş kullanıcılara göre yaklaşık% 20 daha fazla olduğunu tespit ettiler. Web Paylaşımı'nı çalışırken görmek için Santa Tracker'a gidin.
Tarayıcı desteği
Web Share API için tarayıcı desteği inceliklidir. Bu nedenle, belirli bir yöntemin desteklendiğini varsaymak yerine özellik algılamayı (önceki kod örneklerinde açıklandığı gibi) kullanmanız önerilir.
Aşağıda, bu özelliğe ilişkin genel destek verilmektedir. Ayrıntılı bilgi için destek bağlantılarından birini ziyaret edin.
navigator.canShare()
navigator.share()
API'ye desteği gösterin
Web Share API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı satıcılarına onları desteklemenin ne kadar kritik olduğunu gösterir.
#WebShare
hashtag'ini kullanarak @ChromiumDev adresine tweet gönderip bu tweet'i nerede ve nasıl kullandığınızı bize bildirin.