line / liff-playground

An example app to show the usage of LIFF's API functions

LIFF Playground

This is a web application that allows you to try out the basic features of the LINE Front-end Framework (LIFF). For example, you can deploy the following playground to your server.

• LIFF Playground

Table of contents

• Preparation
  1. Get a LIFF ID
  2. Set the LIFF ID
• Usage
  • Run on local
  • Deploy to a server

Preparation

1. Get a LIFF ID

To start the LIFF Playground, you need to obtain a LIFF ID from the LINE Developers Console. Follow the steps below to obtain a LIFF ID.

• Create a channel
• Adding a LIFF app to your channel

2. Set the LIFF ID

Set the LIFF ID obtained in the above procedure as an environment variable. Open .env and set the LIFF ID.

VITE_LIFF_ID="Your LIFF ID"

Usage

This section shows two ways to run it on local and deploy it on a server.

Run on local

To run the LIFF Playground on local, first install the dependent packages. Then run the application.

$ yarn
$ yarn dev

This will start it up. When you access the URL shown in the terminal, you can see the LIFF Playground.

Incidentally, the LIFF application endpoint requires HTTPS. To start the local server with HTTPS, run the following command instead of yarn dev.

$ yarn dev:https

Deploy to a server

This section shows an example of deploying LIFF Playground to Netlify. Install the Netlify CLI beforehand.

The following commands will build the source code and deploy it to Netlify.

$ netlify build
$ netlify deploy --prod

After executing the above, the LIFF Playground will be deployed on Netlify. And the URL of the deployed page will be displayed in the terminal.

Then register this URL on the LINE Developers Console. Register this URL as the Endpoint URL in the LIFF app settings page. See Adding a LIFF app to your channel for instructions on how to register.

That's it! The LIFF Playground will appear when you access the deployed URL. You can confirm that LINE Login and other features work properly.

liff-playground's Issues

Tt

Unfriendly error message from `liff.scanCodeV2()` on old devices

The error message shown in liff.scanCodeV2() section when the API is called on the old version device is inaccurate and leads to misunderstanding.

For example, liff.scanCodeV2() works on iOS 14.3 or later, and LINE version 11.7.0 or later (doc), but when it is called iOS 14.2.1, No permission for liff.scanCodeV2() is shown. This message is inaccurate and the correct one is something like This API is not available on this device.

I'm not sure if this error message is from LIFF SDK or the playground but if it is on the playground side problem, the error handler has room for improvement.