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

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

簡單提一下 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。

store-badge

STEP 2

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

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

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

store-badge

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

store-badge

值得一試的三個理由:

  1. 以 js 自動辨識使用者裝置,顯示對應的應用程式下載按鈕
  2. 按鈕使用 SVG 格式可自由調整大小或修改樣式
  3. 開放原始碼,程式部分已經託管在 jsDelivr CDN
分享本文