Progressive Web App 存取通訊錄聯絡人 Contact Picker API 入門實作

什麼是 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，請使用：

1

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 就會把資料帶回來。

程式碼也很簡單，關鍵步驟如下:

1
2
3
4
5
6
7

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/)

• ← 上一篇
• 下一篇 →