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
Joe Medley
GitHub

Web uygulamaları, Web Paylaşımı API'si sayesinde platforma özgü 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.
İsteğe bağlı olarak yüklü bir PWA içeren sistem düzeyinde paylaşım hedefi seçici.

Ö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

  • Chrome: 89.
  • Edge: 93.
  • Firefox: İşaretli.
  • Safari: 12.1.

Kaynak

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 nesnesine sahip, 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, metni URL olmadan veya URL'yi metin olmadan paylaşabilirsiniz. Üç ü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, 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 mevcut URL yerine sayfanın standart URL'sini paylaşın. document.location.href yerine, sayfanın <head> bölümünde standart URL <meta> etiketi olup olmadığını kontrol edip bunu paylaşırsınız. Bu sayede kullanıcılara daha iyi bir deneyim sunulur. Bu yöntem yalnızca yönlendirmeleri önlemekle kalmaz, aynı zamanda 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 yapılarak ele alındığına dikkat edin. canShare() işlevine iletilen veri nesnesi yalnızca files mülkünü 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'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>

Bu özelliğin nasıl çalıştığını Glitch'teki bir denemede görebilir ve kaynak kodunu inceleyebilirsiniz. Ö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ı

Paylaşım düğmesi gösteren Santa Tracker uygulaması.
Noel Baba Takipçisi paylaşım düğmesi.

Açık kaynak bir proje olan Santa Tracker, Google'da yeni yıl geleneğidir. Her Aralık ayında, yeni yıl sezonunu oyunlar ve eğitici deneyimlerle 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'de Paylaş özelliğini çalışırken görmek için Noel Baba Takip Aracı'na 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 aşağıdaki destek bağlantılarından birini takip edin.

navigator.canShare()

Tarayıcı desteği

  • Chrome: 89.
  • Edge: 93.
  • Firefox: İşaretli.
  • Safari: 14.

Kaynak

navigator.share()

Tarayıcı desteği

  • Chrome: 89.
  • Edge: 93.
  • Firefox: İşaretli.
  • Safari: 12.1.

Kaynak

API'yi destekleme

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çi firmalarına 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.