iOS issue when restorting app from background (screen stays white)

[TobiasSchikora]

Hi everyone,

we originally managed our app with cordova. A few months ago we migrated to capacitor. However, we're having a really frustrating problem under iOS:

When you put the app in the background on iOS and then bring it back to the foreground after a while, the screen stays completely white and the app is no longer visible. The only way to fix it is to quit and restart the app. This makes the app very difficult to use for our iOS users. I think the problem is that the app isn't restoring properly from the frozen state.

Has anyone else had a similar problem? Can you give us any helpful tips on how to fix it? We'd really appreciate it if we could get this resolved as soon as possible. It's a very urgent issue.

Thanks for any help!

[jfmaeck]

We are experiencing exactly the same problem (we also migrated from cordova to capacitor). Unfortunately, I haven't found the root cause, yet.

[jfmaeck]

FYI: We fixed it by making "webview reloads" work, see #7097 (comment)

[okletstryit]

Same problem here, latest capacitor behaves the same on iOS

[fbuland]

Same problem on iOS with Capacitor 5.0.0

Issues reported on iOS 16 and iOS 17.

Difficult to reproduce (after several hours and with dozens of other apps open to make pression on memory), XCode logs :

2024-02-23 15:55:46.448139+0100 App[2901:90896] [Process] 0x115000470 - NetworkProcessProxy::didClose (Network Process 0 crash)
2024-02-23 15:55:46.460070+0100 App[2901:90896] [Process] 0x11407c380 - GPUProcessProxy::didClose:
2024-02-23 15:55:46.460863+0100 App[2901:90896] [Process] 0x11407c380 - GPUProcessProxy::gpuProcessExited: reason=Crash
2024-02-23 15:55:46.461080+0100 App[2901:90896] [Process] 0x115001560 - [PID=2904] WebProcessProxy::gpuProcessExited: reason=Crash
2024-02-23 15:55:46.468817+0100 App[2901:90896] [Process] 0x115001560 - [PID=2904] WebProcessProxy::didClose: (web process 0 crash)
2024-02-23 15:55:46.468886+0100 App[2901:90896] [Process] 0x115001560 - [PID=2904] WebProcessProxy::processDidTerminateOrFailedToLaunch: reason=Crash
2024-02-23 15:55:46.469550+0100 App[2901:90896] [ProcessSuspension] 0x114020120 - ProcessAssertion: Failed to acquire RBS Background assertion 'XPCConnectionTerminationWatchdog' for process because PID 0 is invalid
2024-02-23 15:55:46.469971+0100 App[2901:113803] [ProcessSuspension] 0x114020120 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'XPCConnectionTerminationWatchdog' for process with PID=0, error: (null)
2024-02-23 15:55:46.473957+0100 App[2901:90896] [Process] 0x105838218 - [pageProxyID=8, webPageID=9, PID=2904] WebPageProxy::processDidTerminate: (pid 2904), reason=Crash
2024-02-23 15:55:46.494478+0100 App[2901:90896] [Loading] 0x105838218 - [pageProxyID=8, webPageID=9, PID=2904] WebPageProxy::dispatchProcessDidTerminate: reason=Crash
2024-02-23 15:55:46.538444+0100 App[2901:90896] applicationWillEnterForeground (NB : added log on AppDelegate.swift)
2024-02-23 15:55:46.728490+0100 App[2901:90896] applicationDidBecomeActive (NB : added log on AppDelegate.swift)
⚡️  [log] - onscript loading complete
⚡️  WebView loaded
⚡️  [log] - Ionic Native: deviceready event fired after 121 ms
⚡️  [log] - Ionic Native: deviceready event fired after 107 ms
⚡️  To Native ->  FirebaseAuthentication addListener 3595928
⚡️  To Native ->  App addListener 3595929
⚡️  To Native ->  App addListener 3595930
2024-02-23 15:56:16.470964+0100 App[2901:90896] Could not signal service com.apple.WebKit.WebContent: 113: Could not find specified service

[fbuland]

I'd successfully reproduce the issue with XCode and Simulator.
I followed the explanation at https://stackoverflow.com/questions/71350041/is-webviewwebcontentprocessdidterminate-ever-called-for-an-app-running-in-the-ba

1. Put app to background
2. kill Webkit.WebContent process
3. put app to foreground : white screen

Capacitor WebViewDelegationHandler.swift correctly received webViewWebContentProcessDidTerminate() sent by iOS, and do a webview.reload(). A new Webkit.WebContent process is launched. But still white screen !

I don't know how to investigate more.

[viananicolas]

I've been having this same issue on a Ionic Cordova project that hasn't been migrated to capacitor yet, so the issue doesn't seem to be capacitor specific.

[viananicolas]

For Ionic Cordova users, adding useHash: true in RouterModule.forRoot worked for me.

[jfmaeck]

If an application is rewriting the url (e.g. using history.pushState) then a "reload" of this app (e.g. after the web view crashed) results in a 404 blank screen.

If manually reloading the page (location.reload()) results in a white screen, then this might be the case.

Hope this helps.

[fbuland]

Thank you for the tip.

In my case, I reproduced the white screen event if I didn't navigate throw the app.

Do you have a tip to catch errors in the page when playing the app in the XCode App Simulator ?

[jfmaeck]

Sometimes the url gets rewritten even before you explicitly navigate within your app.
In our Angular application we had to set the useHash option of the routerModule to true AND we had to explicitly set the base href to "/index.html" to fix this issue:

npx ng build --base-href='/index.html' --configuration production

(or set it in angular.json)

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      useHash: true,
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

[fbuland]

I tried with your indication, but I still reproduce the white screen issue.

[DJStatikVX]

Same problem here, reported by user but I couldn't reproduce it. Hope someone can look into a standard solution soon.

[grzegorzCieslik95]

Same problem here. Do you have any idea how can I fix it? Many of my users reported this error.

[JackBatty98]

Same problem here too, i have tried killing the webview but the app starts up fine afterwards. Its only when its left for long periods of time, for example overnight that this happens.

[TobiTobsn007]

I had this problem too. I detected that in some states, the routing module is not ready and a defined route is not known.
My solution was to define a default / fallback route in every route module.
Second: on NgDestroy methods I removed some listeners which din't exists in some situations. (Unhandled exceptions)
Solution check if objects exists before cleanup. Or handle ist with try catch. Since I fixed this problems, I never had a white screen anymore.
Good luck!

[lazarvelickovic]

I have exactly the same problem. Some users are experiencing this bug, but I cannot reproduce it at all. I've tried killing the web content process, but still cannot reproduce it. Have you guys had any success reproducing it in the meantime?

[VinzSpring]

Could this be related to the app trying to reload the current url but it fails because your SPA is set up to handle routing?

[DJStatikVX]

Doesn't seem so. At least, the problem persists with HashRoutingStrategy, which should fix the issue you describe on some scenarios like serving a SPA on a web server while declaring the root page only.

[sjregan]

I am experiencing the same issue, using Ionic Angular.

I can recreate the issue consistently using the kill WebContent process trick, but only on specific URLs. It seems to be the URLs that use Angular's positional arguments (:id) in the route:

{
    path: '',
    component: PostsListPage
},
{
    path: ':id',
    component: SinglePostPage
},

The error on resume is then:

⚡️  WebView failed provisional navigation
⚡️  Error: The file “70581” couldn’t be opened because there is no such file.

70581 is the :id in the URL, e.g. capacitor://example.domain.com/posts/70581

If the URL is capacitor://example.domain.com/posts/ then the app resumes as though the web page has been refreshed so our HTML loading spinners are shown while the Angular app is bootstrapped.

[sjregan]

Setting config.server.errorPath to '/' in the capacitor.config.ts file has resolved the issue in iOS during testing. I am not sure what the full implications of this are, particularly in Android as the docs state On Android the html file won't have access to Capacitor plugins.

[jormaj]

For anyone using capacitorjs with sveltekit: I was facing this exact same issue. The root page would load fine on location.reload(), but any other page would result in a blank page. In a practical scenario this would lead to a non-responsive app on iOS after a period of inactivity.

After some debugging I fixed it by a combination of two things:

1. Use the following setting in svelte.config.js:
   config = { ..., kit: { paths: { relative: false }}, ...}
2. In /+page.svelte, use:

onMount(() => {
		...
		// in case of webview reload, pathname will not match '/' so go back to root
		if ($page.url.pathname != '/') {
			goto('/');
                         return;
                 }
	});

The first one is because when the webview is reloaded, it somehow tries to load resources from the path that you're currently on, instead of the root path as indicated by the relative imports.
For example, when on the '/test' path, even though the test/index.html that was built will say '../_app/sdf7s8sdf.js', the actual request will be for 'localhost/test/_app/sdf7s8sdf.js' instead of 'localhost/_app/sdf7s8sdf.js'. By disabling relative paths, test/index.html will read '/_app/sdf7s8sdf.js', and it will also work on webview reloads.

The second one is because even though the loads will work fine, there is still some mismatch between the loaded files and the page that should be loaded on the path you're on. A workaround is to just redirect to the root '/' if the root component is loaded, but the path is not the root path, and things will work fine from there.

This all seems to be a bit of a hack, so if anyone has a better solution please let me know :)

[danielehrhardt]

Same problem here, maybe we can create a Issue out of it.

[vsg24]

I have a similar problem on Android, stays white for a few seconds after screen unlock.

[TurtleTaco]

We are having the exact issue on IOS and it's breaks the user experience from time to time. A kind follow up from the dev on this would be greatly appreciated!

[ZachooBuilds]

Let me know how you progress I have exact same issue

[TurtleTaco]

Still haven't had a fix for it, I am on NextJS + firebase

[petermakeswebsites]

I'd like to also say that I'm experiencing the same issue. Hoping there is an official resolution to this soon!

[petermakeswebsites]

Nope, and it's a bit of a shame because I'm getting some negative reviews on my app. But I haven't tried jormaj's solution above. There's too much at stake for hacky workarounds right now. Hopefully the dev team sorts it out soon...

[ZachooBuilds]

Are you working with next js ?

[petermakeswebsites]

SvelteKit

[ZachooBuilds]

Auth provider ?

[petermakeswebsites]

Firebase

[mirko77]

One workaround is to force the app to restart from the "home" route when reloaded from any other route (as it happens after a crash)

For example, with Vue router

router.beforeEach((to, from, next) => {
        if (!from.name && to.name !== HOME_ROUTE) {
            next({
                path: HOME_ROUTE,
                replace: true
            });
        } else {
            next();
        }
    });

and test if location.reload() from any page other than home one restarts the app correctly

[cihakmar]

Hi,
I have app written with angular and have the same issue. When restoring app after some time, I have a white screen. Some ideas? Thanks

[djabif]

Hi,
I'm using Firebase for authentication and I found that my white screen issue was because the Firebase authentication token expires after 1 hour. If the app is in the background for more than 1 hour, when the user resumes the app, the token will no longer be valid, so you need to make sure you have some logic to refresh it on app resume.

In case it helps anyone, I will share my solution.

In my app.component.ts I added:

....
import { App } from '@capacitor/app';
....
App.addListener('resume', async () => {
     // refresh firebase token
     // this is needed because the firebase auth token expires after 1 hour
     // and if the app is in the background for more than 1 hour,
     // when the app is resumed, the user got a white screen because the token was expired
     const newToken = await this.authService.getIdToken({ forceRefresh: true });
     await this.storage.set(LOCAL_STORAGE_KEYS.user_token, newToken);
 });

Then in my authService

public async getIdToken(options?: GetIdTokenOptions): Promise<string> {
  return FirebaseAuthentication.getIdToken(options)
    .then((result) => result.token)
    .catch(() => '');
}

[frederikheld]

Do you, by any chance, know if this is a general Firebase problem or just auth? I'm not using auth, but Firestore and I have the problem described in this issue. Although it doesn't always take a full hour to happen ...

[djabif]

Hey, not sure about that. But you could try to refresh the Firestore connection on app resume event and see if that solves your issue.