Skip to content

Instantly share code, notes, and snippets.

@nottyo
Created April 25, 2022 07:21
Show Gist options
  • Save nottyo/031b269993a6f4ec81220bff9eee3272 to your computer and use it in GitHub Desktop.
Save nottyo/031b269993a6f4ec81220bff9eee3272 to your computer and use it in GitHub Desktop.
Handle LIFF LINE In-App Browser
import { useEffect, useState } from "react";
import liff from "@line/liff";
import "./App.css";
function App() {
const [message, setMessage] = useState("");
const [data, setData] = useState({
isInLineInAppBrowser: false
});
const [error, setError] = useState("");
useEffect(() => {
liff
.init({
liffId: import.meta.env.VITE_LIFF_ID
})
.then(() => {
setMessage("LIFF init succeeded.");
const { userAgent } = navigator;
setData({
isInLineInAppBrowser: !liff.isInClient() && userAgent.includes("Line")
});
})
.catch((e: Error) => {
setMessage("LIFF init failed.");
setError(`${e}`);
});
}, [message]);
const handleClick = async () => {
const liffUrl = await liff.permanentLink.createUrlBy(window.location.href);
window.location.href = liffUrl;
};
return (
<div className="App">
<h1>create-liff-app</h1>
{data && data.isInLineInAppBrowser && (
<div>
<p>You're opening LIFF App on LINE In-App Browser...</p>
<button onClick={handleClick}>Open in LINE</button>
</div>
)}
</div>
);
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment