store-badge 判斷使用者裝置顯示對應 App Store、Google Play 商店按鈕

今天在整理瀏覽器的瀏覽紀錄時，無意間發現之前存下來的一個服務 store-badge，對於應用程式開發者來說或許會有用處，特別是開發的應用程式包括 iOS 和 Android 版本，就能提供給不同使用者特定的應用程式商店下載鏈結。簡單來說，大部分網站會顯示 App Store 和 Google Play 的下載按鈕，分別對應不同平台，使用者可依照需求點選並連接到特定的應用程式商店，透過 store-badge 就可以自動判斷使用者的裝置類型。

不過 store-badge 其實有點雞肋，也並非必要，因為一次顯示兩個按鈕並不會造成什麼問題，倘若開發者希望 iPhone、iPad 使用者進入網站時可直接顯示 App Store 商店鏈結，Android 使用者則只會看到 Google Play 下載按鈕，不會寫程式碼沒關係，store-badge 把這個程式寫好，只要複製一段程式碼稍作修改就能使用。

簡單提一下 store-badge 特色：開放原始碼、js 程式已經託管於 jsDelivr，顯示出來的兩個應用程式商店按鈕都是 SVG 向量圖格式，可以自行放大縮小調整為需要的樣式。如果你不是使用這兩個平台開啟（例如透過電腦版瀏覽器）則會同時顯示兩個商店按鈕。

store-badge
https://apuyou.github.io/store-badge/ （GitHub）

使用教學

STEP 1

開啟 store-badge 網站後可以找到一個簡單的 Demo 範例，如果使用電腦瀏覽器開啟就會看到這兩個應用程式商店按鈕，分別對應到 App Store 和 Google Play，若你使用 iPhone、iPad 的話就只會看到 App Store。

STEP 2

從 store-badge 網站會給出一段程式碼，只要稍作修改就能使用到自己網站：

• data-name: 應用程式名稱
• data-google-play-url: 對應的 Google Play 商店網址
• data-app-store-url: 對應的 App Store 商店網址

最後一段的 bundle.js 是從 jsDelivr 載入，速度不會太慢。

前面有提到 store-badge 是一個開放原始碼專案，透過 GitHub 頁面也能找到相關檔案。