LINE Dev Day 2019 議程心得之四: LIFF 前端技術新鮮事


LIFF ( LINE Front-end Framework )是 LINE 發展的前端技術,可以將應用從 LINE 聊天視窗延伸到網頁,為服務創造更多的可能性,近來普遍常見於聊天機器人應用當中。在 LINE Developer Day 2019 第二天下午有一場官方講座,主題是〈 What’s New in LINE Front-end Framework 〉( LIFF 前端技術新鮮事),講者是日本 LINE UIT 部門的產品經理、同時也是前端工程師的 Daisuke Shimizu ,所謂 UIT 就是「 UI 科技」,儼然已經是一門顯學了。

由 Daisuke Shimizu 主講〈 What's New in LINE Front-end Framework 〉( LIFF 新鮮事)。
由 Daisuke Shimizu 主講〈 What’s New in LINE Front-end Framework 〉( LIFF 新鮮事)。

LIFF 是這一兩年才有的技術,比 Messagin API 晚了一些時間。第一版( v1 )是在 2018 年 6 月開放,而最新的第二版( v2 )則是在 2019 年 10 月。相較於手機上的 iOS/Android 原生 App ,第一版的 LIFF 有 3 大優勢:

  1. 容易開發 ➡️ 基本上就是網頁
  2. 免安裝 ➡️ 有 LINE 就能運作
  3. 與 LINE 共生 ➡️ 可以使用 LINE API

而第二版又更進一步強化了 2 個優勢:

  1. 更注重 UX (用戶體驗)和 DX ( Develop by eXperience ,開發體驗)
  2. 除了 LINE 內建的瀏覽器,更支援 Chrome 等現代主流瀏覽器( Modern Browser )

基本上,LIFF v1 和 v2 從一開始的初始化呼叫就不同了, v2 甚至需要帶入 LIFF ID 。支援現代主流瀏覽器的重大意義,在於方便除錯,現場還示範了使用 VS CodeChrome 如何呼叫 console.log() 來印出除錯訊息,讓整屋子的工程師們驚呼連連。

除此之外, v2 會自動幫忙做到 LINE Login ,原則上所有的操作都是在登入的情況下進行,也因此在第一次開啟 LIFF 網頁的時候,會有一個「允許存取」的同意條款畫面,裡面提到會取得你的個人檔案( Profile )資料。

從 v2.1 開始,甚至支援使用 OpenID Connect 做 OAuth 登入,並且有一個 Bot Link 功能,可以在 LINE Login 登入的當下,提示是否將機器人(也就是 Bot )加為好友。

其他還包括對於 Deeplink (深度連結)的支援,亦即透過「 https:// 」來取代「 line:// 」開頭的網址,避免「 line:// 」網址在某些情況下會開啟失敗。至於可以在網址當中帶入 Query Parameter (也就是在網址的問號後面附帶查詢參數)的功能,沒記錯的話,在 v1 時代就曾使用過了。

其他新 API 還有像是近期被廣泛討論的 QR Code 掃碼功能(但是因為技術問題, iOS 版本的 LINE 自 v9.19.0 版本起即將暫停支援, Android 版本則不受影響,新聞稿請看這裡),以及新的分享器元件( Share Picker ),可以把圖片、影片、 Flex 等訊息轉傳給好友。

總的來說, LIFF v2 使得許多事情變得可能而且有很大的想像空間,比方說在兩天的 Keynote 中一再提到的 MINI App (但是尚未透露太多資訊),未來還會陸續釋出許多衍生服務,舉凡 LUI ( LIFF UI )、 Web Component (網頁元件)、內建的 LINE 設計系統(也許類似 Bot Designer )。在 LINE 所擘劃的藍圖裡,下一代的 LIFF 將支援 UX/DX 、 FinTech (金融科技)、 AI (人工智慧),讓更多技術落地生根。

這個場次是 LINE 官方講者,所以有提供簡報,請從這裡下載,後來官方也釋出了可供觀看的錄影(超貼心,雖然講者講日文,但是有配上英文口譯的聲音,如臨現場戴著耳機一樣)。

LIFF 的發展歷程。
LIFF 的發展歷程。
各式各樣的 LIFF 應用。
各式各樣的 LIFF 應用。
在 VS Code 中使用 console.log() 來印出除錯資訊。
在 VS Code 中使用 console.log() 來印出除錯資訊。
新的分享器元件,可以將包括 Flex 在內的訊息轉傳給親朋好友。
新的分享器元件,可以將包括 Flex 在內的訊息轉傳給親朋好友。
MINI App 。
MINI App 。
LUI 生態系,將包含網頁元件以及內建的 LINE 設計系統。
LUI 生態系,將包含網頁元件以及內建的 LINE 設計系統。
下一代的 LIFF 的未來藍圖,涵蓋了 UX/DX 、 FinTech 、 AI 。
下一代的 LIFF 的未來藍圖,涵蓋了 UX/DX 、 FinTech 、 AI 。