Merge pull request #37 from line/support-mini-features

MINI App Features support

Author: kazuma0129

.env

@@ -1 +1,3 @@
-VITE_LIFF_ID=1656508316-k7jNojXm
+VITE_LIFF_ID=2006142821-boxjqY7m
+VITE_LIFF_ID_MINI=2006593963-DPoAqdzG
+VITE_LIFF_ID_MINI_PREVIEW=2006593962-KMmZJVxl

package.json

@@ -15,7 +15,8 @@
     "lint": "eslint \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "@line/liff": "2.23.1",
+    "@line/liff": "2.25.1",
+    "@line/liff-common-profile-plugin": "0.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

src/qr-code.png renamed to public/assets/qr_liff.png

@@ -21,6 +21,11 @@ body {
   height: auto;
 }
 
+.applicationNotice {
+  color: #777777;
+  font-size: 15px;
+}
+
 @media only screen and (max-width: 375px) {
   .container {
     width: auto;

public/assets/qr_mini.png

@@ -1,33 +1,37 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import liff from '@line/liff'
 import styles from './App.module.css'
 import Header from './components/Header'
 import Snippet from './components/Snippet'
 import Input from './components/Input'
-import { FilterContext, FilterTypes } from './Context'
-import qrCode from './qr-code.png'
-import { SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST } from './constants'
-
-const isMINI = new URLSearchParams(location.search).has('mini')
-const filter = isMINI ? FilterTypes.MINI : FilterTypes.LIFF
+import { SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST, QR_IMG_MAP } from './constants'
+import { FilterTypes } from './FilterTypes'
+import { AppContext } from './Context'
 
 function App() {
+  const { appUrl, filter } = useContext(AppContext)
+
   let isLoggedIn = false
   try {
     isLoggedIn = liff.isLoggedIn()
   } catch (e) {
     console.log(e)
   }
+
   return (
-    <FilterContext.Provider value={filter}>
+    <>
       <Header />
       <div className={styles.container}>
+        {filter === FilterTypes.MINI || filter === FilterTypes.MINI_PREVIEW ? (
+          <div className={styles.applicationNotice}>
+            本「LINEミニアプリプレイグラウンド」は日本限定のサービスです。
+            <br />
+            This “LINE MINI App Playground” is available only in Japan.
+          </div>
+        ) : null}
         <div className={styles.liffIdBox}>
-          <Input
-            readonly
-            value={`LIFF URL: https://liff.line.me/${import.meta.env.VITE_LIFF_ID.toString()}`}
-          />
-          <img src={qrCode} className={styles.qrCode} />
+          <Input readonly value={`URL: ${appUrl}`} />
+          <img src={QR_IMG_MAP[filter]} className={styles.qrCode} />
         </div>
         <h1>Client APIs</h1>
         {!isLoggedIn ? (
@@ -226,7 +230,9 @@ function App() {
           docUrl="https://developers.line.biz/en/reference/liff/#share-target-picker"
           needRequestPayload={true}
           hideResponse={true}
-          defaultRequestPayload={SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST[0].value}
+          defaultRequestPayload={
+            SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST[0].value
+          }
           pulldownOptions={SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST}
           skipAutoRun={true}
           runner={async (options) => {
@@ -291,22 +297,70 @@ function App() {
             return await liff.permanentLink.createUrlBy(url)
           }}
         />
-        <Snippet
-          apiName="liff.i18n.setLang"
-          version="2.21.0"
-          docUrl="https://developers.line.biz/ja/reference/liff/#i18n-set-lang"
-          needRequestPayload={true}
-          skipAutoRun={true}
-          hideResponse={true}
-          defaultRequestPayload={'en'}
-          runner={async (lang) => {
-            return await liff.i18n.setLang(lang)
-          }}
-        />
+        {(filter === FilterTypes.MINI ||
+          filter === FilterTypes.MINI_PREVIEW) && (
+          <>
+            <Snippet
+              apiName="liff.createShortcutOnHomeScreen"
+              version="2.23.0"
+              docUrl="https://developers.line.biz/en/reference/liff/#create-shortcut-on-home-screen"
+              needRequestPayload={true}
+              defaultRequestPayload={JSON.stringify(
+                {
+                  url: appUrl,
+                },
+                null,
+                4
+              )}
+              runner={async (payload) => {
+                const parsed = JSON.parse(payload)
+                await liff.createShortcutOnHomeScreen(parsed)
+              }}
+              skipAutoRun={true}
+              isInLIFF={false}
+            />
+            <Snippet
+              apiName="liff.$commonProfile.getDummy"
+              version="2.19.0"
+              docUrl="https://developers.line.biz/en/docs/partner-docs/quick-fill/overview/"
+              needRequestPayload={true}
+              defaultRequestPayload={JSON.stringify(
+                [
+                  [
+                    'family-name',
+                    'given-name',
+                    'family-name-kana',
+                    'given-name-kana',
+                    'sex-enum',
+                    'bday-year',
+                    'bday-month',
+                    'bday-day',
+                    'tel',
+                    'email',
+                    'postal-code',
+                    'address-level1',
+                    'address-level2',
+                    'address-level3',
+                    'address-level4',
+                  ],
+                  1,
+                ],
+                null,
+                4
+              )}
+              runner={async (p) => {
+                const payload = JSON.parse(p)
+                return await liff.$commonProfile.getDummy(...payload)
+              }}
+              inClientOnly={true}
+              skipAutoRun={true}
+              isInLIFF={false}
+            />
+          </>
+        )}
       </div>
-    </FilterContext.Provider>
+    </>
   )
 }
 
-
 export default App

public/assets/qr_mini_preview.png

@@ -1,10 +1,14 @@
 import React from 'react'
-
-export const FilterTypes = {
-  LIFF: 'LIFF',
-  MINI: 'MINI'
-} as const
+import { FilterTypes } from './FilterTypes'
 
 export type FilterType = keyof typeof FilterTypes
 
-export const FilterContext = React.createContext<FilterType>(FilterTypes.LIFF)
+export const AppContext = React.createContext<{
+  filter: FilterType,
+  appId: string,
+  appUrl: string
+}>({
+  filter: FilterTypes.LIFF,
+  appId: import.meta.env.VITE_LIFF_ID,
+  appUrl: `https://liff.line.me/${import.meta.env.VITE_LIFF_ID}`
+})

src/App.module.css

@@ -0,0 +1,5 @@
+export const FilterTypes = {
+  LIFF: 'LIFF',
+  MINI: 'MINI',
+  MINI_PREVIEW: 'MINI_PREVIEW'
+} as const

src/App.tsx

@@ -17,6 +17,10 @@
   align-items: center;
 }
 
+.left {
+  flex: 1;
+}
+
 .left a {
   text-decoration: none;
   color: #000;
@@ -41,4 +45,7 @@
   .gitHubButton {
     display: none;
   }
+  .right {
+    flex-basis: 100px;
+  }
 }

src/Context.tsx

@@ -1,16 +1,22 @@
 import liff from '@line/liff'
-import React from 'react'
+import React, { useContext, useMemo } from 'react'
 import styles from './Header.module.css'
 import Button from './Button'
+import { AppContext } from '../Context'
 
 export default function Header() {
+  const {filter, appId} = useContext(AppContext);
+  const appName = useMemo(() => {
+    return filter === 'LIFF' ? 'LIFF Playground' : 'LINE MINI App Playground'
+  }, [filter])
+
   const openGitHub = () => {
     window.open(`https://github.com/line/liff-playground`, '_blank')
   }
 
   const openInApp = () => {
     window.open(
-      `https://line.me/R/app/${import.meta.env.VITE_LIFF_ID}`,
+      `https://line.me/R/app/${appId}`,
       '_blank'
     )
   }
@@ -20,7 +26,7 @@ export default function Header() {
       <div className={styles.header}>
         <div className={styles.left}>
           <a href='/'>
-            <h1>LIFF Playground</h1>
+            <h1>{appName}</h1>
           </a>
         </div>
         <div className={styles.right}>

src/FilterTypes.ts

@@ -4,7 +4,8 @@ import Input from './Input'
 import styles from './Snippet.module.css'
 import Tag from './Tag'
 import TextArea from './TextArea'
-import { FilterContext, FilterTypes } from '../Context'
+import { AppContext } from '../Context'
+import { FilterTypes } from '../FilterTypes'
 import Pulldown from './Pulldown'
 
 interface SippetProps {
@@ -73,8 +74,8 @@ export default function Snippet({
   }, [skipAutoRun, callRunner])
 
   return (
-    <FilterContext.Consumer>
-      {(filter) =>
+    <AppContext.Consumer>
+      {({ filter }) =>
         ((filter === FilterTypes.LIFF && isInLIFF) ||
           (filter === FilterTypes.MINI && isInMINI)) && (
           <div className={styles.snippet}>
@@ -153,6 +154,6 @@ export default function Snippet({
           </div>
         )
       }
-    </FilterContext.Consumer>
+    </AppContext.Consumer>
   )
 }

src/components/Header.module.css

@@ -1,4 +1,6 @@
-const base = new URL(location.href).origin;
+import { FilterTypes } from "./FilterTypes"
+
+const base = new URL(location.href).origin
 export const SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST = [
   {
     label: 'text',
@@ -54,3 +56,9 @@ export const SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST = [
   label,
   value: JSON.stringify(value, null, 4),
 }))
+
+export const QR_IMG_MAP = {
+  [FilterTypes.LIFF]: `${base}/assets/qr_liff.png`,
+  [FilterTypes.MINI]: `${base}/assets/qr_mini.png`,
+  [FilterTypes.MINI_PREVIEW]: `${base}/assets/qr_mini_preview.png`,
+}

src/components/Header.tsx

@@ -1,15 +1,48 @@
 import liff from '@line/liff'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { LiffCommonProfilePlugin } from '@line/liff-common-profile-plugin'
 import './main.css'
 import App from './App'
+import { FilterTypes } from './FilterTypes'
+import { AppContext } from './Context'
+
+const isMINI = new URLSearchParams(location.search).has('mini')
+const isPreviewMINI = new URLSearchParams(location.search).has('mini_preview')
+
+const filter = isPreviewMINI
+  ? FilterTypes.MINI_PREVIEW
+  : isMINI
+  ? FilterTypes.MINI
+  : FilterTypes.LIFF
+
+const appId = {
+  [FilterTypes.LIFF]: import.meta.env.VITE_LIFF_ID,
+  [FilterTypes.MINI]: import.meta.env.VITE_LIFF_ID_MINI,
+  [FilterTypes.MINI_PREVIEW]: import.meta.env.VITE_LIFF_ID_MINI_PREVIEW
+}[filter]
+
+const appUrl =
+  filter === FilterTypes.LIFF
+    ? `https://liff.line.me/${appId}`
+    : `https://miniapp.line.me/${appId}`
+
+const injectPlugins = () => {
+  liff.use(new LiffCommonProfilePlugin())
+}
+
+if (filter === FilterTypes.MINI || filter === FilterTypes.MINI_PREVIEW) {
+  injectPlugins()
+}
 
 liff
-  .init({ liffId: import.meta.env.VITE_LIFF_ID || '' })
+  .init({ liffId: appId })
   .then(() => {
     ReactDOM.render(
       <React.StrictMode>
-        <App />
+        <AppContext.Provider value={{ filter, appId, appUrl }}>
+          <App />
+        </AppContext.Provider>
       </React.StrictMode>,
       document.getElementById('root')
     )

src/components/Snippet.tsx

@@ -2,6 +2,8 @@
 
 interface ImportMetaEnv {
   readonly VITE_LIFF_ID: string;
+  readonly VITE_LIFF_ID_MINI: string;
+  readonly VITE_LIFF_ID_MINI_PREVIEW: string;
 }
 
 interface ImportMeta {