Opening a LIFF app

# 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.

  1. 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.

    Open LIFF app

  2. Users agree to grant the required permissions to the LIFF app.

    The LIFF app is displayed.

Environment where the LIFF app opens

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

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.

Redirect flow

Note on initializing the LIFF app

Don't change the URL during server or front-end processing before the Promise object returned by the liff.init() method is resolved. If you change the URL, it will return 'INIT_FAILED' and the LIFF app can't be opened.

For more information on other precautions when initializing the LIFF app, see Initializing the LIFF app.

# Create a LIFF URL

The LIFF URL is a URL that indicates the LIFF server provided by LY Corporation. 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.

Additional information specified in the LIFF URL

All additional information specified in the primary redirected URLs (e.g. path_A/?key1=value1#URL-fragment) is included in the liff.state query parameter.

e.g. 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 URL that users access.

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)
e.g. https://liff.line.me/{liffId}		 The URL specified in Endpoint URL of the LINE Developers Console.
e.g. https://example.com/2020campaign/?key=value
The LIFF URL including additional information (2)
e.g. 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.
  • The domain name specified in Endpoint URL (https://example.com)
  • The paths and query parameters (/2020campaign/?key=value) specified in Endpoint URL.
  • The additional information specified in the LIFF URL (/path_A/?key1=value1#URL-fragment)
e.g. https://example.com/2020campaign/path_A/?key=value&key1=value1#URL-fragment

Endpoint URL

# Opening a LIFF app from another LIFF app (LIFF-to-LIFF transition)

When a LIFF app is open in the LIFF Browser, you can click on the link to another LIFF app to display the other app while keeping the LIFF Browser open. Since the LIFF browser doesn't close during LIFF-to-LIFF transitions, you can click the return button on the LIFF browser to return to the LIFF app from which you transitioned.

LIFF-apps-transition

Unexpected behaviors

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.

The message, "Switched to the {LIFF app name} app." has nothing to do with the success of LIFF-to-LIFF transition

When you access another URL from a LIFF app, a message saying, "Switched to the {LIFF app name} app." may be displayed.

"Switched to the {LIFF app name} app." may be displayed

This message is displayed when you open a LIFF app with a different LIFF ID than LIFF app that was opened first (the LIFF app from which the transition is made). Whether or not this message is displayed has nothing to do with the success of LIFF-to-LIFF transitions.

# The conditions that make LIFF-to-LIFF transitions possible

LIFF-to-LIFF transitions are possible when all of the following conditions are met:

  • 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()

# On the liff.init() Promise object on LINE versions earlier than 12.13.0

On LINE versions earlier than 12.13.0, when transitioning to another LIFF app, liff.init() method will automatically execute liff.login() method internally for the LINE Login process. Therefore, during this screen transition, the Promise object will not be resolved or rejected and will remain in the pending state. Only when the endpoint URL of the LIFF app is opened after the login process is complete, will the liff.init() object either be resolved or rejected.

# Behavior based on screen size of the LIFF app

  • If the screen size of the original LIFF app is set to Tall or Compact, 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 in Full, regardless of the destination LIFF app screen size specification.
  • If the screen size of the original LIFF app is set to Full and the screen size of the transition destination LIFF app is Tall or Compact, the action button will not be displayed in the LIFF app after the transition.

# About the "chat_message.write" scope after transitioning between LIFF apps

The chat_message.write scope after a transitioning between LIFF apps is enabled or disabled depending on the transition destination URL.

Transition destination URL Example URL The chat_message.write scope after transition
LIFF URL https://liff.line.me/{liffId} Enabled
LIFF URL including additional information https://liff.line.me/{liffId}/path_A/?key1=value1#URL-fragment Enabled
Endpoint URL https://example.com Disabled

If the chat_message.write scope is enabled, the liff.sendMessages() method is available in the transition destination LIFF app.

# On LINE versions earlier than 12.13.0, the "chat_message.write" scope will be disabled

On LINE versions earlier than 12.13.0, after transitioning from LIFF A to LIFF B, the chat_message.write scope will be disabled in LIFF B, and the channel consent screen won't be displayed either. Therefore, the liff.sendMessages() method, which requires the chat_message.write scope, will no longer be available in LIFF B.

# Get URL from before LIFF-to-LIFF transition

When you open a LIFF app during a LIFF-to-LIFF transition, the query parameter, liff.referrer, will be given to the URL of the LIFF app after the transition. The value of liff.referrer will be set to the percent-encoded (opens new window) URL of the address of the Referer request header received by the LIFF server during the LIFF-to-LIFF transition. By checking the value of the liff.referrer, you can get the URL before the transition.

The following is an example of how liff.referrer is given during LIFF-to-LIFF transition.

LIFF app URL before transition URL of the link LIFF app URL after transition (after executing liff.init() method)
Given https://first.example.com/ https://liff.line.me/{LIFF ID}
(LIFF URL)		 ✅ https://second.example.com/?liff.referrer=https%3A%2F%2Ffirst.example.com%2F *1
Not given https://first.example.com/ https://second.example.com/
(Endpoint URL)		 ❌ https://second.example.com/ *2

*1 In addition to liff.referrer, the liff.* query parameter may be given to the LIFF app URL after the transition.
*2 If the endpoint URL of the LIFF app is opened directly, liff.referrer will not be given.