使用 LIFF v2 判斷手機作業系統,一鍵開啟正確的 App 介紹頁


隨著口罩實名制 2.0 將在 3 月 12 日上路,使得透過「全民健保行動快易通」 App 在網路線上購買口罩變得可能,而不一定要去實體店面排隊購買。昨天( 2020/3/10 )看到這則消息,覺得好適合用 LIFF v2 來做喔,因為你知道的,手機有分 iPhone 和 Android 兩種,如果「只要一個步驟」(例如:一鍵點擊)就能夠引導使用者從 LINE 聊天機器人「跳轉」到正確手機版本的 App (如果有定義 URL Scheme 的話,若是沒有,至少可以開啟 App 介紹頁,後續要開啟或安裝都很快速),肯定是最方便的。否則你也知道,步驟越多,完成的轉換率就越低,所以「一鍵」往往是最好的解決方案。文中有 iPhone 手機的操作示範影片。

圖解說明:從 LINE 聊天機器人「一鍵跳轉」到正確手機版本的 App 介紹頁。

iPhone 手機的操作示範影片。
iPhone 手機的操作示範影片。

也許你已經知道,或者尚不知道, LIFF 的版本已從 v1 邁向 v2 了,而且從初始化( init )呼叫開始就全然不同。那麼除了版本編號和初始化呼叫之外,LIFF v2 到底還有哪些便利的用戶端 API 以及能夠如何運用呢?有些 API 你可能以為自己用不到,或者沒想過要怎麼使用,尤其是 get 開頭(通常用來「取得資訊」,目前有 8 支)和 is 開頭(通常用來「判斷狀態」,目前有 2 支)的家族,另外還有不少動詞開頭(目前有 10 支),以及藍牙相關(目前有 3 支)的 API 也非常值得探索玩味喔。

今天就讓我們來看一個運用 getOS() (取得執行 LIFF App 的平台的作業系統名稱)和 isInClient() (判斷 LIFF App 是否執行於 LINE 內建的瀏覽器中)的例子吧!首先,請將示範的「尋找口罩」 LINE 聊天機器人加為好友

成功加為好友之後,接著請點擊聊天視窗下方的「附近特約藥局」快捷鍵,將會分別顯示「距離近的」和「有庫存的」各 10 家藥局,再點擊「透過App線上預購口罩」按鈕,如下圖的紅色箭頭所指的位置。

點擊之後,透過 LIFF 網頁的跳轉(如下圖所示,實務上使用「 Full 」版面的 LIFF ,感覺從 LINE 跳轉到其他 App 的時候,畫面比較不會閃爍、比較無縫),用戶將會發現自己被引導到「全民健保行動快易通」的 App 介紹頁,可以進行後續的「安裝」或「開啟」動作,但是差別在於,使用 iPhone 手機的朋友所在頁面會是 App Store ,而使用 Android 手機的朋友則會看到 Google Play ,如本文最後的兩張截圖所示。

實際上,這個跳轉用途的 LIFF 網頁並不會停留太長的時間(功能強大的新手機也許不到一秒鐘,較舊的手機可能會多花點時間),再者我們隨後就會透過 JavaScript 的 setTimeout() 呼叫 liff.closeWindow() 來關閉這個 LIFF 網頁(因為它的跳轉任務已經大功告成了),逾時時間是設定為 3 秒鐘,這是一個概略的時間差,避免跳轉尚未完成, LIFF 網頁就先被關閉,導致異常的結果。

所以大可以不必在這個 LIFF 頁面上面多作文章,但是我們仍然建議在頁面上留下一些提示和行動呼籲( Call to Action )按鈕當作備案,以免有個萬一,被用戶給了差評。這裡示範的提示文字是非常直白的「頁面跳轉中,請稍候…」,搭配的行動呼籲按鈕則是「關閉視窗」(好吧,跳轉如果出了問題,至少還能夠返回到 LINE 裡面去)。

現在就讓我們來解析一下這個 LIFF 網頁的原始碼,請在 GitHub 給星,感恩!

  1. 第 11~12 行是網頁介面。
    • 第 11 行是「頁面跳轉中,請稍候…」提示文字。
    • 第 12 行是「關閉視窗」行動按鈕,點擊後呼叫 liff.closeWindow()
  2. 第 17~33 行是 LIFF 程式。
    • 第 21 行透過 liff.isInClient() 呼叫來判斷 LIFF App 是否執行於 LINE 內建的瀏覽器中,也就是說我們只想要引導使用手機版 LINE 聊天機器人的用戶,如果使用桌機版的 LINE 用戶則不在此列,原因是「尋找口罩」這個服務的許多訊息格式只適用於手機介面。
    • 第 22 和 24 行透過 liff.getOS() 呼叫來得知執行 LIFF App 的平台的作業系統名稱,使用手機執行的話,回傳值是 ios 或 android ,而桌機的話則是 web ,只有這三種可能性。
    • 第 23 和 25 行透過 JavaScript 的 window.location.replace() 函式來實現跳轉到「全民健保行動快易通」 App 介紹頁的功能,也就是重新導向( Redirect )的任務。
    • 第 28 行透過 JavaScript 的 setTimeout() 函式,在 3 秒鐘之後呼叫 liff.closeWindow() 以關閉這個已經可以功成身退的 LIFF 視窗。再次說明,逾時時間是設定為 3 秒鐘,這是一個概略的時間差,避免跳轉尚未完成, LIFF 網頁就先被關閉,導致異常的結果。

目前就技術而言,在傳統聊天視窗內應該沒有辦法做到上述功能,幸好有 LIFF !最後,勤洗手,生病戴口罩,齊心防疫!祝福大家都平安!