PWA アプリ基盤
対応 Issue: #8 PWA アプリ基盤
役割
スマホ側アプリ。PWA（モバイル Web） として実装し、カメラとは BLE 制御 + WiFi 転送のハイブリッドで通信する。
画面構成
| 画面 | 内容 | 関連機能 |
|---|---|---|
| ホーム | 接続状態・モード・クイック操作 | 状況・設定 |
| ライブ | MJPEG ライブプレビュー・フレーミング | プレビュー |
| ギャラリー | 撮影済み画像/動画の一覧・DL | プレビュー |
| 設定 | カメラ設定・接続・WiFi | 状況・設定 |
| 投稿 | 対象選択・キャプション・SNS | SNS 投稿 |
接続抽象化 CameraTransport
BLE と WiFi-REST を共通インターフェースに隠蔽し、プラットフォームで実装を切り替える。
interface CameraTransport {
getStatus(): Promise<Status>
setControl(varName, val): Promise<void>
startInterval(opts): Promise<void>
listFiles(): Promise<FileMeta[]>
fetchImage(id): Promise<Blob>
}| 環境 | 制御 | 画像転送 |
|---|---|---|
| Android | BLE (Web Bluetooth) | WiFi AP |
| iOS | WiFi-REST（Web Bluetooth 非対応のため縮退） | WiFi AP |
重要な設計判断
| 制約 | 対処 |
|---|---|
| Web Bluetooth iOS 非対応 | iOS は BLE を使わず WiFi-REST 制御へ縮退。機能差を最小化 |
| HTTPS → HTTP の mixed-content | 配信方式をフェーズで切替（下表） |
| PWA インストール / SW は HTTPS 必須 | Phase 2 で Cloudflare Pages（HTTPS）配信へ |
配信方式
| 候補 | 長所 | 短所 |
|---|---|---|
デバイス配信（192.168.4.1, HTTP） | 同一オリジンで API 直叩き可（mixed-content 回避） | SW / インストールに制限 |
| Cloudflare Pages（HTTPS） | インストール・オフライン可 | カメラ(HTTP) へ直接 fetch 不可 → BLE / AP 直結サブページへ委譲 |
→ Phase 1 = デバイス配信、Phase 2 = Cloudflare Pages の段階移行。
その他
- WiFi 切替 UX: 「カメラの WiFi に接続してください」誘導 + 接続検知 + タイムアウト
- オフライン: Service Worker でシェル / 直近メタをキャッシュ、ホーム画面追加対応
- ローカル永続化: IndexedDB（設定・撮影メタ・DL 画像）