# Opening a LIFF app
The LIFF app can be opened in a LIFF browser or an external browser. This section describes the operations that allow users to open the LIFF app.
Users access the LIFF URL.
The LIFF URL is issued when Adding the LIFF app to your channel.
For example, enter the URL on the LINE chat screen and tap the URL displayed in the bubble to open the LIFF app.Users agree to grant the required permissions to the LIFF app.
The LIFF app is displayed.
When users access the LIFF URL, the LIFF app will open in a LIFF browser on LINE, or an external browser. Which environment is used depends on the Universal Links (opens new window) or App Links (opens new window) specifications.
It's possible to open a LIFF app in native apps other than LINE. However, we don't guarantee where it will be opened, as it depends on the WebView specifications of the native app.
# Behaviors from accessing the LIFF URL to opening the LIFF app
As announced on June 29, 2020, the LIFF app can now use the path (/path
) and query parameter (?key=value
) entered in the Endpoint URL of the LINE Developers Console.
To use the new specs, set Methods for converting additional information in the LIFF URL to Concatenate.
We recommend using the new specs in the future.
Note the following:
- If your existing LIFF app doesn't support the new specs, set to Replace (Backward compatibility mode). In this case, the LIFF app isn't affected by the new specs.
- When adding a new LIFF app, it's set to Concatenate. The setting items aren't displayed. Edit them as needed.
- You must use LIFF SDK v2.3.0 or later when using Concatenate. If you use versions earlier than v2.3.0, even if Concatenate is selected, additional information will be processed according to the specifications of Replace (Backward compatibility mode).
The following describes how to set up two redirect destinations so that the LIFF app opens correctly when users access the LIFF URL, and when to execute the liff.init()
method when users access the LIFF URL.
Redirect to | Description |
---|---|
Primary redirect URL | The first time users access the LIFF URL, they are redirected from the LIFF server to this URL. When users are redirected to this URL, execute the liff.init() method. |
Secondary redirect URL | When executing the liff.init() method, users are redirected to this URL. Once users are redirected to this URL, the LIFF app page is displayed. |
If executing the liff.init()
method at the timing other than accessing the primary redirect URL, INIT_FAILED
is returned and the LIFF app can't be opened.
# Create a LIFF URL
The LIFF URL is a URL that indicates the LIFF server provided by LINE. A LIFF URL is issued by adding the LIFF app to your channel.
# Create a primary redirect URL
The primary redirect URL is always the URL specified in the Endpoint URL of the LINE Developers Console.
For the primary redirected URLs, regardless of the Methods for converting additional information in the LIFF URL setting, the additional information specified in the LIFF URL (for example: path_A/?key1=value1#URL-fragment
) are all included in the liff.state
query parameter.
For example: https://example.com/2020campaign/?key=value&liff.state=urlencoded(path_A/?key1=value1#URL-fragment)
If you don't specify any additional information in the LIFF URL, the liff.state
query parameter is omitted.
# Create a secondary redirect URL
The secondary redirect URL depends on the setting of the Methods for converting additional information in the LIFF URL in LINE Developers Console and the URL that users access.
# When setting [Methods for converting additional information in the LIFF URL] to [Concatenate]
The paths and query parameters (/2020campaign/?key=value
) specified in the Endpoint URL of the LINE Developers Console are included in the secondary redirect URL.
URL that users access | Secondary redirect URL |
---|---|
LIFF URL (1) For example: https://liff.line.me/{liffId} | The URL specified in Endpoint URL of the LINE Developers Console. For example: https://example.com/2020campaign/?key=value |
The LIFF URL including additional information (2) For example: https://liff.line.me/{liffId}/path_A/?key1=value1#URL-fragment | As shown in (2) of the below figure, the URL is a combination of 3 types of information.
https://example.com/2020campaign/path_A/?key=value&key1=value1#URL-fragment |
# When setting [Methods for converting additional information in the LIFF URL] to [Replace (Backward compatibility mode)]
The paths and query parameters (for example: /2020campaign/?key=value
) specified in the Endpoint URL of the LINE Developers Console may not be included in the secondary redirect URL.
URL that users access | Secondary redirect URL |
---|---|
LIFF URL | The URL specified in Endpoint URL of the LINE Developers Console. For example: https://example.com/2020campaign/?key=value Note: Depending on the setting of Endpoint URL, the specified paths and query parameters ( /2020campaign/?key=value ) may not be included in the secondary redirect URL. |
The LIFF URL including additional information | The URL combines these 2 types of information.
https://example.com/path_A/?key1=value1#URL-fragment Note: The paths and query parameters ( /2020campaign/?key=value ) specified in Endpoint URL aren't included in the secondary redirect URL. |
If the current page URL doesn't begin with the URL specified in the Endpoint URL when executing the liff.permanentLink.createUrl()
method, you aren't able to get a permanent link.
Especially when setting Methods for converting additional information in the LIFF URL to Replace (Backward compatibility mode), the paths and query parameters (/2020campaign/?key=value
) specified in Endpoint URL may not be included in the secondary redirect URL.
In this case, you can't get a permanent link because the liff.permanentLink.createUrl()
method meets the above conditions.
# Opening a LIFF app from another LIFF app
If you click the link to another LIFF app within a LIFF app whose screen is on Full
display, you can display the other app while still having the LIFF browser open.
The LIFF browser doesn't close, so you can return to the original LIFF app with the return button from the LIFF browser.
Even though liff.init()
executes liff.login()
to perform a LINE login process when transitioning to another LIFF app, the Promise
object is not resolved or rejected and remains in a pending state during the screen transition. liff.init()
is resolved or rejected when the endpoint URL of the LIFF app is opened after the login process.
- LIFF SDK v2.4.1 or later and LINE 10.18.0 or later
- The original LIFF app screen is set to
Full
display - The LIFF app to which you are moving is correctly initialized by
liff.init()
If redirectUri
is specified in the liff.login()
argument, it verifies that the specified URL matches the domain name and path combination of the Endpoint URL. If the URL doesn't match, an error message will be displayed and LINE Login will fail.
if (!liff.isLoggedIn()) {
liff.login({ redirectUri: "https://example.com/path" });
//Verify that the domain name and path (https://example.com/path) match the endpoint URL.
}
You can verify that the Endpoint URL is set correctly by specifying redirectUri
. The query parameter (?key=value
) and URL fragment (#URL-fragment
) aren't validated.
The criteria for URL matching will differ depending on the Method for converting additional information in the LIFF URL setting. For more information, see URL validation in the LIFF documentation.
- If the screen size of the original LIFF app is set to
Tall
orCompact
, the browser will initially close regardless of the screen size of the LIFF app to which you want to move, before the destination LIFF app is displayed. - If the screen size of the original LIFF app is set to
Full
, the screen size of the destination LIFF app will be displayed inFull
, even if the destination LIFF app is set toTall
orCompact
.
If you are using an older version of the LIFF SDK, you may experience the following unexpected behaviors:
- Despite that you moved from a LIFF URL specified by Path (
/path
) to a different LIFF app, you still end up on the URL specified in the Endpoint URL of the LINE Developers Console. - If you click cancel on the Consent screen where you seek user authorization, you must close your LIFF browser once.
- If the destination is a LINE MINI App, the design of the LIFF browser header does not automatically change.
When designing to enable transitions between multiple LIFF apps, it is recommended that you use the latest version of the LIFF SDK.