リアル環境でLIFFアプリを爆速で起動する

[⼤阪開催]LINE DC Frontend Meetup ~Webアプリ開発で盛り上がろう！編~ リアル環境でLIFFアプリを爆速で起動する 2024.02.16 捧 隆⼆ 1

⾃⼰紹介 捧 隆⼆ (ささげ りゅうじ) ITエンジニア Arahabica @Arahabica1 ⼤学院在学中に⼤阪でITスタートアップを起業。 上京後、外資系ITコンサル、フィンテック企業を経験。 2019年にボイスアップラボの創業メンバーとして参画。LINE関連 の開発に従事。 LINE BOOT AWARDS 2018 部⾨賞受賞。2021年よりLINE API Expert。 趣味は温泉めぐり。 2

街中だとけっこう通信遅くないですか︖ 3

LINEミニアプリのユースケース • 店内モバイルオーダー • 順番待ち・予約 • 会員証 出典: https://www.linebiz.com/jp/service/line-mini-app/ 4

5

6

システム構成 Authentication Hosting Cloud Functions Firestore (DB) 7

バンドルサイズ 総サイズ: 1.03MB Firebase: 902KB LIFF: 100KB qrcode: 72KB 8

実測(128kbps環境) QR読み取りからQR表⽰まで 78.17s (1Mbpsの場合、9.61s) 9

これを爆速化して⾏きます。 10

爆速化(v1) • フロントのfirebaseを消す • 構成を変える • LIFFの容量を下げる • プラガブルSDK • QRコードをサーバーで⽣成 11

システム構成(v2) Hosting Cloud Functions Firestore (DB) →フロントのfirebaseを消せる 12

LIFFプラガブルSDK • 使うAPIを選択することでサイズ削減 • 最⼤34%削減 • 詳細は記事参照 (https://zenn.dev/voiceapplab/articles/d5d78f03b3f7d9 ) 13

• https://zenn.dev/voiceapplab/articles/d5d78f03b3f7d9

バンドルサイズ(v2) 総サイズ: LIFF: 85KB 72KB 14

バンドルサイズ(v2) 総サイズ: LIFF: 85KB 72KB 92%削減!! 15

実測(128kbps環境) QR読み取りからQR表⽰まで 5.01s 78.17s 16

さらに爆速化 17

爆速化(v2) • Firebase functionはコールドスタートという課題がある • 最⼩インスタンスの指定で解決は可能 • Cloudflare Pages • エッジで動く • 0ms Cold Start 18

システム構成(v3) Cloudflare Pages D1 (DB) 19

実測(128kbps環境) QR読み取りからQR表⽰まで 4.40s 78.17s 20

QRを読むのにも地味に時間がかかる… 21

22

NFCカード導⼊ 23

NFCカード • iPhone XS以降はアプリ起動不要で読み取り可能 • Background Tag Reading • 1枚100円くらい • まだ、慣れてない⼈が多いので、オフラインだとしれっと押しつけ てあげるとスムーズ • Webブラウザが開くのでウェルカムページを挟む • QRコード: 5秒~15秒︖ • NFCカード: 1~5秒︖ 24

まとめ • 爆速化にはjsを軽くするのが⼀番効く︕ • LIFFのプラガブルSDKで軽くする • Cloudflareもこれから来るかも • NFCカードもそろそろ普及しはじめるか︖ 25