$30 off During Our Annual Pro Sale. View Details »

Introduction to LIFF/LINE Mini App - Characteristics and Practical Development

Introduction to LIFF/LINE Mini App - Characteristics and Practical Development

Ching-Wen Hu
LINE / Developer Product Management team / Project Manager
Taiki Ikeda
LINE / Front-end Dev7 / Front-end Engineer



November 11, 2021

More Decks by LINE DEVDAY 2021

Other Decks in Technology


  1. None
  2. - Project Manager - LINE Front-end Framework (LIFF) / LINE

    Login - Former QA Lead of LIFF / LINE Login Hu Ching-wen (Maru) - Frontend Engineer - LINE Front-end Framework (LIFF) / LINE Design System Global (LDSG) Ikeda Taiki
  3. What is LIFF?

  4. - LINE Front-end Framework (LIFF) - Integration with LINE platform

    - Authentication - User profile - Messaging API - JS SDK - Lineup - LIFF App, LINE MINI App What is LIFF
  5. LIFF vs MINI Excerpted from LINE API Use Case LIFF

    App LINE MINI App Tech Stack LIFF SDK LIFF SDK Operation Env LINE App (SP) General Browsers (PC, SP) LINE App (SP) LINE review and approval None Required Service Message chat room Not available Available to all apps
  6. Samples for LIFF App① LINE Family Services LINE Official Account

    LINE NEWS LINE Stickershop
  7. Samples for LIFF App② Third Party Apps プレイルーム THE BINGO

    enpay スマート相続アプリ
  8. Samples for LINE MINI App① Table order system : アガリコ餃⼦楼

    新宿⼩⽥急ハルク店 Step1: Scan code Order Reception Check out 80~90% of customers who visit the store use the LINE MINI app.
  9. Samples for LINE MINI App② Reservation and membership card system:

    eimʢΤΠϜʣ Step1: Scan code Member’s card Service message Official account Coupon More than 70% of customers visiting shops have become members via the LINE MINI App
  10. Characteristics of LIFF The strengths of LIFF as a platform

    Channel consent simplification Cross-browser support Modal window which enables users to focus on main tasks Provision of utilities Powerful and unique functions LINE Login integration
  11. LINE Login integration Can get user profile information safely without

    complex settings Step1: Scan code
  12. Initialization Process with LIFF SDK

  13. Cross-browser support LIFF Playground

  14. Powerful and unique functions -*''4IBSF5BSHFU1JDLFS Select multiple items at once

  15. - liff.scanCodeV2 - Code scan function using WebRTC - liff.isApiAvailable

    - liff.getLineVersion - liff.getOS Provision of utilities
  16. Modal window which enables users to focus on main tasks

    Improve UX of users leaving services unintentionally (coming soon)
  17. Simplified user agreement Integrate the agreement process for LINE MINI

    App into one step When accessing LINE MINI App A for the first time When accessing LINE MINI App B for the first time
  18. - “liff.referrer” query parameter - You can get the referrer

    of the page before transition between LIFFs from URL - Dark mode support (coming soon) What else?
  19. - LIFF - https://developers.line.biz/en/docs/liff/#line-front-end-framework - LINE MINI App - https://developers.line.biz/en/docs/line-mini-app/

    - LINE API Use Case - https://lineapiusecase.com/en/api/miniliff.html Visit LINE Developers for more details J
  20. Getting Started with LIFF Development - Register your LIFF application

    on the LINE Developers Console - Create LIFF application with LIFF JavaScript SDK
  21. Register LIFF App Create Provider Create Channel Create LIFF

  22. Register LIFF App


  24. Create Web App with LIFF SDK $ npm install @line/liff

    $ yarn add @line/liff How to install LIFF SDK
  25. Create Web App with LIFF SDK How to write this

    on Next.js / Nuxt.js / Svelte…? Initialize LIFF
  26. npx @line/create-liff-app

  27. Deploy your app and make sure that you have right

    Endpoint URL
  28. How to Debug on LINE

  29. Summary - Register LIFF on Developers Console - Build LIFF

    App with LIFF SDK - Installation - liff.init - npx @line/create-liff-app - Debug on LINE
  30. Pain Points on Developer Experience • Potential issues of documentation

    • Hard to debug • Cannot see the logs • Local development • Hard to customize Please check next session: For Improvement of Developer Experience of All LIFF App Developers
  31. Thank You