Menerima data yang dibagikan dengan Web Share Target API

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.
Pemilih target berbagi tingkat sistem dengan PWA yang diinstal sebagai opsi.

Lihat cara kerja Target Berbagi Web

  1. Dengan menggunakan Chrome 76 atau yang lebih baru untuk Android, atau Chrome 89 atau yang lebih baru di desktop, buka demo Web Share Target.
  2. Saat diminta, klik Instal untuk menambahkan aplikasi ke layar utama, atau gunakan menu Chrome untuk menambahkannya ke layar utama Anda.
  3. Buka aplikasi apa pun yang mendukung berbagi, atau gunakan tombol Bagikan di aplikasi demo.
  4. 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, dengan text dan url digabungkan sebagai isi.
  • Aplikasi jaringan sosial dapat membuat draf postingan baru yang mengabaikan title, menggunakan text sebagai isi pesan, dan menambahkan url sebagai link. Jika text tidak ada, aplikasi juga mungkin menggunakan url dalam isi. Jika url tidak ada, aplikasi mungkin memindai text untuk mencari URL dan menambahkannya sebagai link.
  • Aplikasi berbagi foto dapat membuat slideshow baru menggunakan title sebagai judul slideshow, text sebagai deskripsi, dan files sebagai gambar slideshow.
  • Aplikasi pesan teks dapat membuat draf pesan baru menggunakan text dan url yang disambungkan bersama lalu title.

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.
Contoh aplikasi target berbagi.

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.