feat(mobile): Android prep — icons/splash assets, permissions, FCM setup
- resources/: 1024 icon.png + 2732 splash.png/splash-dark.png generated from the PWA icon + brand blue; wired @capacitor/assets (npm run assets) + splash-screen plugin. - ANDROID_SETUP.md: end-to-end guide (SDK setup, cap add android, manifest permissions, Firebase/google-services.json + Gradle, run, Play AAB build) for package com.bizgaze.connect. - android-permissions.xml: paste-ready POST_NOTIFICATIONS + camera/mic/WebRTC perms. - mobile/README links the guide; setup adds `npm run assets`. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
このコミットが含まれているのは:
@@ -0,0 +1,110 @@
|
||||
# Biz Connect — Android build & push setup
|
||||
|
||||
Step-by-step to go from this repo to a running Android app with working FCM push.
|
||||
You have **Android Studio (Quail 2026.1.1)** installed — that bundles the Android SDK and a
|
||||
JDK, so no separate Java install is needed.
|
||||
|
||||
> The app is a Capacitor shell that loads the live Connect UI (`server.url` in
|
||||
> `capacitor.config.json`, default `https://remote.bizgaze.com`). The native side only adds
|
||||
> push, camera/mic, status bar, and store packaging. App id / Android package:
|
||||
> **`com.bizgaze.connect`** — this must match the Firebase app you create below.
|
||||
|
||||
---
|
||||
|
||||
## 1. One-time Android Studio setup
|
||||
1. Launch Android Studio once and let it finish "SDK Components Setup" (downloads the
|
||||
Android SDK + platform-tools).
|
||||
2. **More Actions → SDK Manager** → install **Android SDK Platform 34** (or latest) and
|
||||
**Android SDK Build-Tools**.
|
||||
3. To test on an emulator: **More Actions → Virtual Device Manager** → create a Pixel device
|
||||
(any recent API ≥ 33 so you can test the notification permission prompt). Or enable
|
||||
**USB debugging** on a physical phone and plug it in.
|
||||
|
||||
## 2. Generate the native Android project
|
||||
```bash
|
||||
cd mobile
|
||||
npm install
|
||||
npm run assets # builds icons/splash from resources/ (already provided)
|
||||
npx cap add android # creates mobile/android/ (gitignored)
|
||||
npx cap sync # copies config + web assets + plugins into the project
|
||||
```
|
||||
|
||||
## 3. App permissions
|
||||
Capacitor adds `INTERNET` automatically. Add the rest to
|
||||
`mobile/android/app/src/main/AndroidManifest.xml` (inside `<manifest>`, above `<application>`).
|
||||
A ready-to-paste copy is in [`android-permissions.xml`](android-permissions.xml):
|
||||
|
||||
```xml
|
||||
<!-- Push (Android 13+ runtime prompt) -->
|
||||
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
|
||||
<!-- Voice / video calls + camera from the web UI -->
|
||||
<uses-permission android:name="android.permission.CAMERA" />
|
||||
<uses-permission android:name="android.permission.RECORD_AUDIO" />
|
||||
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
|
||||
<uses-feature android:name="android.hardware.camera" android:required="false" />
|
||||
```
|
||||
> WebRTC in the WebView: Capacitor grants `getUserMedia` to the page when the app holds the
|
||||
> CAMERA/RECORD_AUDIO permissions, so the existing call/screen-share UI works once these are
|
||||
> present and the user accepts the runtime prompts.
|
||||
|
||||
## 4. Firebase / FCM (push)
|
||||
1. [Firebase console](https://console.firebase.google.com) → **Add project** (or reuse one).
|
||||
2. **Add app → Android**. Package name: **`com.bizgaze.connect`**. Register.
|
||||
3. Download **`google-services.json`** → place it in **`mobile/android/app/`**.
|
||||
4. Add the Google Services Gradle plugin (Capacitor 6 template):
|
||||
- `mobile/android/build.gradle` → `buildscript { dependencies { ... } }`:
|
||||
```gradle
|
||||
classpath 'com.google.gms:google-services:4.4.2'
|
||||
```
|
||||
- **bottom** of `mobile/android/app/build.gradle`:
|
||||
```gradle
|
||||
apply plugin: 'com.google.gms.google-services'
|
||||
```
|
||||
5. `npx cap sync` again.
|
||||
|
||||
That's the **client** half. The **server** half (already built) needs the matching credential:
|
||||
- Firebase console → **Project settings → Service accounts → Generate new private key** →
|
||||
download the JSON.
|
||||
- On the production server, set **`FCM_SERVICE_ACCOUNT`** to that file's path (or its inline
|
||||
JSON) and restart. See [../DEPLOY.md](../DEPLOY.md). With that set, `push.sendToUser`
|
||||
delivers to Android devices automatically; the app already registers its token via
|
||||
`POST /api/v1/devices` on launch (see `setupNativePush` in `server/public/home.html`).
|
||||
|
||||
## 5. Run it
|
||||
```bash
|
||||
npx cap open android # opens the project in Android Studio → press Run ▶
|
||||
# or headless:
|
||||
npx cap run android
|
||||
```
|
||||
First launch will prompt for notifications (Android 13+); accept it, then check the server log
|
||||
/ DB `device_tokens` shows a row for your user.
|
||||
|
||||
### Testing against a LOCAL dev server (optional)
|
||||
The app points at `https://remote.bizgaze.com` by default. To hit your laptop instead, edit
|
||||
`capacitor.config.json`:
|
||||
```json
|
||||
"server": { "url": "http://<your-LAN-IP>:8090", "cleartext": true, "androidScheme": "https" }
|
||||
```
|
||||
then `npx cap sync`. (`cleartext` is required for plain `http`.) Revert before shipping.
|
||||
|
||||
## 6. Build for the Play Store
|
||||
1. Create an upload keystore (once):
|
||||
```bash
|
||||
keytool -genkey -v -keystore biz-connect.keystore -alias bizconnect -keyalg RSA -keysize 2048 -validity 10000
|
||||
```
|
||||
2. Android Studio → **Build → Generate Signed App Bundle** → AAB → select the keystore.
|
||||
(Or `cd android && ./gradlew bundleRelease`.)
|
||||
3. Upload the `.aab` to **Google Play Console** (one-time $25 developer account). Fill in the
|
||||
store listing, data-safety form (declare camera/mic/notifications), and roll out to
|
||||
internal testing first.
|
||||
|
||||
---
|
||||
|
||||
## Checklist
|
||||
- [ ] Android Studio SDK + an emulator/device ready
|
||||
- [ ] `npm install` → `npm run assets` → `npx cap add android` → `npx cap sync`
|
||||
- [ ] Permissions added to AndroidManifest
|
||||
- [ ] `google-services.json` in `android/app/` + Gradle plugin lines + `cap sync`
|
||||
- [ ] App runs; notification permission accepted; `device_tokens` row appears
|
||||
- [ ] Server `FCM_SERVICE_ACCOUNT` set in prod → end-to-end push works
|
||||
- [ ] Signed AAB built and uploaded to Play (internal testing)
|
||||
@@ -4,6 +4,9 @@ A Capacitor shell that loads the live Connect web UI (`server.url` in
|
||||
`capacitor.config.json`) and adds native push, camera/mic, and store distribution. See the
|
||||
overall plan in [../CLIENTS.md](../CLIENTS.md).
|
||||
|
||||
> **Android:** follow the step-by-step in **[ANDROID_SETUP.md](ANDROID_SETUP.md)** (project
|
||||
> generation, icons/splash, permissions, Firebase/FCM, run, and Play Store build).
|
||||
|
||||
## Prerequisites
|
||||
- Node + `npm install` here.
|
||||
- **Android:** Android Studio + SDK.
|
||||
@@ -12,6 +15,7 @@ overall plan in [../CLIENTS.md](../CLIENTS.md).
|
||||
## Setup
|
||||
```bash
|
||||
npm install
|
||||
npm run assets # generate app icons + splash from resources/
|
||||
npx cap add android
|
||||
npx cap add ios # macOS only
|
||||
npx cap sync
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
"description": "Biz Connect mobile app — Capacitor shell loading the Connect web UI",
|
||||
"scripts": {
|
||||
"sync": "cap sync",
|
||||
"assets": "capacitor-assets generate --android",
|
||||
"assets:all": "capacitor-assets generate",
|
||||
"android": "cap open android",
|
||||
"ios": "cap open ios"
|
||||
},
|
||||
@@ -14,9 +16,11 @@
|
||||
"@capacitor/core": "^6.1.0",
|
||||
"@capacitor/ios": "^6.1.0",
|
||||
"@capacitor/push-notifications": "^6.0.0",
|
||||
"@capacitor/splash-screen": "^6.0.0",
|
||||
"@capacitor/status-bar": "^6.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@capacitor/assets": "^3.0.5",
|
||||
"@capacitor/cli": "^6.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
# App icon & splash source images
|
||||
|
||||
`@capacitor/assets` generates every Android (and iOS) icon/splash density from these masters.
|
||||
|
||||
| File | Size | Purpose |
|
||||
|------|------|---------|
|
||||
| `icon.png` | 1024×1024 | App icon (all densities + Android adaptive icon) |
|
||||
| `splash.png` | 2732×2732 | Launch splash (light) |
|
||||
| `splash-dark.png` | 2732×2732 | Launch splash (dark mode) |
|
||||
|
||||
These were generated from the existing PWA icon (`server/public/icon-512.png`) + brand blue
|
||||
`#1F3B73`. To rebrand, replace these three files (keep the sizes) and re-run:
|
||||
|
||||
```bash
|
||||
cd mobile
|
||||
npm run assets # Android only (npm run assets:all for iOS too)
|
||||
npx cap sync
|
||||
```
|
||||
|
||||
Tip: for the sharpest result, drop a true 1024×1024 `icon.png` (and a 2732×2732 `splash.png`)
|
||||
exported from the design source rather than an upscale.
|
||||
@@ -0,0 +1,19 @@
|
||||
<!-- Paste these into mobile/android/app/src/main/AndroidManifest.xml, inside <manifest> and
|
||||
directly above the <application> element. INTERNET is already added by Capacitor.
|
||||
See ANDROID_SETUP.md §3. -->
|
||||
|
||||
<!-- Push notifications: Android 13 (API 33)+ shows a runtime prompt -->
|
||||
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
|
||||
|
||||
<!-- Voice / video calls + camera, used by the WebRTC features in the web UI -->
|
||||
<uses-permission android:name="android.permission.CAMERA" />
|
||||
<uses-permission android:name="android.permission.RECORD_AUDIO" />
|
||||
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
|
||||
|
||||
<!-- Camera is optional hardware (tablets without one can still install) -->
|
||||
<uses-feature android:name="android.hardware.camera" android:required="false" />
|
||||
|
||||
<!-- Later, for screen-sharing FROM the phone (needs a screen-capture plugin):
|
||||
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
|
||||
<uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION" />
|
||||
-->
|
||||
バイナリファイルは表示されません。
|
変更後 幅: | 高さ: | サイズ: 157 KiB |
バイナリファイルは表示されません。
|
変更後 幅: | 高さ: | サイズ: 211 KiB |
バイナリファイルは表示されません。
|
変更後 幅: | 高さ: | サイズ: 211 KiB |
新しいイシューから参照
ユーザーをブロックする