Is it possible to access device contacts in a PWA?

Capacitor
1

I am building a PWA version of an ionic app (Ionic/capacitor/angular). Is it possible to access the device’s contacts from such an app?

Best regards,
Alf

2

Sparingly supported I believe. Better test on the the intended devices. And remember - Chrome on iOS is actually Safari

3

Dear Tommertom,

First of all, thanks for the link.

Accessing the What web can do today page you provided from an (oldish) android phone, in the section “support in your browser”, the entry navigator.contacts.select is checked.

I tried using the (deprecated) cordova plugin in my app. In the android phone mentioned above, when I try to access the contacts I get an error. I don’t know if this is because the cordova contacts plugin does NOT work in a PWA, or if it is a permissions issue. In the latter case, the question is how do I set the app permissions.

There is also a capacitor contacts plugin, but its documentation doesn’t mention PWAs.

Before investigating further, I would like to know if anyone has managed to make one of the two plugins work in a PWA - or conversely, if anyone knows for sure they can NOT be made to work in a PWA.

Thanks again,
Alf

4

Hi

Answer is easy - cordova is not intended/suited for PWA. Only android/iOS.

Capacitor only supports PWA version it if it is mentioned.

You are dependent on navigator.contacts per its Web API.

For this specific requirement PWA equals browser.

Regads

Tom

5

Thanks again for your help.
It seems you have pointed me in the right direction, but I have still not managed to get concrete results.

I wrote code that uses navigator.contacts.select() directly, but it produces an error: “TypeError: Unable to open a contact selector”.
I get the same error when querying navigator.contacts.select() directly from the console in chrome devTools (remotely debugging the app running in my android phone)

('contacts' in navigator && 'ContactsManager' in window)

returns .t., so in theory I should be able to call select().

The version of Chrome running in my phone is 95.0.4638.74. navigator.contacts.select() is supposed to be supported in v. 80 and up (https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API#browser_compatibility)

navigator.contacts.getProperties() returns [“email”,“name”,“tel”,“address”,“icon”], so the elements I seek are not the issue.

6

I have no experience with this api

It could be permissions not granted?

You would have to check that. There is also an api for permissions

7

Well, according to Contact Picker API, или как поделиться своими контактами с браузером
(translated version here: translated version, this only works on Android 6+. My test phone runs Android 5.1, so this is probably the issue.

8

Ok maybe indeed

If you have android studio you can try on emulator maybe?

9

Indeed, on an android 12 phone it works under chrome. Strangely enough, it does NOT work under Samsung internet v.17.x (according to the docs, it should work in Samsung Internet 13+).