Heute warten wir auf die Veröffentlichung von Chrome 80 , was bedeutet, dass die Contact Picker-API aus Origin Trials im Erwachsenenalter hervorgeht , sodass wir der Website Zugriff auf vom Benutzer ausgewählte Kontakte aus seinem Notizbuch gewähren können. In diesem Artikel werden wir die sich ergebenden Möglichkeiten und einige möglicherweise nicht offensichtliche Punkte analysieren.
Was ist das und warum?
Stellen Sie sich vor: Sie möchten Ihren Freund zu Ihrer Lieblingsseite einladen. eine Online-Bestellung aufgeben und die Kontaktnummer der Frau als Empfänger angeben möchten; Rufen Sie ein Taxi für einen Kollegen und geben Sie seine Nummer als Passagiernummer an (ja, ich verstehe, dass der beliebteste Fall hier der erste ist, aber ich bin auch den anderen im letzten Monat begegnet) oder geben Sie irgendwie und irgendwo die Telefonnummer aus Ihrem Notizbuch an . Was machen sie? Schalten Sie den Browser oder die Anwendung aus, öffnen Sie die Telefonanwendung, gehen Sie von dort zu Kontakte, suchen Sie nach dem gewünschten Eintrag, gehen Sie hinein, kopieren Sie die Nummer, öffnen Sie den Browser oder die Anwendung erneut, wählen Sie das Eingabefeld aus und fügen Sie den kopierten Datensatz ein. Quest abgeschlossen!
Mit der Kontaktauswahl-API kann der Benutzer das gleiche Ziel viel schneller erreichen: Klicken Sie auf die Schaltfläche, suchen Sie den gewünschten Datensatz, wählen Sie ihn aus und klicken Sie auf "Fertig stellen". Cool? Ja. Schwer zu implementieren? Nein.
Wo und wie funktioniert es?
Bisher nur für Android 6+ und nur für Chrome 80+. Wenn Sie diese Kombination besitzen, finden Sie hier eine Demo der Entwickler .
API
Die API enthält eine Klasse ContactsManagerund eine Instanz dieser Klasse als Referenz window.navigator.contacts.
Es gibt zwei asynchrone Methoden: eine getProperties, mit der Sie herausfinden können, welche Art von Kontaktinformationen die aktuelle Gruppe von Browsern und Betriebssystemen im Allgemeinen bereitstellen kann, und selectdie dem Benutzer lediglich eine Aufforderung zur Auswahl von Daten aus dem Notizbuch anzeigt.
, 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.
Diese API ist ein weiterer Schritt des Fugu-Projekts, um die Lücke zwischen dem Web und nativen Anwendungen zu schließen. Natürlich können Sie keine alternative Kontaktverwaltungsanwendung schreiben, aber es scheint mir, dass die meisten Anwendungsfälle diese abdecken und Ihren Benutzer ein wenig glücklicher machen. Schreiben Sie Ihre Gedanken dazu oder teilen Sie mögliche Anwendungsfälle mit!
Verweise