Berbagi di perangkat seluler dan desktop disederhanakan dengan Web Share Target API
Pada perangkat seluler atau desktop, aktivitas berbagi harus semudah mengklik tombol Bagikan, memilih aplikasi, dan memilih orang yang akan diajak berbagi. Misalnya, Anda mungkin ingin membagikan artikel yang menarik, baik dengan mengirimkannya melalui email kepada teman maupun men-tweetnya ke seluruh dunia.
Sebelumnya, hanya aplikasi khusus platform yang dapat mendaftar ke sistem operasi untuk menerima bagian dari aplikasi terinstal lainnya. Namun, dengan Web Share Target API, aplikasi web yang terinstal dapat mendaftar ke sistem operasi dasar sebagai target berbagi untuk menerima konten bersama.
![Ponsel Android dengan panel samping 'Bagikan melalui' terbuka.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=6&hl=id)
Lihat cara kerja Target Berbagi Web
- Dengan menggunakan Chrome 76 atau yang lebih baru untuk Android, atau Chrome 89 atau yang lebih baru di desktop, buka demo Web Share Target.
- Saat diminta, klik Instal untuk menambahkan aplikasi ke layar utama, atau gunakan menu Chrome untuk menambahkannya ke layar utama Anda.
- Buka aplikasi apa pun yang mendukung berbagi, atau gunakan tombol Bagikan di aplikasi demo.
- Dari pemilih target, pilih Web Share Test.
Setelah berbagi, Anda akan melihat semua informasi yang dibagikan di aplikasi web target berbagi web.
Mendaftarkan aplikasi sebagai target berbagi
Untuk mendaftarkan aplikasi Anda sebagai target berbagi, aplikasi harus memenuhi kriteria penginstalan Chrome. Selain itu, sebelum pengguna dapat berbagi ke aplikasi, mereka harus menambahkannya ke layar utama. Hal ini mencegah situs secara acak menambahkan dirinya sendiri ke pemilih intent berbagi pengguna dan memastikan bahwa berbagi adalah sesuatu yang ingin dilakukan pengguna pada aplikasi Anda.
Memperbarui manifes aplikasi web
Untuk mendaftarkan aplikasi Anda sebagai target berbagi, tambahkan entri share_target
ke manifes
aplikasi webnya. Atribut ini memberi tahu sistem operasi untuk menyertakan aplikasi Anda sebagai
opsi dalam pemilih intent. Apa yang Anda tambahkan ke manifes akan mengontrol data yang akan diterima aplikasi Anda. Ada tiga skenario umum untuk entri
share_target
:
- Menerima informasi dasar
- Menyetujui perubahan permohonan
- Menerima file
Menerima informasi dasar
Jika aplikasi target Anda hanya menerima informasi dasar seperti data, link,
dan teks, tambahkan kode berikut ke file manifest.json
:
"share_target": {
"action": "/share-target/",
"method": "GET",
"params": {
"title": "title",
"text": "text",
"url": "url"
}
}
Jika aplikasi Anda sudah memiliki skema URL bersama, Anda dapat mengganti nilai params
dengan parameter kueri yang ada. Misalnya, jika skema URL berbagi Anda
menggunakan body
, bukan text
, Anda dapat mengganti "text": "text"
dengan "text":
"body"
.
Nilai method
ditetapkan secara default ke "GET"
jika tidak diberikan. Kolom enctype
, yang tidak ditampilkan dalam contoh ini, menunjukkan jenis encoding untuk data.
Untuk metode "GET"
, enctype
secara default disetel ke "application/x-www-form-urlencoded"
dan
akan diabaikan jika disetel ke hal lain.
Menyetujui perubahan permohonan
Jika data yang dibagikan mengubah aplikasi target dengan cara tertentu—misalnya, menyimpan
bookmark di aplikasi target—tetapkan nilai method
ke "POST"
dan sertakan
kolom enctype
. Contoh di bawah ini membuat bookmark di aplikasi target,
sehingga menggunakan "POST"
untuk method
dan "multipart/form-data"
untuk
enctype
:
{
"name": "Bookmark",
"share_target": {
"action": "/bookmark",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"url": "link"
}
}
}
Menerima file
Seperti halnya perubahan aplikasi, penerimaan file mengharuskan method
memiliki "POST"
dan enctype
harus ada. Selain itu, enctype
harus berupa
"multipart/form-data"
, dan entri files
harus ditambahkan.
Anda juga harus menambahkan array files
yang menentukan jenis file yang diterima aplikasi Anda. Elemen array adalah entri dengan dua anggota: kolom name
dan kolom accept
. Kolom accept
menggunakan jenis MIME, ekstensi file, atau array yang berisi keduanya. Sebaiknya sediakan array yang menyertakan
jenis MIME dan ekstensi file karena sistem operasi berbeda dalam hal
yang mereka inginkan.
{
"name": "Aggregator",
"share_target": {
"action": "/cgi-bin/aggregate",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"url": "link",
"files": [
{
"name": "records",
"accept": ["text/csv", ".csv"]
},
{
"name": "graphs",
"accept": "image/svg+xml"
}
]
}
}
}
Menangani konten yang masuk
Cara menangani data yang masuk dan dibagikan bergantung pada Anda dan bergantung pada aplikasi Anda. Misalnya:
- Klien email dapat membuat draf email baru menggunakan
title
sebagai subjek email, dengantext
danurl
digabungkan sebagai isi. - Aplikasi jaringan sosial dapat membuat draf postingan baru yang mengabaikan
title
, menggunakantext
sebagai isi pesan, dan menambahkanurl
sebagai link. Jikatext
tidak ada, aplikasi juga mungkin menggunakanurl
dalam isi. Jikaurl
tidak ada, aplikasi mungkin memindaitext
untuk mencari URL dan menambahkannya sebagai link. - Aplikasi berbagi foto dapat membuat slideshow baru menggunakan
title
sebagai judul slideshow,text
sebagai deskripsi, danfiles
sebagai gambar slideshow. - Aplikasi pesan teks dapat membuat draf pesan baru menggunakan
text
danurl
yang disambungkan bersama lalutitle
.
Memproses pembagian GET
Jika pengguna memilih aplikasi Anda, dan method
Anda adalah "GET"
(default), browser akan membuka jendela baru di URL action
. Selanjutnya, browser membuat string kueri menggunakan nilai berenkode URL yang diberikan dalam manifes.
Misalnya, jika aplikasi berbagi menyediakan title
dan text
, string kuerinya adalah ?title=hello&text=world
. Untuk memprosesnya, gunakan pemroses peristiwa DOMContentLoaded
di halaman latar depan dan uraikan string kuerinya:
window.addEventListener('DOMContentLoaded', () => {
const parsedUrl = new URL(window.location);
// searchParams.get() will properly handle decoding the values.
console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});
Pastikan untuk menggunakan pekerja layanan untuk melakukan precache halaman action
sehingga halaman dimuat dengan cepat dan berfungsi andal, meskipun pengguna sedang offline.
Workbox adalah alat yang dapat membantu Anda
mengimplementasikan precaching di pekerja layanan.
Memproses pembagian POST
Jika method
Anda adalah "POST"
, seperti halnya jika aplikasi target menerima bookmark
tersimpan atau file bersama, isi permintaan POST
yang masuk berisi
data yang diteruskan oleh aplikasi berbagi, yang dienkode menggunakan nilai enctype
yang diberikan dalam manifes.
Halaman latar depan tidak dapat memproses data ini secara langsung. Karena halaman melihat data sebagai permintaan, halaman akan meneruskannya ke pekerja layanan, tempat Anda dapat menangkapnya dengan pemroses peristiwa fetch
. Dari sini, Anda dapat meneruskan data kembali ke halaman latar depan menggunakan postMessage()
atau meneruskannya ke server:
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
// If this is an incoming POST request for the
// registered "action" URL, respond to it.
if (event.request.method === 'POST' &&
url.pathname === '/bookmark') {
event.respondWith((async () => {
const formData = await event.request.formData();
const link = formData.get('link') || '';
const responseUrl = await saveBookmark(link);
return Response.redirect(responseUrl, 303);
})());
}
});
Memverifikasi konten yang dibagikan
![Ponsel Android menampilkan aplikasi demo dengan konten bersama.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=6&hl=id)
Pastikan untuk memverifikasi data yang masuk. Sayangnya, tidak ada jaminan bahwa aplikasi lain akan membagikan konten yang sesuai dalam parameter yang tepat.
Misalnya, di Android, kolom url
akan kosong karena
tidak didukung di sistem berbagi Android. Sebagai gantinya, URL akan sering muncul di
kolom text
, atau terkadang di kolom title
.
Dukungan browser
Web Share Target API didukung seperti yang dijelaskan di bawah ini:
Di semua platform, aplikasi web Anda harus diinstal sebelum muncul sebagai target potensial untuk menerima data bersama.
Aplikasi contoh
Menunjukkan dukungan untuk API
Apakah Anda berencana menggunakan Web Share Target 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
#WebShareTarget
dan beri tahu kami di mana dan bagaimana Anda menggunakannya.