Navigator.share() 使用方法技术頭條網

Navigator.share() 使用方法

2020-04-01 15:40:13 sandag

Web Share API 是現代瀏覽器提供的最新功能之一，它讓網頁的使用者能夠體驗到和原生 app 完全相同的分享體驗。這篇文章將會教你 navigator.share() 的使用方法。

Web Share API 是什麼？

Web Share API 是一個簡單易用的 API，可以讓使用者用作業系統原生的介面分享至其他 app、分享給你的朋友等，就像是使用原生 app 一樣。以下就是 Android 和 iOS 的原生分享介面，相信大家一定不陌生：

網頁端實作這隻 API，就等於同時實作了 Share to Facebook、Share to Twitter、Share to XXX… 等各種分享至第三方平臺的功能了！

是不是很想趕快學起來呢？

讓我們繼續往下看！

Web Share API 的使用限制

要使用 Web Share API 有幾個限制：

<code>click
/<code>

Navigator.share()

navigator.share() 使用方法如下：

<code>if (navigator.share) {
  navigator.share({
    title: '標題',
    text: '文字描述',
    url: 'https://shubo.io/',
  })
    .then(() => console.log('成功！'))
    .catch((error) => console.log('發生錯誤', error));
}/<code>

首先我們要判斷瀏覽器是否支援這個功能，所以需要加上 if (navigator.share) { // ... } 的判斷。

接著我們呼叫 navigator.share() function，它的參數是一個物件，支援 title , text , url 及 files 四個 key。

最後這個 function 回傳值是一個 promise，所以我們可以分別對成功或是失敗的情況做額外處理。

延伸閱讀： [教學] 深入淺出 JavaScript Promise

Canonical URL

有個小細節需要注意，如果你的網站有不同的網址指向同樣的內容（例如：電腦版網頁 www.example.com 用手機瀏覽時會 redirect 到手機版網頁 m.example.com ），那麼你可能應該分享 canonical URL (標準版的 URL)，而不是 document.location.href 。

為什麼呢？因為如果你在手機上瀏覽這個網站，分享出去的會是 m.example.com ，而如果手機版沒有做 redirect 的話，桌機的使用者就會看到手機版的排版 (感覺這狀況在 FB 挺常見的 -.-)。

如何解決呢？一般來說，這種情況為了 SEO 的緣故會在 HTML head 裡面標記 <link> ，讓搜尋引擎不要重複 index。因此我們可以用幾行簡單的程式碼抓出 canonical URL：

<code>const canonicalElement = document.querySelector('link[rel=canonical]');
const url = canonicalElement && canonicalElement.href || document.location.href;
navigator.share({ url: url });/<code>