[Web][JavaScript] 有安裝 App 便開啟 App (透過 App URL scheme),若無則導去下載 (Google Play/App Store) 的 workaround

Standard

前言

製作案件上遇到的需求,若使用者有安裝 App 便開啟 App (透過 App URL scheme),若無則導去下載 (Google Play/App Store)。

在 App 內這件事應該是可掌控的(在自己做的 App 中攔截特定網址做處理),但在網頁上要做到這件事就有點麻煩了。一般常見的作法是擺個 Smart Banner,不過只有 iOS Safari 原生就支援,其他的得靠 jQuery Smart Banner(前陣子我也貢獻了修正 Windows Phone 相關錯誤的 pull request :P) 這類的第三方 plugin。

但 Smart Banner 和案件的需求還是有些差異,得靠其他方法解決,在實作的過程中遇到一些小問題與相應的 workaround,特此記錄。

實測環境

跟公司 QA 部門借了幾台機器,以及測試的瀏覽器分別是:

  • iPhone 5S(iOS 8.1.0) – Safari
  • LG G3(Android 5.0) – 內建瀏覽器、Chrome Android 43.0.2357.93、Facebook inapp browser(核心為 Chrome 30.0.0.0)
  • ASUS ZenFone 5 – 內建瀏覽器、Chrome Android 40.0.2214.89
  • SONY Z3(Android 5.0.2) – Chrome Android 43.0.2357.93

服用本文前請注意:也許瀏覽器版本更新後,本文的方法就失效了,所以請作為參考就好哦。

實作與問題

之前在案件中,使用下面這段程式碼作為 workaround:

setTimeout(function() {
  window.location = scheme_link;
}, 25);
window.location = download_link;

註:其中 scheme_link 是 app 的 scheme,可以是單純開啟 App,或是直接進入 App 的某一個畫面。而 download_link 是下載 App 的 URL 連結,像是 Google Play 或是 App Store 的連結。

之前實測時,在裝置上大部分情況都能如預期的運作,但仍有特殊情況(如特定版本的 Chrome、Android Stock Browser)有點小問題。

而隨著瀏覽器版本更新,這次案件再實測似乎就會出現更詭異的情況了,例如同時打開 App 與 Google Play/App Store 的連結。

於是再度至 stackoverflow.com 尋找其他解決方案,找到 一個 2014 年 8 月左右被更新的解答

我針對該解答再做些微調後的 workground 整理說明如下:

Continue reading

網站前端調校之「禁止轉譯的 CSS」

Standard

網站前端載入校能優化上,可透過 Google PageSpeed Insights 來評估與抓出問題,還會根據待改進項目的多寡及嚴重性給予優化上的分數。

最近在製作公司網站的專案,雖然沒什麼內容,但趁上線前就試著用 PageSpeed Insights 掃了一下。下圖是一開始的情況:

啊,雖然我不是分數控,但顯示紅色驚嘆號好像不大酷。

Continue reading