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ı, sistem tarafından sağlanan aynı paylaşımı kullanabilir. özellikleridir. Web Share API, web uygulamalarının Cihazda yüklü diğer uygulamalarla aynı şekilde bağlantı, metin ve dosya paylaşma şekilde değiştiriliyor.

ziyaret edin.

Seçenek olarak yüklü bir PWA ile sistem düzeyinde paylaşım hedefi seçici.

Ö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, üçüncü taraf iframe'inde 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. Çağırma izin verilmez.onload
Bu özellik; URL, metin veya dosya paylaşabilir.

Tarayıcı Desteği

Kaynak

Bağlantıları ve metinleri paylaşma

Bağlantı ve metin paylaşmak için söze dayalı bir share() yöntemini kullanın. yöntemini çağırın. Tarayıcının TypeError hatası vermesini engellemek için nesne en az bir tane içermelidir şu özelliklerin tamamı: title, text, url veya files. Siz bir URL olmadan metin paylaşabilir veya bunun tam tersi de geçerlidir. Üçüne de izin veriliyor kullanım alanlarının esnekliğini artırır. Kodu çalıştırdıktan sonra aşağıda kullanıcı hedef olarak bir e-posta uygulaması seçmiştir. title parametresi e-posta konusu, text, ileti gövdesi ve dosyalar, ekler.

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 sayfanın standart URL'yi kullanmayın. İçeriğinizi paylaşmak yerine document.location.href, standart bir URL <meta> bir <head> kontrol edip paylaşın. Bu, Arkadaş Bitkiler projesinin belirtir. Sadece yönlendirmeleri önlemekle kalmaz, aynı zamanda paylaşılan bir URL'nin doğru kullanıcı deneyimini sunmaktır. Örneğin, bir arkadaşınız paylaştığında ve bu URL'ye bir masaüstü bilgisayardan bakıyorsanı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() dosyasını test edip arayın. Daha sonra navigator.share() çağrısındaki dosya dizisi:

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ı şunun için test ederek ve navigator.share() yerine navigator.canShare(). canShare() öğesine iletilen veri nesnesi yalnızca files özelliğini destekler. Belirli türlerde ses, resim, pdf, video ve metin dosyaları paylaşılabilir. Chromium'da İzin Verilen Dosya Uzantıları sayfasını inceleyin tam listeyi inceleyebilirsiniz. Gelecekte daha fazla dosya türü eklenebilir.

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

Paylaşım işlemini üçüncü taraf iFrame içinden 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>

Bunun nasıl çalıştığını Glitch'teki demoda görebilirsiniz ve kaynak kodu görüntüleyin. Özelliğin sağlanmaması, mesajı içeren bir NotAllowedError ile sonuçlanır Failed to execute 'share' on 'Navigator': Permission denied.

Santa Tracker örnek olayı

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

Bir açık kaynak projesi olan Santa Tracker, geleneği Google'da devreye giriyor. Her Aralık ayında yılbaşını kutlayabilirsiniz .

Santa Tracker ekibi 2016'da Android'de Web Share API'yi kullandı. Bu API, mobil cihazlar için son derece uygundu. Önceki yıllarda ekip, mobil cihazlardaki paylaş düğmelerini kaldırıyor çünkü alan ve birçok hedefin bulunmasını haklı çıkaramazlar.

Web Share API ile birlikte bir düğme de sunmayı başardılar. değerli pikseller tasarrufu yapıyoruz. Ayrıca, Web Paylaşımı ile paylaşılan kullanıcıların, paylaşılan içeriklerden yaklaşık% 20 daha fazla etkin olmayan kullanıcı sayısı. Şu adrese gidin: Web Paylaşımı'nı iş başında görmek için Noel Baba İzleyici.

Tarayıcı desteği

Web Share API için tarayıcı desteği ayrıntılıdır ve bu özelliğin tercih edilmesi için (önceki kod örneklerinde açıklandığı gibi), belirli bir yöntemin belirli bir yöntemle test desteklenir.

Bu özellikle ilgili destek ana hatlarını aşağıda bulabilirsiniz. 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'ye desteğinizi gösterin

Web Share API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz Chromium ekibine yardımcı olur ve diğer tarayıcı tedarikçilerine söz konusu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin #WebShare ve 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'lerde paylaşım

Santa Tracker örnek olayı

Tarayıcı desteği

API'ye desteğinizi gösterin

Yararlı Bağlantılar