DEV Community

Cover image for Ionic iOS app worked in Safari and as a PWA, but failed inside the native app. Migrating to CapacitorHttp fixed it.
Subhrojit Hore
Subhrojit Hore

Posted on

Ionic iOS app worked in Safari and as a PWA, but failed inside the native app. Migrating to CapacitorHttp fixed it.

#api #debugging #ios #mobile

Wanted to share a recent issue I ran into with an Ionic + Capacitor iOS app in case it helps someone else.

The Problem
Users started reporting that:

  • The app launched successfully.
  • The home page loaded correctly.
  • Screens behind the homepage were blank or failed to load data.
  • Reinstalling the app didn't help.
  • Restarting the device didn't help. At first glance it looked like an API issue.

What made it weird?
I quickly found that:

  • Backend APIs were healthy.
  • Safari could access the APIs.
  • The PWA version worked fine.
  • Direct API endpoint testing worked.
  • Only the native IOS app failed.

So the pattern became:

Safari ✅
PWA ✅
Backend API ✅
Native iOS App ❌
Enter fullscreen mode Exit fullscreen mode

That immediately pushed me away from investigating the backend and toward the apps networking layer.

Architecture Before
The application was using Angular's standard HTTP implementation:

Ionic App
   ⬇️
Angular HttpClient
   ⬇️
WKWebView
   ⬇️
XMLHttpRequest / Fetch
   ⬇️
Backend API
Enter fullscreen mode Exit fullscreen mode

The APIs themselves were hosted in Azure and showed no issues.

Things I Considered
I investigated:

  • Backend/API failures.
  • Authentication issues.
  • CORS.
  • Caching.
  • App build corruption.
  • TLS/Certificate chain issues. Because the browser and PWA worked, backend problems became increasingly unlikely.

What I Changed
I migrated the API communication from:

HttpClient
Enter fullscreen mode Exit fullscreen mode

to:

CapacitorHttp
Enter fullscreen mode Exit fullscreen mode

I implemented the requests using:

import { CapacitorHttp } from '@capacitor/core';
Enter fullscreen mode Exit fullscreen mode

The application had previously relied on Angular's standard HTTP client:

this.http.get(...)
this.http.post(...)
Enter fullscreen mode Exit fullscreen mode

which executes requests through the iOS WebView networking stack.
After the change, requests were made using:

import { CapacitorHttp } from '@capacitor/core';
const response = await CapacitorHttp.request({
  method: 'GET'.
  url: apiUrl,
  headers: {
    Authorization: `Bearer ${token}`
  }
});
Enter fullscreen mode Exit fullscreen mode

POST example:

await CapacitorHttp.request({
  method: 'POST',
  url: apiUrl,
  headers: {
    'Content-Type' : 'application/json'
  },
  data: payload
});
Enter fullscreen mode Exit fullscreen mode

Also, enabled Capacitor's native HTTP handling via configuration (capacitor.config.ts) :

plugins: {
  CapacitorHttp: {
    enabled: true
  } 
}
Enter fullscreen mode Exit fullscreen mode

The network path became:

Ionic App
   ⬇️
CapacitorHttp
   ⬇️
Native iOS URLSession
   ⬇️
Backend API
Enter fullscreen mode Exit fullscreen mode

Instead of relying on the WKWebView networking stack, requests now use native iOS networking.

Result
After the migration:

  • API connection restored.
  • Previously blank screens started loading data again.
  • Navigation warps normally.
  • Issue could no longer be reproduced. I Redistributed the build through Testflight and successfully validated the fix on physical IOS devices.

Note: I have not yet proven the exact root cause. However, after migrating from AngularHttpClient/WebView networking to CapacitorHttp/native networking, the issue could no longer be reproduced during TestFligh validation and user testing. That was sufficient for us to proceed with releasing the fix.
Possible contributers:
- WKWebView networking behavior
- TLS/certificate handling differences
- Corporate proxy/security inspection
- URLSession vs WebView request handling
- iOS-specific networking quirksx1

Top comments (1)

Collapse
 
subhajit_paul_6e8e5520e75 profile image
Subhajit Paul •

Really helpful.