Aplikasi web dapat menggunakan kemampuan berbagi yang disediakan sistem yang sama dengan aplikasi khusus platform.
Dengan Web Share API, aplikasi web dapat menggunakan kemampuan berbagi yang disediakan sistem yang sama dengan aplikasi khusus platform. Web Share API memungkinkan aplikasi web untuk berbagi link, teks, dan file ke aplikasi lain yang diinstal di perangkat dengan cara yang sama seperti aplikasi khusus platform.
![Pemilih target berbagi tingkat sistem dengan PWA yang diinstal sebagai opsi.](https://web.dev/static/articles/web-share/image/system-level-share-target-9be61b07242ad.png?authuser=6&hl=id)
Kemampuan dan pembatasan
Berbagi web memiliki kemampuan dan batasan berikut:
- Tombol tersebut hanya dapat digunakan di situs yang diakses melalui HTTPS.
- Jika pembagian terjadi dalam iframe pihak ketiga, atribut
allow
harus digunakan. - Ini harus dipanggil sebagai respons terhadap tindakan pengguna seperti klik. Memanggilnya
melalui pengendali
onload
tidak dapat dilakukan. - Dapat membagikan URL, teks, atau file.
Membagikan link dan teks
Untuk membagikan link dan teks, gunakan metode share()
, yang merupakan metode berbasis promise dengan objek properti yang diperlukan.
Agar browser tidak menampilkan TypeError
, objek harus berisi setidaknya salah satu dari properti berikut: title
, text
, url
, atau files
. Anda
dapat membagikan teks tanpa URL atau sebaliknya. Mengizinkan ketiga
anggota tersebut akan 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, 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 kanonis halaman, bukan URL saat ini. Daripada membagikan document.location.href
, sebaiknya periksa tag <meta>
URL kanonis di <head>
halaman dan bagikan tag tersebut. Hal ini akan memberikan pengalaman yang lebih baik kepada
pengguna. Tidak hanya menghindari pengalihan, tetapi juga memastikan bahwa URL bersama menyajikan pengalaman pengguna yang benar untuk klien tertentu. Misalnya, jika seorang teman membagikan URL seluler dan Anda melihatnya di komputer desktop, maka 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 ini menangani deteksi fitur dengan menguji navigator.canShare()
, bukan 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 mengetahui 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 di demo on Glitch
dan melihat kode sumbernya.
Gagal memberikan atribut akan menghasilkan NotAllowedError
dengan pesan
Failed to execute 'share' on 'Navigator': Permission denied
.
Studi kasus Pelacak Sinterklas
![Aplikasi Pelacak Sinterklas menampilkan tombol bagikan.](https://web.dev/static/articles/web-share/image/the-santa-tracker-app-sho-6ff6f0a0cebf4.png?authuser=6&hl=id)
Pelacak Sinterklas, sebuah project open source, merupakan tradisi liburan di Google. Setiap Desember, Anda dapat merayakan musim dengan permainan dan pengalaman edukasi.
Pada tahun 2016, tim Pelacak Sinterklas menggunakan Web Share API di Android. API ini sangat cocok untuk perangkat seluler. Pada tahun-tahun sebelumnya, tim menghapus tombol berbagi di perangkat seluler karena ruang penyimpanan sangat mahal, dan mereka tidak dapat membenarkan adanya beberapa target berbagi.
Namun, dengan Web Share API, mereka dapat menyajikan satu tombol, sehingga menghemat piksel yang berharga. Mereka juga menemukan bahwa pengguna yang berbagi dengan Web Share 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 sangat beragam, dan sebaiknya Anda menggunakan deteksi fitur (seperti yang dijelaskan dalam contoh kode sebelumnya), bukan berasumsi bahwa metode tertentu didukung.
Berikut ringkasan dukungan untuk fitur ini. Untuk informasi mendetail, ikuti salah satu link dukungan.
navigator.canShare()
navigator.share()
Menunjukkan dukungan untuk API
Apakah Anda berencana menggunakan Web Share API? Dukungan publik Anda membantu tim Chromium memprioritaskan fitur dan menunjukkan kepada vendor browser lain betapa pentingnya mendukung fitur tersebut.
Kirim tweet ke @ChromiumDev menggunakan hashtag
#WebShare
dan beri tahu kami di mana dan bagaimana Anda menggunakannya.