Capacitive Ionic WebView is showing blank page after build on iOS

Issue

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"
}

Solution

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);

Answered By – Ab Rasel

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0