Hari ini kami sedang menunggu rilis Chrome 80 , yang berarti bahwa API Pemilih Kontak akan keluar dari Uji Coba Asal hingga dewasa , yang memungkinkan kami untuk menyediakan situs dengan akses ke kontak yang dipilih pengguna dari notebook-nya. Dalam artikel ini kita akan menganalisis peluang yang muncul, dan beberapa, mungkin, poin yang tidak jelas.
Apa ini dan mengapa?
Bayangkan: Anda ingin mengundang teman Anda ke situs favorit Anda; membuat pesanan online dan ingin menentukan nomor kontak istri sebagai penerima; panggil taksi untuk seorang kolega dan tunjukkan nomornya sebagai nomor penumpang (ya, saya mengerti bahwa kasus paling populer adalah yang pertama di sini, tetapi saya juga menemukan yang lain pada bulan lalu) atau entah bagaimana dan di suatu tempat Anda menunjukkan nomor telepon dari buku catatan Anda . Apa yang sedang kamu lakukan? Matikan browser atau aplikasi, buka aplikasi Telepon, dari mana Anda pergi ke Kontak, cari entri yang diinginkan, masuk ke dalamnya, salin nomor, buka browser atau aplikasi lagi, pilih bidang input, tempel entri yang disalin. Quest selesai!
API Pemilih Kontak memungkinkan pengguna untuk mencapai tujuan yang sama lebih cepat: klik tombol, cari catatan yang diinginkan, pilih, klik "Selesai". Keren? Iya. Sulit diimplementasikan? Tidak.
Di mana dan bagaimana cara kerjanya?
Sejauh ini, hanya untuk Android 6+ dan hanya untuk Chrome 80+. Jika Anda memiliki kombinasi ini, berikut adalah demo dari pengembang .
API
API mencakup kelas ContactsManagerdan turunan dari kelas ini dengan referensi window.navigator.contacts.
Ada dua metode asinkron: satu getPropertiesyang memungkinkan Anda untuk mengetahui informasi kontak seperti apa yang dapat diberikan oleh sekelompok browser dan sistem operasi saat ini, dan selectyang hanya menampilkan permintaan kepada pengguna untuk memilih data dari notebook.
, API : «address», «email», «icon», «name» «tel». , , , , , .
const supportedProps = await navigator.contacts.getProperties();
if (supportedProps.includes('address') && supportedProps.includes('icon')) {
// ,
}
.
navigator.contacts.select , . , . , , . , . multiple ( false), .. , .
(, multiple) - , , — ( — ). :
[{
"email": [],
"name": ["Queen O’Hearts"],
"tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]
«email», «name» «tel» . . , , Android, <> <> <> <>, </>. «address» , ContactAddress, ( ) PaymentAddress. «icon» — Blob-.
.
, . , , . .
? «», . .
, ( ), , TypeError: Unable to open a contact selector.
:
const supported = ('contacts' in navigator && 'ContactsManager' in window);
, , , Android 5- . . , Unable to open a contact selector.
API, , . . , API. , , , , , , . , API Permission API, .
? . : navigator.contacts.select , , , . : , , , . , . , , , , , .
:
API Android. , , Windows 10 Contact Picker API API Windows.ApplicationModel.Contacts, macOS — API Contacts. Chrome .
Chroimum-based- Android API , . Samsung Internet Miui, .
Firefox API, .
- , , Safari , , . Safari.
API ini adalah langkah lain dari Proyek Fugu untuk mempersempit kesenjangan antara web dan aplikasi asli. Tentu saja, Anda tidak akan bisa menulis aplikasi manajemen kontak alternatif, tetapi menurut saya sebagian besar kasus penggunaan menutupinya dan membuat pengguna Anda sedikit lebih bahagia. Tulis pemikiran Anda tentang hal ini atau bagikan kemungkinan penggunaan!
Referensi