iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

前端三分鐘 X Progressive Web App 30 天製造解密系列 第 18

Progressive Web App 存取通訊錄聯絡人 (18)

  • 分享至 

  • xImage
  •  

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

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

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/)
聯絡人選擇器介面


上一篇
Progressive Web App 透過系統分享內容: Web Share API & Web Share Target (17)
下一篇
Progressive Web App 定期背景同步 (19)
系列文
前端三分鐘 X Progressive Web App 30 天製造解密30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言