Menerima data yang dibagikan dengan Web Share Target API

Berbagi di perangkat seluler dan desktop menjadi lebih sederhana dengan Web Share Target API

Pete LePage

Joe Medley

Di perangkat seluler atau desktop, berbagi harus semudah mengklik tombol Bagikan, memilih aplikasi, dan memilih dengan siapa. Misalnya, Anda mungkin ingin bagikan artikel menarik, baik dengan emailnya ke teman atau {i>tweet<i} ke dunia.

Dahulu, hanya aplikasi khusus platform yang dapat mendaftar ke sistem operasi untuk menerima pembagian dari aplikasi terinstal lainnya. Namun, dengan Web Share Target API, aplikasi web terinstal dapat mendaftar dengan sistem operasi yang mendasarinya, sebagai target berbagi untuk menerima konten yang dibagikan.

Catatan: Web Share Target API hanyalah setengah dari fitur hebat. Aplikasi web dapat berbagi data, file, tautan, atau teks menggunakan Web Share API. Lihat Web Share API untuk mengetahui detailnya.

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

Lihat cara kerja Target Berbagi Web

1. Menggunakan Chrome 76 atau yang lebih baru untuk Android, atau Chrome 89 atau yang lebih baru 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 kemampuan penginstalan. Selain itu, sebelum pengguna dapat berbagi ke aplikasi Anda, mereka harus menambahkannya ke layar utama. Tindakan ini mencegah situs secara acak menambahkan dirinya ke pemilih maksud berbagi milik pengguna dan memastikan bahwa berbagi adalah sesuatu yang ingin dilakukan pengguna dengan aplikasi Anda.

Mengupdate manifes aplikasi web

Untuk mendaftarkan aplikasi Anda sebagai target berbagi, tambahkan entri share_target ke web manifes aplikasi. Ini memberi tahu sistem operasi untuk memasukkan aplikasi Anda sebagai opsi di pemilih intent. Apa yang Anda tambahkan ke manifes akan mengontrol data yang akan diterima aplikasi Anda. Ada tiga skenario umum untuk share_target entri:

• Menerima informasi dasar
• Menerima perubahan aplikasi
• Menerima file

Catatan: Anda hanya dapat memiliki satu share_target per manifes, jika ingin berbagi ke tempat yang berbeda dalam aplikasi Anda, berikan sebagai opsi pada halaman landing target (halaman yang ditentukan oleh entri url).

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 params dengan parameter kueri yang ada. Misalnya, jika URL berbagi Anda skema menggunakan body alih-alih text, Anda dapat mengganti "text": "text" dengan "text": "body".

Nilai method ditetapkan secara default ke "GET" jika tidak diberikan. Kolom enctype, bukan yang ditampilkan dalam contoh ini menunjukkan jenis encoding untuk data. Untuk metode "GET", enctype ditetapkan secara default ke "application/x-www-form-urlencoded" dan akan diabaikan jika ditetapkan ke hal lain.

Menerima perubahan aplikasi

Jika data yang dibagikan mengubah aplikasi target dalam beberapa cara—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 kode ini 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, menerima file mengharuskan method menjadi "POST" dan bahwa enctype ada. Selain itu, enctype harus "multipart/form-data", dan entri files harus ditambahkan.

Anda juga harus menambahkan array files yang menentukan jenis file yang diterima aplikasi Anda. Tujuan elemen array adalah entri dengan dua anggota: kolom name dan accept kolom tersebut. Kolom accept menggunakan jenis MIME, ekstensi file, atau array yang berisi keduanya. Cara terbaik adalah menyediakan himpunan yang mencakup Jenis MIME dan ekstensi file karena sistem operasi berbeda di mana yang mereka sukai.

{
  "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

Anda yang menentukan cara menangani data yang masuk bersama-sama dan . Contoh:

• Program email dapat membuat draf email baru menggunakan title sebagai subjek email, dengan text dan url yang disambungkan sebagai isi.
• Aplikasi jejaring sosial dapat membuat draf postingan baru dengan mengabaikan title, menggunakan text sebagai isi pesan, dan menambahkan url sebagai link. Jika text adalah tidak ada, aplikasi mungkin juga menggunakan url di 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 digabungkan dan menjatuhkan title.

Memproses pembagian GET

Jika pengguna memilih aplikasi Anda, dan method Anda adalah "GET" ( default), browser akan membuka jendela baru di URL action. Browser kemudian membuat string kueri menggunakan nilai berenkode URL yang diberikan dalam manifes. Misalnya, jika aplikasi berbagi menyediakan title dan text, string kueri akan ?title=hello&text=world. Untuk memprosesnya, gunakan DOMContentLoaded pemroses peristiwa di halaman latar depan Anda dan mengurai string kueri:

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 action agar halaman dapat dimuat dengan cepat dan dapat berfungsi dengan baik, meskipun pengguna sedang offline. Workbox adalah alat yang dapat membantu Anda menerapkan precache di pekerja layanan Anda.

Memproses pembagian POST

Jika method Anda adalah "POST", seperti halnya jika aplikasi target menerima permintaan tersimpan mem-bookmark atau file bersama, maka isi permintaan POST yang masuk berisi data yang diteruskan oleh aplikasi berbagi, dienkode menggunakan nilai enctype yang disediakan dalam manifes.

Halaman latar depan tidak dapat memproses data ini secara langsung. Karena halaman melihat data sebagai permintaan, halaman akan meneruskannya ke pekerja layanan, di mana Anda bisa mencegatnya dengan fetch pemroses peristiwa. Dari sini, Anda dapat meneruskan data kembali ke latar depan halaman 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

Contoh aplikasi target berbagi.

Pastikan untuk memverifikasi data yang masuk. Sayangnya, tidak ada jaminan bahwa aplikasi akan membagikan konten yang sesuai di parameter yang tepat.

Misalnya, di Android, kolom url akan kosong karena namun hal itu tidak didukung dalam sistem berbagi Android. Sebaliknya, 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 yang dibagikan.

Aplikasi contoh

• Skuosh
• PWA buku catatan

Menunjukkan dukungan untuk API

Anda berencana menggunakan Web Share Target 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 #WebShareTarget dan beri tahu kami tempat serta cara Anda menggunakannya.