Web共享API用於本地共享功能

Web共享API使網站可以通過Navigator.share（）使用設備的本機共享接口。 2。它支持共享標題，文本，URL和文件（有限的瀏覽器）。 3。它在HTTPS上的移動瀏覽器上工作，需要用戶手勢。 4。使用navigator.share和navigator.canshare（）用於文件。 5。實施後備，例如復制不支持的瀏覽器的URL或社交共享鏈接。 6。當與適當的UX模式一起使用時，它可以增強內容豐富網站上的移動Web體驗。 7.桌面支持是有限的，不允許自定義共享應用程序。 8。始終與後備策略配對以確保普遍的可用性。在使用檢測和替代方案實施時，Web共享API是用於移動Web共享的寶貴工具。

Web共享API將本機共享功能帶到Web中，這曾經是移動應用程序獨有的。僅使用幾行JavaScript，網站現在可以觸發設備的內置共享界面，讓用戶共享文本，URL，甚至文件直接到WhatsApp，消息或電子郵件之類的應用程序。

這對於移動網絡體驗特別強大，用戶期望類似應用程序的行為。

網絡共享API的工作方式

Web共享API使用navigator.share()方法，該方法在大多數現代移動瀏覽器（主要是Android上的Chrome，Edge和Samsung Internet）中可用，而iOS 12.2上的Safari則可以使用。

觸發時，它會打開本機共享表格，與“共享”點擊時在本機應用中看到的彈出窗口相同。

這是一個基本示例：

如果（navigator.share）{
  navigator.share（{
    標題：“查看”，
    文字：“找到一篇有趣的文章！”，
    URL：'https：//example.com/article'
  }））
  。
  。
} 別的 {
  console.log（“不支持Web共享API”）；
}

這將提示用戶使用其設備的本機共享選項。

關鍵功能和支持數據

share()方法接受具有可選字段的數據對象：

• title - 共享內容的標題
• text - 隨附的文字或描述
• url - 共享的URL（最常用）
• files - 一組File對象（圖像，PDF等） -有限的瀏覽器支持

注意： url通常自動與title和text相結合。即使您不在文本中包含完整的URL，系統通常也將其附加。

文件共享支持

文件共享在某些Android瀏覽器上有效（Chrome 75），但僅適用於特定的MIME類型（例如，圖像）。例子：

 const file =新文件（
  [imageBlob]，
  'screenshot.png'，
  {type：'image/png'}
）；

if（navigator.canshare && navigator.canshare（{files：[file]}））{
  navigator.share（{
    文件：[文件]，
    文字：“這是我的屏幕截圖”
  }）;
}

使用navigator.canShare()以功能檢測文件共享功能。

何時何地使用它

Web共享API在內容豐富或社交網站中閃耀：

• 新聞文章
• 電子商務產品頁面
• 部落格
• 照片庫

添加僅在本機共享有意義的移動設備上顯示的“共享”按鈕。

示例UX模式：

 <button id =“ share-btn”樣式=“ display：none;”> share </button>

 //僅當支持Web共享時顯示按鈕
如果（navigator.share）{
  document.getElementById（'share-btn'）。 style.display ='block';
}

document.getElementById（'share-btn'）。 addeventListener（'click'，（）=> {
  navigator.share（{
    標題：document.title，
    URL：window.location.href
  }）;
}）;

這樣可以使接口保持清潔，並避免在不受支持的瀏覽器上顯示出損壞的功能。

局限性和陷阱

雖然功能強大，但網絡共享API有一些約束：

• 僅在HTTPS上工作- 安全需要
• 需要用戶手勢- 必須通過點擊/單擊觸發
• 移動優先- 桌面支持有限或不存在
• 沒有自定義- 您無法控制出現哪些應用程序
• 沒有後備- 如果不支持，除非您提供替代方案，否則什麼也不會發生

對於不受支持的瀏覽器，請考慮回到：

• 將URL複製到剪貼板
• 打開Twitter/Facebook共享鏈接
• 顯示QR碼

示例後備：

異步函數sharecontent（）{
  如果（navigator.share）{
    嘗試 {
      等待Navigator.Share（{
        標題：document.title，
        URL：window.location.href
      }）;
    } catch（err）{
      shoultbackshare（）; //例如，複製URL
    }
  } 別的 {
    shoultbackshare（）;
  }
}

結論

Web Share API是一種小型但有影響力的工具，用於改善移動Web應用程序的用戶參與度。它通過利用熟悉的OS級共享工具來彌合Web和本機體驗之間的差距。

它不是普遍支持的，但是有了適當的功能檢測和後備，它可以在今天安全地實施。

基本上：如果您正在建立一個移動友好的網站並希望使共享毫不費力，那麼Web共享值得增加。

以上是Web共享API用於本地共享功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！