Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

手機版分享按鈕實作: navigator.share() API

最近接觸了一個案子,在設計稿中,手機版的導覽選單有一個「分享」按鈕,但是設計師並未指定是要透過什麼方式分享,因此我便提議使用 navigator.share 這個 API 來製作。

這個 API 的實際效果如下圖所示:

基本語法

const sharePromise = navigator.share(data);

navigator.share 這個 API 中,data 是包含四種資料的物件:

  • url 是 USVString 字串,代表欲分享的網址。USVString 與一般的 DOMString 字串最主要的差異在 USVString 不能包含輔助平面字元 (surrogate code points),藉此讓使用者代理程式在將字串序列化的過程中,不會產生替代字元 (�)。
  • text 是 USVString 字串,分享連結時,附帶的文字敘述。
  • title 是 USVString 字串,代表分享連結時附帶的標題。根據 W3C 的說法,裝置有可能會忽略這個值,目前自己測試還沒有看到呈現的樣子。
  • file 是欲分享的檔案所組成的陣列。

在這次的情境下,並不會使用到 file。有關分享檔案的作法,我目前也還沒有嘗試過,因此未來測試後再補上。

必須注意的是,使用這個 API 的網址必須為 HTTPS 版本,如果是 HTTP 版本,則會出現錯誤。

實作語法

const shareData = {
    title: document.title,
    text: '我想與你分享' + document.title + '的精彩內容!',
    url: document.location.href,
}, btn = document.querySelector('#footer-share-btn');

btn.addEventListener('click', async () => {
  try {
    await navigator.share(shareData)
  } catch(err) {
    console.log( 'Error: ' + err );
  }
});

這裡使用的 URL 是 document.location.href,不過根據這篇文章的說法,建議在實作時應該使用標準網址 (Canonical URL),避免因為擷取到當前頁面的行動裝置版網址,導致使用桌上型裝置時體驗不佳。

實作下來的結果如下 (僅手機版適用)。

See the Pen by Eric Chuang (@eric-chuang) on CodePen.

參考資料

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料