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

1.6K Views

February 18, 24

スライド概要

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

さらに爆速化 17

18.

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

19.

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

20.

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

21.

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

23.

NFCカード導⼊ 23

24.

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

25.

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