Web Share Target API: Membuat PWA Menerima Tautan dan File dari Aplikasi Lain

Pengguna sering menemukan artikel, foto, atau dokumen yang ingin disimpan ke aplikasi tertentu. Pada aplikasi native, sistem operasi biasanya menyediakan menu berbagi yang menampilkan aplikasi penerima. Progressive Web App (PWA) juga dapat masuk ke alur tersebut melalui Web Share Target API, sehingga pengguna bisa mengirim konten dari aplikasi lain langsung ke PWA yang telah dipasang. Untuk contoh kemampuan web platform lainnya, lihat contoh API browser melalui Document Picture-in-Picture dan dokumentasi Web Share Target di MDN.

Fitur ini berbeda dari tombol berbagi yang mengirim konten keluar dari website. Web Share Target membuat aplikasi web menerima konten yang dipilih pengguna. Penerapannya bergantung pada dukungan browser dan sistem operasi, sehingga fitur ini perlu diperlakukan sebagai peningkatan pengalaman, bukan satu-satunya jalur untuk memasukkan data.

Web Share API dan Web Share Target API bukan hal yang sama

Web Share API memakai navigator.share() untuk membuka panel berbagi sistem dan mengirim teks, tautan, atau file ke tujuan yang dipilih pengguna. Sebaliknya, Web Share Target API mendaftarkan PWA sebagai salah satu tujuan yang dapat dipilih. Contohnya, pengguna membaca halaman di browser, menekan Bagikan, lalu memilih aplikasi catatan berbasis PWA untuk menyimpan tautannya.

Nama dan konsep keduanya mirip, tetapi alur datanya berlawanan. Jika kebutuhan aplikasi adalah mengirim konten ke aplikasi lain, gunakan Web Share API. Jika aplikasi perlu menerima konten dari aplikasi lain, gunakan properti share_target dalam web app manifest.

Prasyarat sebelum menerapkan

PWA harus memiliki web app manifest yang valid dan memenuhi persyaratan instalasi browser. Setelah dipasang pada perangkat dan browser yang mendukung fitur ini, aplikasi dapat muncul pada menu berbagi sistem. Dukungan tidak seragam di semua browser dan platform; karena itu, periksa tabel kompatibilitas terbaru sebelum menjadikannya bagian penting dari alur kerja.

Siapkan halaman penerima yang jelas, misalnya /share/, dan pastikan halaman tersebut berada dalam cakupan aplikasi. Gunakan HTTPS, batasi jenis konten yang diterima, serta tentukan apakah aplikasi hanya menyimpan tautan atau juga memproses file.

Mendaftarkan tujuan berbagi di manifest

Contoh berikut menerima judul, teks, dan URL melalui permintaan GET. Nama parameter di sisi kanan adalah nama yang akan dikirim ke halaman penerima; nama properti di sisi kiri mengikuti struktur manifest.

{
  "name": "Catatan Saya",
  "start_url": "/",
  "display": "standalone",
  "share_target": {
    "action": "/share/",
    "method": "GET",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
    }
  }
}

Sesuaikan action dengan endpoint yang benar-benar tersedia. Jangan menyalin contoh begitu saja jika aplikasi memakai rute atau nama parameter berbeda. Setelah mengubah manifest, instal ulang atau perbarui PWA pada perangkat uji bila browser masih menggunakan versi manifest yang lama.

Membaca dan memvalidasi konten yang diterima

Untuk metode GET, nilai yang dibagikan biasanya tersedia sebagai parameter URL. Halaman penerima dapat membacanya menggunakan URLSearchParams:

const params = new URLSearchParams(window.location.search);
const title = params.get("title") ?? "";
const text = params.get("text") ?? "";
const sharedUrl = params.get("url") ?? "";

Data tersebut tetap harus dianggap sebagai input eksternal. Periksa panjang teks, validitas URL, dan protokol yang diizinkan. Jika aplikasi hanya menerima tautan web, izinkan skema https: dan mungkin http: sesuai kebutuhan, lalu tolak skema lain seperti javascript:. Saat menampilkan teks, gunakan textContent atau mekanisme rendering aman; jangan menyisipkan data mentah ke HTML menggunakan innerHTML.

Hindari menyimpan data secara otomatis tanpa memberi pengguna kesempatan memeriksa hasilnya. Tampilkan pratinjau dan tombol konfirmasi, terutama jika konten akan disinkronkan ke akun atau dikirim ke server.

Menerima file dengan metode POST

Jika PWA perlu menerima gambar atau dokumen, konfigurasi share_target dapat memakai metode POST dan multipart/form-data. Setiap jenis file perlu memiliki nama field serta tipe MIME atau ekstensi yang diizinkan. Browser dan sistem operasi dapat berbeda dalam cara mereka memilih jenis file, jadi uji beberapa perangkat nyata.

{
  "action": "/share-files/",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url",
    "files": [{
      "name": "photos",
      "accept": ["image/jpeg", "image/png", ".jpg", ".png"]
    }]
  }
}

Endpoint penerima perlu memeriksa ukuran file, tipe sebenarnya berdasarkan isi, nama file, dan jumlah unggahan. Jangan mengandalkan ekstensi atau MIME type yang dikirim klien saja. Simpan file di lokasi yang tidak dapat mengeksekusi konten, terapkan batas kuota, dan hapus file sementara setelah tidak diperlukan. Jika data diproses oleh service worker, gunakan mekanisme penyimpanan sementara yang sesuai dan sampaikan hasilnya ke halaman aplikasi dengan aman.

Privasi, keamanan, dan pengalaman pengguna

Konten yang dibagikan dapat mengandung informasi pribadi, token dalam URL, atau dokumen sensitif. Jelaskan apa yang akan disimpan, hindari mencatat seluruh isi berbagi ke log, dan sediakan cara menghapus item yang sudah tersimpan. Jika aplikasi memakai akun, pastikan endpoint memeriksa sesi dan hak akses; jangan menganggap bahwa permintaan yang berasal dari menu berbagi otomatis tepercaya.

Untuk pengalaman yang baik, arahkan pengguna ke halaman yang menampilkan konten yang baru diterima. Berikan pesan jika data kosong atau format tidak didukung. Sediakan jalur alternatif, seperti tombol tempel tautan atau unggah file manual, bagi pengguna yang browser-nya belum mendukung Web Share Target API.

Checklist pengujian sebelum dirilis

• Manifest valid, dapat diakses, dan menunjuk ke endpoint yang benar.
• PWA telah dipasang pada browser yang mendukung fitur.
• Tautan dengan parameter kosong, panjang, atau tidak valid ditangani dengan aman.
• File yang terlalu besar atau bertipe tidak diizinkan ditolak.
• Konten ditampilkan tanpa mengeksekusi HTML atau skrip dari input.
• Alur alternatif tersedia untuk browser yang tidak mendukung fitur.

Kesimpulan

Web Share Target API membuat PWA lebih terintegrasi dengan perangkat karena dapat menerima tautan, teks, dan file dari menu berbagi sistem. Kunci penerapannya bukan hanya konfigurasi manifest, tetapi juga validasi input, pembatasan unggahan, perlindungan privasi, dan pengujian lintas browser. Mulailah dengan penerimaan tautan sederhana, lalu tambahkan dukungan file hanya jika memang dibutuhkan.

Referensi teknis: dokumentasi MDN tentang properti share_target dan panduan MDN untuk berbagi data antar aplikasi.