Skip to content

fix: resolve application startup freeze on older Android WebViews and improve splash screen behavior - #309

Open
rmsalinas wants to merge 1 commit into
airgap-it:masterfrom
rmsalinas:fix/android-webview-compatibility
Open

fix: resolve application startup freeze on older Android WebViews and improve splash screen behavior#309
rmsalinas wants to merge 1 commit into
airgap-it:masterfrom
rmsalinas:fix/android-webview-compatibility

Conversation

@rmsalinas

Copy link
Copy Markdown

Summary of Changes

This PR resolves an issue where AirGap Vault fails to load or hangs indefinitely on the splash screen when launched on Android devices with older System WebView versions (such as Chrome < 71 / Chrome 68).

🐛 Problem

  1. globalThis is Undefined:
    On System WebViews prior to Chrome 71, globalThis is not natively supported. When vendor.js evaluates, dependencies throw Uncaught ReferenceError: globalThis is not defined, preventing Angular from bootstrapping.
  2. Missing Array.prototype.flat / flatMap:
    Third-party libraries (such as @ngrx/effects) rely on Array.prototype.flat, which was introduced in Chrome 69. On Chrome 68, this threw Uncaught TypeError: rootEffects.flat is not a function.
  3. ES2022 Syntax Output (?. / ??):
    tsconfig.json targeted ES2022, emitting modern optional chaining (?.) and nullish coalescing (??) syntax. Chrome 68 failed to parse these syntax tokens, throwing Uncaught SyntaxError: Unexpected token ?.
  4. Splash Screen Stuck:
    In app.component.ts, splashScreen.hide() was executed after Promise.all([this.initializeTranslations(), this.initializeProtocols()]). If protocol initialization stalled or took time, the splash screen remained visible continuously due to launchAutoHide: false in capacitor.config.ts.

🛠️ Solution

  • Polyfills: Added polyfills for globalThis, Array.prototype.flat, Array.prototype.flatMap, and Object.fromEntries in src/index.html (inline head script) and src/polyfills.ts.
  • Compiler Target: Set TypeScript compiler target to ES2018 in tsconfig.json and updated .browserslistrc to target ChromeAndroid >=60 to ensure syntax downleveling.
  • Splash Screen Dismissal: Moved splashScreen.hide() immediately after platform.ready() in app.component.ts and enabled launchAutoHide: true with a 2-second fallback in capacitor.config.ts.

🧪 Verification

  • Verified build succeeds cleanly (npm run build, npx cap copy android, ./gradlew assembleDebug).
  • Deployed and verified on a physical Android device running Android System WebView Chrome 68.
  • Verified in adb logcat that all JS syntax/type errors are resolved and Angular bootstraps successfully.

…h screen dismissal

- Add polyfills for globalThis, Array.prototype.flat, Array.prototype.flatMap, and Object.fromEntries in index.html and polyfills.ts for older Android WebViews (Chrome < 71).
- Set TypeScript compiler target to ES2018 in tsconfig.json and update .browserslistrc to target Chrome 60+.
- Move splashScreen.hide() immediately after platform.ready() in app.component.ts and enable launchAutoHide: true with a 2-second duration fallback in capacitor.config.ts.
@sonarqubecloud

sonarqubecloud Bot commented Aug 4, 2026

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
C Security Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant