Contact Picker API menyediakan cara mudah bagi pengguna untuk membagikan kontak dari daftar kontak mereka.
Apa yang dimaksud dengan Contact Picker API?
Akses ke kontak pengguna di perangkat seluler telah menjadi fitur aplikasi iOS/Android sejak (hampir) awal mulanya. Ini adalah salah satu permintaan fitur paling umum yang saya dengar dari developer web, dan sering kali menjadi alasan utama mereka mem-build aplikasi iOS/Android.
Tersedia dari Chrome 80 di Android M atau yang lebih baru, spesifikasi Contact Picker API adalah API on demand yang memungkinkan pengguna memilih entri dari daftar kontak mereka dan membagikan detail terbatas entri yang dipilih dengan situs. Fitur ini memungkinkan pengguna berbagi hanya apa yang mereka inginkan, kapan pun mereka inginkan, dan memudahkan pengguna menjangkau serta terhubung dengan teman dan keluarga mereka.
Misalnya, program email berbasis web dapat menggunakan Contact Picker API untuk memilih penerima email. Aplikasi voice-over-IP dapat mencari nomor telepon yang akan dihubungi. Atau, jaringan sosial dapat membantu pengguna menemukan teman yang sudah bergabung.
Menggunakan Contact Picker API
Contact Picker API memerlukan panggilan metode dengan parameter opsi yang menentukan jenis informasi kontak yang Anda inginkan. Metode kedua memberi tahu Anda informasi yang akan diberikan oleh sistem yang mendasarinya.
Deteksi fitur
Untuk memeriksa apakah Contact Picker API didukung, gunakan:
const supported = ('contacts' in navigator && 'ContactsManager' in window);
Selain itu, di Android, Pemilih Kontak memerlukan Android M atau yang lebih baru.
Membuka Pemilih Kontak
Titik entri ke Contact Picker API adalah navigator.contacts.select()
.
Saat dipanggil, metode ini akan menampilkan promise dan pemilih kontak, yang memungkinkan pengguna memilih kontak yang ingin dibagikan ke situs. Setelah memilih apa yang akan dibagikan dan mengklik Done, promise akan di-resolve dengan array kontak yang dipilih pengguna.
Saat memanggil select()
, Anda harus memberikan array properti yang ingin
ditampilkan sebagai parameter pertama (dengan nilai yang diizinkan adalah salah satu dari
'name'
, 'email'
, 'tel'
, 'address'
, atau 'icon'
),
dan secara opsional apakah beberapa kontak dapat
dipilih sebagai parameter kedua.
const props = ['name', 'email', 'tel', 'address', 'icon'];
const opts = {multiple: true};
try {
const contacts = await navigator.contacts.select(props, opts);
handleResults(contacts);
} catch (ex) {
// Handle any errors here.
}
Contacts Picker API hanya dapat dipanggil dari konteks penjelajahan tingkat atas yang aman, dan seperti API canggih lainnya, API ini memerlukan gestur pengguna.
Mendeteksi properti yang tersedia
Untuk mendeteksi properti yang tersedia, panggil navigator.contacts.getProperties()
.
Fungsi ini menampilkan promise yang diselesaikan dengan array string yang menunjukkan properti mana yang tersedia. Contoh: ['name', 'email', 'tel', 'address']
.
Anda dapat meneruskan nilai ini ke select()
.
Ingat, properti tidak selalu tersedia, dan properti baru mungkin ditambahkan. Di masa mendatang, platform dan sumber kontak lain dapat membatasi properti yang dibagikan.
Menangani hasil
Contact Picker API menampilkan array kontak, dan setiap kontak menyertakan array properti yang diminta. Jika kontak tidak memiliki data untuk properti yang diminta, atau pengguna memilih untuk tidak membagikan properti tertentu, API akan menampilkan array kosong. (Saya menjelaskan cara pengguna memilih properti di bagian Kontrol pengguna.)
Misalnya, jika situs meminta name
, email
, dan tel
, dan pengguna
memilih satu kontak yang memiliki data di kolom nama, memberikan dua
nomor telepon, tetapi tidak memiliki alamat email, respons yang ditampilkan akan berupa:
[{
"email": [],
"name": ["Queen O'Hearts"],
"tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]
Keamanan dan izin
Tim Chrome mendesain dan menerapkan Contact Picker API menggunakan prinsip inti yang ditentukan dalam Mengontrol Akses ke Fitur Platform Web yang Andal, termasuk kontrol pengguna, transparansi, dan ergonomi. Saya akan menjelaskan masing-masing.
Kontrol pengguna
Akses ke kontak pengguna dilakukan melalui pemilih, dan hanya dapat dipanggil dengan gestur pengguna, pada konteks penjelajahan tingkat atas yang aman. Hal ini memastikan bahwa situs tidak dapat menampilkan pemilih saat halaman dimuat, atau secara acak menampilkan pemilih tanpa konteks apa pun.
Tidak ada opsi untuk memilih semua kontak secara massal sehingga pengguna dianjurkan untuk hanya memilih kontak yang perlu mereka bagikan untuk situs tertentu tersebut. Pengguna juga dapat mengontrol properti mana yang dibagikan ke situs dengan mengalihkan tombol properti di bagian atas pemilih.
Transparansi
Untuk mengklarifikasi detail kontak mana yang dibagikan, alat pilih selalu
menampilkan nama dan ikon kontak, serta properti apa pun yang diminta
situs. Misalnya, jika sebuah situs meminta name
, email
, dan tel
,
ketiga properti tersebut akan ditampilkan di alat pilih. Atau,
jika situs hanya meminta tel
, pemilih hanya akan menampilkan nama, dan
nomor telepon.
Tekan lama kontak akan menampilkan semua informasi yang akan dibagikan jika kontak dipilih. (Lihat gambar kontak Cheshire Cat.)
Tidak ada persistensi izin
Akses ke kontak bersifat on-demand, dan tidak dipertahankan. Setiap kali situs ingin
mengakses, situs harus memanggil navigator.contacts.select()
dengan gestur pengguna,
dan pengguna harus memilih kontak yang ingin dibagikan
ke situs satu per satu.
Masukan
Tim Chrome ingin mengetahui pengalaman Anda dengan Contact Picker API.
Mengalami masalah dengan penerapan?
Apakah Anda menemukan bug pada implementasi Chrome? Atau apakah penerapannya berbeda dengan spesifikasinya?
- Laporkan bug di https://new.crbug.com. Pastikan untuk menyertakan detail
sebanyak mungkin, berikan petunjuk sederhana untuk mereproduksi bug, dan
tetapkan Components ke
Blink>Contacts
. Glitch sangat cocok untuk membagikan reproduksi masalah yang cepat dan mudah.
Berencana untuk menggunakan API?
Apakah Anda berencana menggunakan Contact Picker API? Dukungan publik Anda membantu tim Chrome memprioritaskan fitur, dan menunjukkan kepada vendor browser lainnya betapa pentingnya mendukung mereka.
- Bagikan rencana penggunaannya di rangkaian pesan Discourse WICG.
- Kirim tweet ke @ChromiumDev menggunakan hashtag
#ContactPicker
dan beri tahu kami tempat dan cara Anda menggunakannya.
Link bermanfaat
- Penjelasan publik
- Spesifikasi Pemilih Kontak
- Demo Contact Picker API dan Sumber demo Contact Picker API
- Bug pelacakan
- Entri ChromeStatus.com
- Komponen Blink:
Blink>Contacts
Terima kasih
Terima kasih banyak kepada Finnur Thorarinsson dan Rayan Kanso yang
menerapkan fitur tersebut dan Peter Beverloo yang
kodenya tanpa malu-malu saya
mencuri dan memfaktorkan ulang untuk demo.
Catatan: Nama-nama di pemilih kontak saya adalah karakter dari Alice in Wonderland.