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

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.
PWA'nın yüklü olduğu sistem düzeyinde paylaşım hedefi seçicisi seçenek olarak sunulur.

Ö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.

Tarayıcı Desteği

  • 89
  • 93
  • 12.1

Kaynak

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.
Noel Baba İzleyici paylaşma düğmesi.

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

Tarayıcı Desteği

  • 89
  • 93
  • 14

Kaynak

navigator.share()

Tarayıcı Desteği

  • 89
  • 93
  • 12.1

Kaynak

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.