Web フローにおけるネイティブデバイス連携

課題

複数のベンダーを経由してハードウェアチップを読み取る処理は、非常に幅広い機種とネットワーク環境のもとで、完了率が低い状態でした。ブラウザはハードウェアと通信できないため、すべてネイティブアプリのブリッジ経由で、ベンダー標準の画面はユーザーが端末を動かすと何も言わずに失敗しました。

アプローチ

• ネイティブブリッジを包むカスタム React ラッパーを、ベンダー標準の画面の代わりに採用。位置合わせの視覚ガイド、触覚フィードバック、エラー回復ループ、自前のブランディングを加えました。
• 明示的な非同期ステートマシン（スキャン中、読み取り中、検証中）。接続が切れたときは自動でリトライします。

結果

標準画面が苦戦していたプラットフォームと市場で完了率がはっきり上がり、ロールアウト後は全体のコンバージョンも改善しました。