LINE DevDay 2019 —LIFF 的大量更新與後續發展情報!

Richard Lee
6 min readNov 24, 2019

--

LIFF v2 強勢登場!

在 LINE 的開發者產品當中,我個人最感興趣的不外乎就是 LIFF 了,讓開發者可以在聊天界面當中嵌入網頁進行更複雜的 UI 互動,達成很多傳統 Chatbot 介面中無法實現的事情。

而在今年 LINE Developer Day 2019 當中,當然也是有大量相關的議程,甚至還準備了實體攤位與大家交流,就讓我們一起來看看今年 LIFF 有什麼新發展!

以下是這次 LIFF 相關演講議程以及與 LIFF 攤位交流後的各項心得彙整:

LIFF v2, the latest Webview SDK lets you leverage LINE

Takuya Okamoto — LINE Kyoto Developer Division, UIT Team Frontend Engineer

What’s New in LINE Front-end Framework

Daisuke Shimizu — LINE UIT Department1 Product Manager / Front-end Engineer

LIFF 是什麼?

LIFF 有三種大小樣式

LINE Front-end Framework 簡稱 LIFF 框架,讓開發者可以建立輕量型的應用在對話視窗當中,並且提供取得使用者基本資訊、或是發送訊息的功能。

LIFF 推出一年半後有了 LIFF v2 大改版

這過去推出的這一年半之中,也有各式各樣的應用,包含遊戲、付款、付款跟電商等。

日本星巴克的隨行卡便是透過 LIFF(右二)

LIFF v1 為人詬病的問題

然而在 LIFF 剛推出的第一版,有不少小毛病是讓開發者和使用者都感到困擾的:

  • 只能透過 LINE deeplink 開啟 LIFF,若使用者沒有安裝 LINE 或者是在電腦就無法點擊連結
  • 在 LINE WebView 下幾乎沒辦法用常見的瀏覽器除錯工具來開發,只能藉用一些第三方套件

LIFF v2 全新登場!

於是在今年的 10/16 時,LINE 正式宣佈推出了 LIFF v2 版本,針對以上問題都有了具體的改善!

  • 可以透過 https://liff.line.me/{liffid} 這樣的網址來分享 LIFF,在手機跟電腦上都可以正常瀏覽
  • 呈上,所以不需要受困於 LINE WebView 的限制,可以使用各式瀏覽器來開發除錯
一個網址,各種情境都支援

除此之外,更有新功能:

  • 可以在 LIFF 當中開啟 LINE 掃描 QR Code 的功能,並且讀取資料
  • 也結合 LINE Things 相關的藍芽功能可以進行 IoT 相關的硬體連接

基於 LINE Login 的大改版

能夠在 LIFF v2 支援非 LINE 的 WebView 環境,最主要的原因是 LIFF v2 是基於 LINE Login 出發,若使用者在非 LINE 的環境下,許多 LIFF API 都需要先讓使用者觸發 LINE 登入,才能夠得到使用者 LINE 帳號的資訊。

官方公告部分 LIFF v1 將需要進行移轉

LIFF v1 的開發者也請注意,在 2020/2 月開始,若過去開發的 LIFF v1 是放在 Messaging API channel 下的話,需要改到 LINE Login channel 才能正常使用,此一調整可能會影響既有的 LIFF 網址,這部分資訊可以參考官方於 2019/11/11 時釋出的公告,請務必及早做準備。

LIFF v2 的官方案例:馬拉松報到及日本電車查詢

LINE 也在近期的一些官方合作當中使用了 LIFF v2,由於有了 QR Code 以及一些新功能的支援,就可以達到在馬拉松會場掃 QR Code 簽到這樣的機制,實現了過去在 LINE 環境下 O2O 情境難以做到的事情。

用 QR Code 來做活動的簽到

LIFF v2 火力展示

為了這次的 LINE DevDay 2019 的攤位,LIFF 團隊特別開發了 LIFF Playground 的 Chatbot 與 LIFF,讓大家可以很方便的測試各項 API 並且試玩,看看 LIFF v2 能做到哪些功能:

立刻掃描上面 QR Code 連到 LIFF Playground 試玩,也可以看看在正常瀏覽器上的 LIFF 頁面

後續還有更多

分享功能即將推出

在大會上也宣布在不久的將來,將會提供分享介面 API,讓使用者可以在 LIFF 當中選擇、分享內容到其他聊天視窗。

而針對開發者的方面,也即將推出 TypeScript 以及 NPM 的支援,可以完整結合目前當代先進的前端開發環境,對開發者的體驗更佳流暢。

而在時間未定的未來,LINE 更將進一步推出 LIFF UI 套件(簡稱 LUI),讓開發者可以快速地打造出 LIFF 上的介面,更輕易地做出符合 LINE 設計規範的互動介面。

LUI 還在相當早期的階段,目前資訊不多

結論:LIFF 大爆發的一年,現在上車正是時候!

從上述更新分享可以發現,LINE 官方對於 LIFF 可以說是加足了資源,誠如在 DevDay 2019 演講上面強調的,目標是大幅改善 UX(使用者體驗)以及 DX(開發者體驗),同時因為陸續的新功能釋出,可以適用的使用情境也更加豐富。

目前還有許多更新正在路上即將推出,據我在現場與 LIFF 團隊交流的心得,發現內部確實安排很多工程與產品資源在此一項目上,LIFF 一定會在未來 LINE 開發者生態系中扮演相當重要的角色。

事不宜遲,馬上打開 LIFF 官方文件開始學習吧!若是有任何相關的問題都歡迎留言或是與我聯繫討論。

--

--

Richard Lee

Cofounder & CTO of @icooktw. LINE API Expert. #ForbesU30Asia