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

（

閱讀時間大約 6 分鐘）

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

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

也許你已經知道，或者尚不知道， 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線上預購口罩」按鈕，如下圖的紅色箭頭所指的位置。

*不同手機版本的「尋找口罩」 LINE 聊天機器人當中，都有一鍵啟動「全民健保行動快易通」 App 的按鈕。*左圖是 iPhone 手機截圖，右圖是 Android 手機截圖。

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

用來跳轉到「全民健保行動快易通」 App 的 LIFF 網頁，*左圖是 iPhone 手機截圖，右圖是 Android 手機截圖。*

不同手機版本的「全民健保行動快易通」 App ，左圖是 App Store 上的 iOS 版本，右圖是 Google Play 上的 Android 版本。

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

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

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

	<!DOCTYPE html>
	<html>
	<head>
	<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
	<META HTTP-EQUIV="EXPIRES" CONTENT="0">
	<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>開啟「全民健保行動快易通」App</title>
	</head>
	<body>
	<p style="font-size: 48px; text-align: center; margin: 30px auto;">頁面跳轉中，請稍候…</p>
	<button onClick="liff.closeWindow();" style="background-color: #555555; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; margin:auto; display: block; font-size: 72px;">關閉視窗</button>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
	<script>
	$(document).ready(function() {
	liff.init({
	liffId: "__LIFF_ID__"
	})
	.then(() => {
	if (liff.isInClient()) {
	if (liff.getOS() == "ios") {
	window.location.replace("itms://itunes.apple.com/app/apple-store/id578186283?mt=8");
	} else if (liff.getOS() == "android") {
	window.location.replace("market://details?id=com.nhiApp.v1");
	}

	setTimeout(function(){ liff.closeWindow(); }, 3000);
	}
	})
	.catch((err) => {
	});
	});
	</script>
	</body>
	</html>

view raw liff-getos-launch-the-right-app.html hosted with

by GitHub

第 11~12 行是網頁介面。
- 第 11 行是「頁面跳轉中，請稍候…」提示文字。
- 第 12 行是「關閉視窗」行動按鈕，點擊後呼叫 liff.closeWindow() 。
第 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 網頁就先被關閉，導致異常的結果。