讓社群分享更到位，用手機原生分享網頁-navigator.share

文/薑絲 - 野薑工程師

在 228 連假，剛好有時間可以來實驗一直很想試試看的一個功能

“用手機原生系統做網頁分享”

ios share

其實在手機上注意到這功能已經有一陣子了，因為非常貼合每個使用者的情境，而且可以很方便的就做分享，重點是 “不會跳出網頁” ！！讓使用者可以無負擔分享，並連續在網頁繼續瀏覽

比如說，過往分享是點擊後，會開起 line 或 fb app 再做分享，這時用戶如果發現其他人的訊息或是有趣的 po 文，這樣回到原本網頁的機率就變低了…間接的引響 SEO 跳出率…

總之這功能非常適合 blog 網站、產品網站、貼文網站…各種需要做分享，而且用戶大多是使用手機訪問的網站

但這分享功能一開始只開放給 app 呼叫，所以 web 最初是沒有這功能，不過從去年突然發現，誒？好像網頁也開始開放了！！就找了幾篇文章確認一下功能，打算找機會來試試看

Navigator.share

其實程式碼很簡單就是去呼叫 navigator.share 然後把你要帶的東西放進去就好了

navigator.share({
  title: document.title,
  text: 'Hello World',
  url: 'https://developer.mozilla.org',
});

可以看到桌機其實沒有支援度很高，但是手機其實大多都有支援了～

但還是要記得先做 if(navigator?.share) 判斷再觸發navigator分享

can i use:navigator.share

20210228 can i use: navigator.share

不過這分享功能目前是使用手機原生的分享，所以其實在桌機上分享效果沒有這麼好

safari / navigator.share

用 safari 桌機點擊測試，發現跳出來的東西其實不怎麼吸引人後續做分享，而且跟我們社群分享的需求完全無關，所以在桌機還是用原本以前的作法來使用會比較直觀

desktop 分享建議

目前測試手機上( ios 14.4 ) 在 safari/chrome/firefox 都可以良好使用

safari / chrome / firefox

野薑官網 也上此分享功能囉～歡迎大家來試用看看