Mengintegrasikan UI berbagi OS dengan Web Share API

Aplikasi web dapat menggunakan kemampuan berbagi yang disediakan sistem yang sama seperti aplikasi khusus platform.

Joe Medley
Joe Medley
GitHub

Dengan Web Share API, aplikasi web dapat menggunakan berbagi file yang disediakan sistem sebagai aplikasi khusus platform. Web Share API memungkinkan aplikasi web untuk berbagi tautan, teks, dan file ke aplikasi lain yang diinstal di perangkat dengan cara yang sama seperti aplikasi khusus platform.

Alat pilih target berbagi tingkat sistem dengan PWA yang diinstal sebagai opsi.
Alat pilih target berbagi tingkat sistem dengan PWA yang diinstal sebagai opsi.

Kemampuan dan pembatasan

Berbagi di web memiliki kemampuan dan batasan berikut:

  • Token ini hanya dapat digunakan pada situs yang diakses melalui HTTPS.
  • Jika pembagian terjadi dalam iframe pihak ketiga, atribut allow harus digunakan.
  • Metode ini harus dipanggil sebagai respons terhadap tindakan pengguna seperti klik. Memanggil melalui pengendali onload tidak mungkin dilakukan.
  • Aplikasi ini dapat membagikan URL, teks, atau file.

Dukungan Browser

  • Chrome: 89.
  • Edge: 93.
  • Firefox: di balik bendera.
  • Safari: 12.1.

Sumber

Membagikan link dan teks

Untuk membagikan link dan teks, gunakan metode share(), yang merupakan model dengan objek properti yang diperlukan. Agar browser tidak menampilkan TypeError, objek harus berisi setidaknya satu dari properti berikut: title, text, url, atau files. Anda dapat, misalnya, membagikan teks tanpa URL atau sebaliknya. Mengizinkan ketiganya pelanggan memperluas fleksibilitas kasus penggunaan. Bayangkan jika setelah menjalankan kode di bawah ini, pengguna memilih aplikasi email sebagai target. Parameter title dapat menjadi subjek email, text, isi pesan, dan file, lampiran.

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));
}

Jika situs Anda memiliki beberapa URL untuk konten yang sama, bagikan URL URL kanonis, bukan URL saat ini. Daripada membagikan document.location.href, Anda akan memeriksa apakah ada tag <meta> URL kanonis di <head> halaman dan bagikan info tersebut. Ini akan memberikan pengalaman yang lebih baik kepada . Tindakan ini tidak hanya menghindari pengalihan, tetapi juga memastikan bahwa URL yang dibagikan dapat ditayangkan pengalaman pengguna yang benar untuk klien tertentu. Misalnya, jika seorang teman membagikan URL seluler dan Anda melihatnya di komputer desktop, Anda akan melihat versi desktop:

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

Membagikan file

Untuk berbagi file, uji dan panggil navigator.canShare() terlebih dahulu. Kemudian sertakan array file dalam panggilan ke navigator.share():

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.`);
}

Perhatikan bahwa contoh menangani deteksi fitur dengan menguji navigator.canShare(), bukan untuk navigator.share(). Objek data yang diteruskan ke canShare() hanya mendukung properti files. Jenis file audio, gambar, pdf, video, dan teks tertentu dapat dibagikan. Lihat Ekstensi File yang Diizinkan di Chromium untuk melihat daftar lengkapnya. Jenis file lainnya dapat ditambahkan di masa mendatang.

Berbagi di iframe pihak ketiga

Untuk memicu tindakan berbagi dari dalam iframe pihak ketiga, sematkan iframe dengan atribut allow dengan nilai web-share:

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

Anda dapat melihat cara kerjanya dalam demo di Glitch dan lihat kode sumber. Gagal memberikan atribut akan menyebabkan NotAllowedError dengan pesan Failed to execute 'share' on 'Navigator': Permission denied.

Studi kasus Pelacak Sinterklas

Aplikasi Pelacak Sinterklas menampilkan tombol bagikan.
Tombol berbagi Pelacak Sinterklas.

Pelacak Sinterklas, sebuah proyek sumber terbuka, adalah tradisi liburan di Google. Setiap Desember, Anda dapat merayakan musim liburan dengan game dan pengalaman edukasi.

Pada tahun 2016, tim Pelacak Sinterklas menggunakan Web Share API di Android. API ini sangat cocok untuk seluler. Pada tahun-tahun sebelumnya, tim menghapus tombol berbagi di perangkat seluler karena ruang dengan harga premium, dan mereka tidak dapat membenarkan jika mereka memiliki beberapa target berbagi.

Tetapi dengan Web Share API, mereka dapat menyajikan satu tombol, menyimpan piksel yang berharga. Mereka juga menemukan bahwa pengguna berbagi melalui {i>Web Share<i} sekitar 20% lebih banyak daripada pengguna yang tidak mengaktifkan API. Buka Pelacak Sinterklas untuk melihat cara kerja Berbagi Web.

Dukungan browser

Dukungan browser untuk Web Share API kurang jelas, dan sebaiknya Anda menggunakan fitur deteksi (seperti yang dijelaskan dalam contoh kode sebelumnya), daripada mengasumsikan bahwa metode tertentu didukung.

Berikut adalah garis besar kasar dukungan untuk fitur ini. Untuk informasi mendetail, ikuti salah satu link dukungan.

navigator.canShare()

Dukungan Browser

  • Chrome: 89.
  • Edge: 93.
  • Firefox: di balik bendera.
  • Safari: 14.

Sumber

navigator.share()

Dukungan Browser

  • Chrome: 89.
  • Edge: 93.
  • Firefox: di balik bendera.
  • Safari: 12.1.

Sumber

Menunjukkan dukungan untuk API

Anda berencana menggunakan Web Share API? Dukungan publik Anda membantu tim Chromium memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung mereka.

Kirim tweet ke @ChromiumDev menggunakan hashtag #WebShare dan beri tahu kami tempat serta cara Anda menggunakannya.