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

Web uygulamaları, platforma özel 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ı cihaza yüklenen diğer uygulamalarla platforma özel uygulamalarla aynı şekilde paylaşmasını sağlar.

Not: Paylaşım, işin yalnızca yarısıdır. Web uygulamaları, paylaşım hedefleri de olabilir. Yani platforma özel uygulamalardan veya web uygulamalarından veri, bağlantı, metin ve dosya alabilirler. Uygulamanızı paylaşım hedefi olarak nasıl kaydedeceğinizi öğrenmek için Paylaşılan verileri alma başlıklı makaleyi okuyun.

Yüklü bir PWA'nın seçenek olarak sunulduğu sistem düzeyinde paylaşım hedefi seçici.

Özellikler ve sınırlamalar

Web paylaşımının aşağıdaki özellikleri ve sınırlamaları vardır:

• Yalnızca HTTPS üzerinden erişilen sitelerde kullanılabilir.
• Paylaşım üçüncü taraf bir iFrame'de gerçekleşiyorsa 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 üzerinden çağrılması mümkün değildir.
• URL, metin veya dosya paylaşabilir.

Browser Support

• 128
• 93
• 
• 12.1

Source

Bağlantı ve metin paylaşma

Bağlantıları ve metinleri paylaşmak için share() yöntemini kullanın. Bu yöntem, gerekli özellikler nesnesini içeren, Promise tabanlı bir yöntemdir. Tarayıcının TypeError hatası vermesini önlemek için nesne şu özelliklerden en az birini içermelidir: title, text, url veya files. Örneğin, URL olmadan metin paylaşabilir veya tam tersini yapabilirsiniz. Üç üyenin de kullanılmasına izin verilmesi, 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 düşünün. title parametresi e-posta konusu, text parametresi e-posta mesajı, dosyalar ise 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 geçerli URL yerine sayfanın standart URL'sini paylaşın. document.location.href paylaşmak yerine sayfanın <head> bölümünde standart URL <meta> etiketini kontrol edip bunu paylaşmanız gerekir. Bu sayede kullanıcıya daha iyi bir deneyim sunulur. Yönlendirmeleri önlemenin yanı sıra, 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ştıysa ve siz bu URL'ye masaüstü bilgisayardan bakıyorsanız masaüstü sürümünü görmeniz gerekir:

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() yöntemini test edin ve çağırı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 edilerek yapıldığına dikkat edin. canShare() işlevine iletilen veri nesnesi yalnızca files özelliğini destekler. Belirli ses, resim, PDF, video ve metin dosyası türleri paylaşılabilir. Tam liste için Chromium'da İzin Verilen Dosya Uzantıları başlıklı makaleyi inceleyin. Gelecekte daha fazla dosya türü eklenebilir.

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

Paylaşım işlemini üçüncü taraf iframe'den tetiklemek için iframe'i web-share değerine sahip allow özelliğiyle yerleştirin:

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

Noel Baba Radarı örnek olayı

Noel Baba Radarı paylaş düğmesi.

Açık kaynaklı bir proje olan Noel Baba Radarı, Google'da bir yılbaşı geleneğidir. Her yıl aralık ayında oyunlar ve eğitici deneyimlerle yeni yılı kutlayabilirsiniz.

2016'da Noel Baba Radarı ekibi, Android'de Web Share API'yi kullandı. Bu API, mobil cihazlar için mükemmel bir çözümdü. Geçmiş yıllarda ekip, mobil cihazlarda paylaşım düğmelerini kaldırmıştı. Bunun nedeni, alanın kısıtlı olması ve birden fazla paylaşım hedefi olmasının mantıklı olmamasıydı.

Ancak Web Share API sayesinde tek bir düğme sunarak değerli piksellerden tasarruf edebildiler. Ayrıca, Web Share API'yi kullanan kullanıcıların, API'yi etkinleştirmeyen kullanıcılara kıyasla yaklaşık %20 daha fazla paylaşım yaptığını tespit ettiler. Web Share'i iş başında görmek için Noel Baba Radarı'na gidin.

Tarayıcı desteği

Web Share API için tarayıcı desteği farklılık gösterir. Belirli bir yöntemin desteklendiğini varsaymak yerine özellik algılamayı (önceki kod örneklerinde açıklandığı gibi) kullanmanız önerilir.

Bu özelliğin desteklendiği durumları aşağıda bulabilirsiniz. Ayrıntılı bilgi için destek bağlantılarından birini kullanın.

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

API'yi desteklediğinizi gösterme

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ı tedarikçilerine bu özellikleri desteklemenin ne kadar önemli 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.

Faydalı bağlantılar

• Web Share Demoları
• Scrapbook PWA