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

me
林彥成
2021-09-22 | 1 min.
文章目錄
  1. 1. 什麼是 Contact Picker API
  2. 2. 怎麼使用 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;
  1. 使用上 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/)
聯絡人選擇器介面


喜歡這篇文章,請幫忙拍拍手喔 🤣

share