LINE LIFF（LINE Front-end Framework）是 LINE 提供的前端框架，允許開發者在 LINE App 內嵌入網頁應用。對於自助洗衣場景，LIFF 的最大優勢在於零安裝門檻——消費者不需要下載任何 App，直接在 LINE 內就能完成所有操作。Cloud Monster 的 LIFF 應用目前承載了選擇門市、查看機台狀態、選擇洗程、行動支付、查看使用紀錄等核心功能，月活躍用戶超過 1,200 人，平均每次工作階段時長約 3 分鐘。
LIFF 的初始化流程是開發中最需要注意的環節。首先需要在 LINE Developers Console 建立 LIFF App 並取得 LIFF ID，接著在前端程式碼中呼叫 liff.init() 進行初始化。初始化成功後，可以透過 liff.getProfile() 取得用戶的 LINE 顯示名稱與大頭貼，透過 liff.getAccessToken() 取得用於後端驗證的 Access Token。我們建議在初始化完成前顯示品牌載入畫面，避免用戶看到未完成渲染的頁面。同時要處理各種邊界情況，例如用戶在外部瀏覽器開啟 LIFF URL、Access Token 過期等。
支付整合是技術難度最高的部分。Cloud Monster 採用 LINE Pay Online API v3 進行付款處理。流程為：前端送出訂單資訊到後端 → 後端呼叫 LINE Pay Reserve API 取得交易編號 → 前端導向 LINE Pay 付款頁面 → 用戶確認付款後回到 LIFF 頁面 → 後端呼叫 Confirm API 確認交易 → 確認成功後透過 MQTT 發送啟動指令到機台。整個流程需要妥善處理各種失敗情境，包括付款超時、網路中斷、重複確認等。我們的做法是在每個步驟都記錄交易狀態，並實作了自動重試與退款機制。
效能優化方面，由於 LIFF 在 LINE App 的 WebView 中運行，可用的運算資源比原生瀏覽器少。我們採用了幾項優化策略：使用 React 搭配 Vite 進行程式碼分割，首屏載入的 JS Bundle 控制在 150KB 以內；圖片全部使用 WebP 格式並實作懶載入；API 請求使用 SWR 進行快取管理，避免重複請求。此外，我們也針對 LINE App 的 WebView 進行了大量的相容性測試，確保在 iOS 和 Android 上都有一致的體驗。最終成果是首屏載入時間控制在 1.5 秒以內，付款完成到機台啟動的延遲低於 3 秒。