Bu sayfa, Cloud Translation API ile çevrilmiştir.

Web Paylaşımı API'si ile işletim sistemi paylaşımı kullanıcı arayüzü ile entegrasyon

Web uygulamaları, platforma özgü uygulamalarla aynı sistem tarafından sağlanan paylaşım özelliklerini kullanabilir.

Joe Medley

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.

Yüklü bir PWA'nın seçenek olarak sunulduğu sistem düzeyinde paylaşım hedefi seçici. — Sistem düzeyinde paylaşım hedefi seçicisi, yüklü bir PWA ile kullanılabilir.

Ö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. onload işleyicisi aracılığıyla çağrılması mümkün değildir.
URL, metin veya dosya paylaşabilir.

Tarayıcı desteği

Kaynak

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ı

Paylaşım düğmesi gösteren Santa Tracker uygulaması. — Santa Tracker paylaş düğmesi.

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()

Tarayıcı desteği

Kaynak

navigator.share()

Tarayıcı desteği

Kaynak

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.

Web Paylaşımı API'si ile işletim sistemi paylaşımı kullanıcı arayüzü ile entegrasyon

Özellikler ve sınırlamalar

Bağlantıları ve metinleri paylaşma

Dosyaları paylaşma

Üçüncü taraf iframe'lerinde paylaşım

Santa Tracker örnek olayı

Tarayıcı desteği

API'yi destekleme

Yararlı Bağlantılar