Progressive Web App 存取通讯录联络人 (18)

什麽是 Contact Picker API

透过 Contact Picker API 网页也可以像 Native App 一样去选取用户的联络人资讯，API 提供开发者去选择一个或多个栏位资讯，反过来说 App 可以设计让用户只分享他们想分享的内容，更方便用户去和家人、朋友做互动。举例来说 Email 的 Progressive Web App 就可以整合 Contact Picker API 来选择 Email 的收信人，或是有社群功能的网站可以帮助用户知道哪些联络人已经加入。

底下连结是按照教学文件中去制作出来的 Demo 网站，建议使用 Android M 以上手机开启 Chrome 80+ 版本才能正常运作。
https://linyencheng.github.io/pwa-contact-picker/

怎麽使用 Contact Picker API

1. Progressive Web App 的第一步骤就是要检查是否支持 Contact Picker API，请使用：

const supported = "contacts" in navigator && "ContactsManager" in window;

2. 使用上 Contact Picker API 有两个参数 properties, options。

• properties: ['name', 'email', 'tel', 'address', 'icon']
  • addresses、icons 需要 Chrome 84+
• options: { multiple: true } 是否多选

Contact Picker API 的使用方式是直接使用 navigator.contacts.select()，当被叫用後会回传一个 promise 并显示联络人选择器介面，使用者就能透过介面去选择想要透过网站分享的联络人。选择并点击完成後，promise 就会把资料带回来。

程序码也很简单，关键步骤如下:

const properties = ["name", "email", "tel", "address", "icon"];
const options = { multiple: true };

try {
  const contacts = await navigator.contacts.select(properties, options);
  handleResults(contacts);
} catch (ex) {}

联络人选择器介面 (图片来源: https://web.dev/)