LINE LIFF 簡介

什麼是 LIFF？

按照官方文件 https://developers.line.biz/en/docs/liff/overview/ 的介紹：

LINE Front-end Framework (LIFF) is a platform for web apps provided by LINE. The web apps running on this platform are called LIFF apps.

LIFF apps can get data from the LINE Platform such as the LINE user ID. The LIFF app can use such data to provide features that utilize user data and send messages on the user's behalf.

LINE APP 中提供了一個 platform 讓開發者跑 web app，而這個 platform 叫做 LIFF。

開發者的 web app 不僅能跑在 LIFF platform 中，還能透過 LIFF JavaScript SDK 來存取一些 LINE API 提供的資訊，如此一來開發者便能在 LINE APP 中提供更貼近 LINE 生態圈的服務給使用者。

這裡推薦參考 Microsoft MVP 保哥的 https://blog.miniasp.com/post/2023/01/29/The-LINE-Front-end-Framework-LIFF-v2 文章為例子：

任何從 LINE 平台開啟的網頁，而網頁使用到 LIFF 提供的 JavaScript SDK，都可以稱為是一個 LIFF！

然而我認為保哥說的不完全對：並不是有用 SDK 就網站就是 LIFF。

這個「用」的定義是什麼呢？

因為還得將 LIFF JavaScript SDK 初始化才行，要想初始化，就要到 LINE Develop Console 開發者後台，設定一個 LIFF 服務，並且將 LIFF ID assign 給 SDK 的 init method。也就是說應該是：

任何從 LINE 平台開啟的網頁，有在 LIFF 後台設定並取得 LIFF ID，並在網頁中使用 LIFF 提供的 JavaScript SDK，透過 LIFF ID 初始化 SDK 後才能稱為是一個 LIFF！

LINE 中內建的 Browser/Web Service 有哪些?

這裡一樣舉 Microsoft MVP 保哥的 https://blog.miniasp.com/post/2023/01/29/The-LINE-Front-end-Framework-LIFF-v2 為參考例子：

在 LINE 平台中可以使用 4 種瀏覽器類型

這麼說並不完全對：因為內文提到的 External Browser 並不是 LINE APP 的 Browser，External Browser 是指開啟手機「外部瀏覽器」（Chrome or Safari)，所以它更像是一個開啟的 actions 「動作」而不是 LINE APP 中的 Browser 「類型」。

所以正確應是說：

在 LINE 平台中可以使用 3 種瀏覽器類型

以官方文件為例，目前 LINE APP 已知有3種 IN-APP Browser (或者說 Web Service 比較恰當），分別為：

最基礎的 WebView
LIFF Service ( LIFF Browser )
MINI-APP

這三者關係可以想像成俄羅斯娃娃：服務的權限、可使用的 LINE APP 的 API 甚至是視覺上的差異..等，由小至大為 WebView、LIFF、MINI-APP

LINE 中的 Web 連結跳轉動作

誠如前面提到的保哥 https://blog.miniasp.com/post/2023/01/29/The-LINE-Front-end-Framework-LIFF-v2 內文不太對的例子。因為 External Browser 不是 LINE APP 的瀏覽器，其是開啟手機中的其他外部瀏覽器，所以應被歸於一種動作，故 LINE APP 中的 Web 跳轉總共是4種 actions 動作。

在 LINE 平台中的 Web 服務有 4 種跳轉動作

由 LINE APP ${當下平台服務} 開啟 WebView (或者跳轉）
由 LINE APP ${當下平台服務} 開啟 LIFF (或者跳轉）
由 LINE APP ${當下平台服務} 開啟 MINI APP (或者跳轉）
由 LINE APP ${當下平台服務} 開啟「外部瀏覽器」

將 ${當下平台服務} 代入 WebView、LIFF 或 MINI APP，所以總共會是3種 Web platform 平台 x 4種 actions 動作 = 總共 12 種結果的組合。

	環境：LINE APP 中的 WebView Browser	環境：LINE APP 中的 LIFF Browser	環境：LINE APP 中的 MINI APP
點擊一般網頁網址	在原 WebView Browser 進行內部換頁跳轉	拉起 WebView Browser 並開啟該網頁	拉起 WebView Browser 並開啟該網頁
點擊 LIFF 網址	拉起 LIFF Browser 並開啟該網頁	在原 LIFF Browser 進行內部換頁跳轉	拉起 LIFF Browser 並開啟該網頁
點擊 MINI APP 連結 (MINI APP 連結也是 LIFF 網址)	待確認	待確認	待確認
點擊加了 External Browser Query String 的網頁連結	待確認	待確認	待確認

LIFF 的功能

在 LINE 後台建立 LIFF 服務

官方文件：https://developers.line.biz/en/docs/liff/overview/

後台為：https://developers.line.biz/console/?status=success ，請確認是否有權限看到測試、正式環境設定。

開啟(夾帶）加入 OA 好友功能

可在 LINE Developer 後台設定，請參閱官方文件。

開啟或隱藏右上角的分享功能

可在 LINE Developer 後台設定，請參閱官方文件。

在 Web 中使用 LIFF SDK

LIFF SDK 本身是「Client 端的 JS」，若網站有使用 SSR，那麼在本機電腦開發階段，專案中 import 後於localhost 開發就會報錯。

解決方法都是在 Client 在使用 LIFF SDK 即可，例如我們可以在 useEffect 中才 import LIFF SDK，示意程式碼如下：

  useEffect(() => {
    import("@line/liff")
      .then((liff) => liff.default)
      .then((liff) => {
        liff.init({ liffId: $LIFF_ID })
      })
  },[])

或者我們可以使用 loadable 幫我們在 Client 端做 Lazy import ，只要多加上一個 ssr: false 的參數即可，示意程式碼如下：

const liff = loadable(() => import("@line/liff"),{
  ssr: false
});

當然還有其他類似的方式，只要在 Client 端使用就好，目前是使用在 useEffect 中import 的做法，因為 LIFF 官方 Next.js 範例即是這樣做的！

完整的 LIFF 服務定義

一、完整的 LIFF 服務要滿足以下幾點

LINE 後台設定

該 Website 有在 LINE 開發者後台設定成 LIFF 服務。
呈上，該服務有獨立的 LIFF ID。

服務的正流程執行環境

執行環境為 LINE APP 內的 Browser。
該 LINE APP Browser 是 LIFF Browser 而不是其他 IN-APP Browser。

預期在 LINE APP 內開啟才是正流程

網站設定

該 Website 有使用 LIFF SDK。
呈上，該 Website 有將後台產生的 LIFF ID 餵給 LIFF SDK 並初始化。

二、LIFF「SDK」、「網站」、「瀏覽器」與 LINE 平台上的「服務」在口語名詞上的混淆性

LIFF 服務在 LINE 官方文件就有清楚的說明了，然而對於開發團隊，在溝通時容易發生一個「LIFF」各自表述的問題，別說 RD 對 PM 了，有時 RD 對 RD 討論時都會搞混。

這是因為「SDK」、「網站」、「瀏覽器」與「服務」四者皆是不同的東西，但是大家口語上都會說「LIFF」，所以要隨時對齊討論當下說的 LIFF 是指什麼 LIFF，不然容易雞同鴨講。

例如，討論到一半，這時來個大哉問「現在說的 LIFF 是指什麼 LIFF？」

（是指由 LINE 後台產生 liff.line.me 的 LIFF 連結嗎？）

（ LIFF 加好友？是指首次在 LINE APP 中首次打開 LIFF 服務時，出現的授權頁加好友嗎？）

（是指 LINE APP 內開啟的瀏覽器 LIFF Browser 嗎？）

（是指 LIFF Browser 開啟但不一定有使用到 LIFF SDK 的 website 網頁本身嗎？）

（是指 LIFF JavaScript SDK 或 LIFF SDK 提供的 LINE API 嗎？）

（是指我們最終在 LINE APP 上提供的「服務」本身：從 LINE APP 中打開有使用 SDK 的 liff.line.me/${LIFF_ID} 並最終轉址到我們產品 domain 並在 LIFF SDK 正確初始化後，進行自動註冊或登入這件事嗎？）

..etc

再舉一些情境，假如：

假如今天在討論 LINE APP 內不同 Web Browser 的跳轉，那按照大家口語討論的上下文脈絡，此時的 LIFF 名詞很有可能是指 LIFF Browser。
假如今天在討論 OA 或者 LINE APP 上撒出去的版位，那按照大家口語討論的上下文脈絡，此時的 LIFF 名詞很有可能是指符合 liff.line.me 規則的 LIFF 連結。

..LIFF 服務並不難懂，只是因為我們是開發團隊，開發過程中的各種眉角都容易用一個「LIFF」名詞去說明，這會導致大家口語溝通上有點難懂，因此對齊大家當下的認知是很重要的～

軼事：LIFF 為 LINE Front-end Framework 簡稱，所以口語上稱「LINE LIFF」時，其實會多重複了一個「LINE 」單字