feat: allow setting of hostname/startpage via code

[crixx]

Feature Request

Description

In Cordova, it was possible to set the hostname dynamically from code. This was used to allow testers and designers to verify, that a certain app build is compatible with all versions of the SPA deployed to different envs, without the need to build and install each env separately.

My use case is as follows:

• after a fresh install a default hostname is loaded
• then the tester can switch in the settings to a different env; the view is reloaded and shows the SPA from the selected env
• the env is persisted at selection, such that on a fresh app start, the env from the settings is loaded
• in our case, since it's the only Settings.bundle in the app, we can exclude it from the production-build of the app

Platform(s)

• ios
• android?

Preferred Solution

OPEN FOR SUGGESTIONS!

My idea but I'm not a swift dev:
CAPBridgeViewController.swift:

• private property dynamicHostname
• setter for private property dynamicHostname
• if dynamicHostname is set, use it to load the webView instead of the hostname from the settings/local

Alternatives

• override-able configuration hook (! CAPBridgeViewController is not open)
• extendable protocol

Usage

Plugin authors can set the dynamicHostname in their Plugin's load() method:

• retrieve environment from the settings and compare it to the current env
• if mismatch, set the dynamicHostname property via the setter

 public override func load() {
        if(ENVIRONMENT.name != EnvironmentName.default){
            let vc = self.bridge.viewController as! CAPBridgeViewController
            vc.setDynamicHostname(ENVIRONMENT.backend.absoluteString)
        }
    }

[imhoffd]

In Capacitor 3, we plan to allow multiple instances of Capacitor running within the native app. This should address your use case. You can track this here: #3182

[crixx]

Hi @dwieeb

If I got it right, dynamic configuration is already on the roadmap for Capacitor v3 with #3141 ? I think that would be the nicer way for this exact use case, since it would allow a single web view as in "production". All we need is a hook that can be used to edit/generate the configuration before the web-views are loaded.

What do you think?

[imhoffd]

I'm not sure I understand. The intended usage would be that the native app manages Capacitor instances, so you could have one Capacitor instance for a particular hostname and another for a different one and switch between the instances at runtime.

The Capacitor dynamic config generates a config object based on environment, so you could run NODE_ENV=production npx cap sync and end up with a configuration for production, but it doesn't offer a way to set it at runtime like your PR did.

[crixx]

Hi @dwieeb

Regarding "dynamic configuration": So this is a pure CLI feature, that just rewrites a env property in the capacitor.config.json? Actually we're doing that already right now with a simple node based pre-build script...

npm i --save-dev json
node node_modules/json -I -f capacitor.config.json -e "this.server.url=\"http://$BUILD_FOR_ENV.yourdomain.com/\""

Regarding "multiple instances": This sounds just very complex. Will there be a hook to allow configuration of the "primary" webview? I just need a single webView that can be configured before the first load. For my use case, it would be sufficient to have a hook that allows post-processing of the read capacitor.config.json...

[imhoffd]

I do not understand why you need a hook in Java/Swift to configure the webview at runtime. Is dynamically generating the configuration file based on environment not enough? If so, why?

[crixx]

Hi @dwieeb, thanks for your interest! We want to edit the configuration based on a user defined setting in the UserDefaults / UserSettings. The task is to enable our testers to install the app once and then change the environment the app uses in the user settings. On App start, this setting is picked up and used to boot the app. Therefore we need the possibility to change the configuration before the webView gets created/loads. For our use case, we only need to change the server.url. In production builds, we strip this functionality, i.e the settings bundle on iOS from the build.

Pre-build generated capacitor config does not fit this use case, since then we had 5 different builds resulting in 5 different apps, which is far from optimal.

[imhoffd]

Ahh! Thank you! This falls under another item the team has been discussing for Capacitor 3. I can't share everything right now because we haven't finalized our thoughts, but we are planning on improving configuration in the native runtimes and it will provide the option you need!

I am going to make a note to update this issue when we can share our plan so you get a notification.

Thanks for explaining!

[sisou]

@imhoffd Hi! Capacitor 3 got released in May. Can you say which improved configuration for the native runtime you were talking about? I'm currently investigating how to set custom rewrite rules for the integrated web-server.

Alternatively, can you point me to the documentation on how to run multiple servers in one app? Can those webviews communicate with each other, just like cross-origin postMessage on the web?

[ionitron-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.