Capacitive Ionic WebView is showing blank page after build on iOS

Question

I'm using ionic capacitor. After build, no external links are opening from the webview in iOS. There is no error or warning message on xcode debug. However, It's working fine on the browser and android. What am i missing?

in index.html

  <meta http-equiv="Content-Security-Policy"
    content="gap: wss: ws: ; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';">

WebView config:

import { InAppBrowser } from '@ionic-native/in-app-browser';
var browser = InAppBrowser.create( wpcUrl, "_blank",

    {
      location: 'no', //Or 'no' 
      hardwareback: 'yes',
      mediaPlaybackRequiresUserAction: 'yes',
      closebuttoncaption: 'Share', //iOS only
      disallowoverscroll: 'no', //iOS only 
      toolbar: 'yes', //iOS only 
      toolbarposition: 'bottom',
      enableViewportScale: 'no', //iOS only 
      allowInlineMediaPlayback: 'no', //iOS only 
      presentationstyle: 'formsheet', //iOS only 
    
    }
);

I tried target _blank and _system and _self too, but same problem.

Note: I don't have any config.xml file at it's root. All i have a manifest.json that looks like this:

{
  "short_name": "WPCafe App",
  "name": "My WPCafe App",
  "icons": [
    {
      "src": "assets/icon/favicon.png",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "assets/icon/icon.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "maskable"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Answer 1

It's URL issue. You can encode the URL using the encodeURI method :

 let url = encodeURI(YOUR_URL); 
 let browser = InAppBrowser.create(url, '_blank', InAppBrowserOptions);