Two changes targeting the post-update white screen on the Zapstore APK:
1. vite.config: set base './' when CAPACITOR_BUILD is set. In a native
WebView the bundle is served from the local filesystem, so absolute '/'
asset paths are the classic cause of a silent white screen. The web
deploy keeps '/'. This is the documented Capacitor requirement and is
zero-risk to the working web build.
2. index.html: add a dependency-free "boot crash guard" that runs before
the app bundle and paints any uncaught error / unhandled rejection —
plus a 12s "did not render" timeout — directly to the screen using
inline styles only. A boot failure that would otherwise be an
info-less white screen now shows the actual error ON DEVICE, with no
USB/remote-debugging needed. main.tsx signals a clean boot to cancel
the timeout guard.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Remove debug red banner from index.html and main.tsx
- Add android:build:apk script that uses CAPACITOR_BUILD=1 for single
bundle output + strips Shakespeare build artifacts from dist/index.html
- Update all android:* scripts to use android:build:apk
Root cause of white screen: 100+ JS chunk files overwhelm Android
WebView local file serving. Single bundle with inlineDynamicImports
fixes this.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
Red banner renders from pure HTML before any JS loads.
If visible → HTML loads but JS fails.
If not visible → WebView can't even load index.html.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
- Add SplashScreen.hide() call in main.tsx so splash dismisses when JS loads
- Set launchShowDuration: 0 + launchAutoHide: true in capacitor.config.ts
- Fix ErrorBoundary to use bg-black text-white instead of bg-background
(bg-background = white before dark class is applied = white screen on error)
- These three combined should eliminate the white screen in the APK
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
The CSP meta tag blocks Capacitor's internal asset loading (https://localhost
scheme) causing a white screen. Android/iOS provide OS-level sandboxing so
the CSP is not needed for security in native APK context.
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
The strict CSP was blocking Capacitor's internal capacitor:// and ionic://
schemes causing a white screen in the Android APK. Added capacitor: and
ionic: to all relevant CSP directives (default-src, script-src, connect-src,
img-src, media-src, font-src).
Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
