[Feature]: Customizable "Webpage not available" screen

[Alarson93]

trafficstars

Description

I would like to be able to provide a custom screen for when web pages are not available.

Platforms

• [ ] iOS
• [X] Android
• [ ] Web

Request or proposed solution

A coworker occasionally sees a "Webpage not available" screen while using our Android Capacitor app. While the particular cause still needs to be investigated, the issue relevant here is the standard error screen does not look very good nor is there a way to refresh the page. So - a user that arrives at this screen does not have any path to recovery other than killing and reopening the app.

We are also able to reproduce the issue in airplane mode.

I've been asked to find a way to customize it. I could start overriding things, but issue #2751 seems to suggest that this is a bad idea. Is there an existing way to customize this screen? If not, could such a feature be added in the future?

Thanks!

Alternatives

No response

Additional Information

No response

[Alarson93]

I have found a workaround.

I created a custom WebViewListener that - upon receiving an error - navigates the user to a custom error screen:

class CustomListener(private val activity: WebPortalActivity): WebViewListener() {

    private var hasHandledError = false

    override fun onReceivedError(webView: WebView?) {
        super.onReceivedError(webView)

        // This conditional check prevents multiple errors from triggering multiple navigations
        if (!hasHandledError) {
            hasHandledError = true
            val intent = Intent(activity, WebViewErrorActivity::class.java)
            intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
            activity.startActivity(intent)
        }
    }

}

The custom error screen basically says that something went wrong and it provides a "Return home" button. Tapping the button will navigate the user to a new Bridge Activity, giving them a fresh start without needing to kill the app. If the original issue persists (e.g. they still lack a data connect), the resulting error will simply navigate them back to our custom error screen.

Unfortunately, we cannot give the user any meaningful message about what went wrong because the WebViewListener does not pass the error forward. That's fine for our immediate use case, but I think it would be polite to provide an error in the onReceivedError function of WebViewListener.

[jcesarmobile]

This is already possible, check errorPath inside server object https://capacitorjs.com/docs/config

[Alarson93]

Thanks for sharing!

Adding errorPath to the config certainly influences things. For example, I have the following server config:

  "server": {
    "url": "http://10.0.2.2:3000/", // I'm running a local NextJS / React instance
    "errorPath": "error.html"
  },

When I recreate the state mentioned above, I am brought to the "Webpage not available" screen with the offending URL being http://localhost/error.html. This is a little surprising as I expected to see the same domain (i.e. 10.0.2.2:3000) or, preferably, have the error page read directly from an HTML file compiled in the Android project (as the JS/TS of our frontend is not compiled into our apps).

[jcesarmobile]

errorPath is the path to a local file in your app, so exactly what you say here

preferably, have the error page read directly from an HTML file compiled in the Android project

If you are using server.url and there is no internet connection it wouldn't be able to load a remote error page as there is no internet connection to load such page. So it can't use the same remote domain, it uses the local url.

[Alarson93]

Great! I'm glad to hear it points to a local file.

Regarding the error I see, perhaps my errorPath is wrong and that is why I'm seeing the "Webpage not available" for http://localhost/error.html. What is the errorPath relative to?

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.