# LINE Front-end Framework (LIFF)
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.
For more information on functions added to LIFF v2, see the Release Notes.
LINE provides a web application (LIFF app) for developers called LIFF Playground (opens new window). LIFF Playground allows you to try out basic LIFF features on the web. The source code for LIFF Playground (opens new window) is available on GitHub.
Currently, LIFF apps are not officially supported in OpenChat, which means some functions don't work. For example, retrieving a user's profile information through a LIFF app isn't possible in most cases.
# Experience LIFF app for demo
LINE API Use Case (opens new window) provides LIFF app for demo and its source code. Open the LIFF app for demo to experience store reservations and table orders.
- Experience making restaurant or hair salon reservations with LIFF app for demo (opens new window)
- Experience a digital membership card with LIFF app for demo (opens new window)
- Experience table ordering with LIFF app for demo (opens new window)
- Experience smartphone self-checkout with LIFF app for demo (opens new window)
# Recommended operating environment
The recommended versions of operating systems and LINE for LIFF are as follows.
Which functions you can use depends on whether the LIFF app is opened in a LIFF browser or an external browser. For example, you can't use
liff.scanCode() in an external browser. For more information, see the LIFF v2 API reference.
# When the LIFF app is opened in a LIFF browser
|Item||Recommended environment||Minimum operating environment|
|iOS||Latest version. WKWebView (opens new window) is used.||In accordance with the recommended system specifications for LINE. *|
|Android||Latest version. Android WebView (opens new window) is used.||In accordance with the recommended system specifications for LINE. *|
We recommend that you use the latest versions of OS and LINE for LIFF apps. Even on versions later than the "Minimum operating environment" listed above, some features may not work or the screen may not be displayed properly depending on the settings.
* For more information on the recommended system specifications for LINE, see Recommended system specifications for LINE (opens new window) in Help Center.
# When the LIFF app is opened in an external browser
LIFF apps run on the latest version of these browsers:
Microsoft Edge, Google Chrome, Firefox, Safari
# LIFF browser
LIFF browser is a browser specifically for LIFF apps. When a user opens a LIFF URL in LINE, the LIFF app opens in a LIFF browser.
Since LIFF browser runs within LINE, the LIFF app can access user data without having to prompt users to log in. The LIFF browser also provides features that are specific to LINE, such as being able to share the LIFF app and sending a message to a friend.
# LIFF browser specifications
The LIFF browser uses WKWebView (opens new window) in iOS, and Android WebView (opens new window) in Android. As such, the specifications and behavior of the LIFF browser will also be in accordance with these schemes.
# LIFF browser cache
WKWebView (opens new window) and Android WebView (opens new window), which are used by the LIFF browser, may save and use displayed content as a cache as instructed by HTTP headers, such as Cache-Control (opens new window).
Control caching in the LIFF browser, using HTTP headers such as Cache-Control (opens new window).
There is no way to explicitly delete cache stored in the LIFF browser.
# Size of the LIFF browser
The LIFF browser can be displayed in one of these three sizes.
Set the view size when you add the LIFF app to your channel. For more information, see Adding a LIFF app to your channel.
# The action button
LIFF apps with the size of the LIFF app view set to Full display an action button in the header by default.
Users can use this button to share the LIFF app with their friends. When a user taps the action button, the following options appear:
|Share||Shares the URL of the current page via a LINE message.|
|Minimize browser||Minimizes LIFF browser. For more information, see Minimizing LIFF browser.|
|Refresh||Reloads the current page.|
The action button will be available on LINE versions 10.12.0 or later for iOS and Android.
If the URL of the current page doesn't start with the URL specified in Endpoint URL of the LINE Developers Console, the URL can't be obtained and sharing will fail.
Enable Module mode of the LIFF app in the LINE Developers Console to hide the action button. For more information, see Adding a LIFF app to your channel.
# Development guidelines
When developing web apps using LIFF, follow these LIFF app development guidelines.
# Tools to support LIFF app development
LINE provides the following tools to help developers develop LIFF apps more smoothly.
|Tool name||What this tool can do|
|LIFF starter app||This is a starter app for those new to learning about LIFF. The LIFF starter app is only a demo of the LIFF app initialization to help you understand how to start developing LIFF apps. It's recommended for those who want to build something that works first and get a rough idea of what LIFF is all about.|
|Create LIFF App||This CLI tool allows you to build a development environment for LIFF apps with a single command. Like Create React App (opens new window) by React or Create Next App (opens new window) by Next.js, by answering questions from Create LIFF App, a development environment including the LIFF app template for you is generated and development can begin immediately.|
|LIFF Playground (opens new window)||You can try out LIFF's features online. The source code for LIFF Playground (opens new window) is available on GitHub, so developers can set their LIFF ID and deploy their own LIFF Playground on the server.|
To enable the use of the LIFF app by the end user, follow these steps: