Facing Problem with Javacript embed of Disqus in Phonegap build using cli-6.0.0 and Splash screen loading

  • 1
  • Question
  • Updated 4 years ago
Though I am aware that Javascript embed of Disqus has some issue with redirect while logging in but the login page opened atleast in inline browser till the phonegap build version is 4.1.1 but now in cli-6.0.0, while user trying to logging in, the login page is opening in the mobile browser instead of inline browser.

https://help.disqus.com/customer/port...

Also instead of splash screen, now it displays only black screen.

Can anyone throw some light on this issue..I am clueless about how to fix this.

Note: The app is created from mobile site(weather blog)

https://play.google.com/store/apps/de...

As we have received deadline to update the app with phonegap latest build version before May 6th from Google, Currently we had no option other than temporarily upload the new version with latest phonegap build to avoid our app removed from playstore.
Photo of Chennaiyil Oru Mazhaikalam

Chennaiyil Oru Mazhaikalam

  • 8 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
1. Google's new policy doesn't require cli-6.0.0. The PGB version "cli-5.2.0" would be sufficient.

2. There is no PGB version 4.1.1

3. Could you please
a. post your config.xml
b. confirm that both index.html and config.xml are in the root directory ("/") of your zip file, and not in some directory called /www or otherwise
Photo of Chennaiyil Oru Mazhaikalam

Chennaiyil Oru Mazhaikalam

  • 8 Posts
  • 0 Reply Likes
index.html and config.xml are in the root directory only


<?xml version='1.0' encoding='utf-8'?>
<widget id="com.chennairains.mobileapp" version="1.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>COMK</name>
<description>Chennaiyil Oru Mazhaik Kaalam - Chennai's Own Weather Blog</description>
<author email="chennairain2014@gmail.com" href="http://www.chennairains.com">Chennai Rains</author>

<content src="http://mobileapp.chennairains.com"/>
<access origin="*" subdomains="true" />

<preference name="orientation" value="portrait" />
<preference name="target-device" value="universal" />
<preference name="android-build-tool" value="gradle" />
<preference name="android-minSdkVersion" value="9" />
<preference name="phonegap-version" value="cli-6.0.0"/>
<preference name="permissions" value="none"/>

<!-- PLUGINS * PLUGINS * PLUGINS -->
<plugin name="cordova-plugin-whitelist" source="npm" />
<plugin name="cordova-plugin-battery-status" source="npm"/>
<plugin name="cordova-plugin-camera" source="npm" />
<plugin name="cordova-plugin-console" source="npm"/>
<plugin name="cordova-plugin-device" source="npm"/>
<plugin name="cordova-plugin-device-motion" source="npm"/>
<plugin name="cordova-plugin-device-orientation" source="npm"/>
<plugin name="cordova-plugin-dialogs" source="npm"/>
<plugin name="cordova-plugin-file" source="npm"/>
<plugin name="cordova-plugin-file-transfer" source="npm"/>
<plugin name="cordova-plugin-geolocation" source="npm" spec="2.1.0"/>
<plugin name="cordova-plugin-globalization" source="npm" spec="1.0.2"/>
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="1.2.1"/>
<plugin name="cordova-plugin-media" source="npm"/>
<plugin name="cordova-plugin-media-capture" source="npm"/>
<plugin name="cordova-plugin-network-information" source="npm" spec="1.2.0"/>
<plugin name="cordova-plugin-splashscreen" source="npm"/>
<plugin name="cordova-plugin-statusbar" source="npm"/>
<plugin name="cordova-plugin-vibration" source="npm"/>
<plugin name="pushwoosh-cordova-plugin" source="npm" spec="4.2.2"/>

<access origin="*" />
<access origin="*.pushwoosh.com" />

<platform name="android">
<allow-intent href="market:*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

<preference name="auto-hide-splash-screen" value="false" />
<preference name="SplashScreenDelay" value="5000" />

<!-- ICON * ICON * ICON -->
<icon src="icon.png" />
<icon src="res/icon/logo.png" density="ldpi" />
<icon src="res/icon/logo.png" density="mdpi" />
<icon src="res/icon/logo.png" density="hdpi" />
<icon src="res/icon/logo.png" density="xhdpi" />
<!-- SPLASH * SPLASH * SPLASH -->
<splash src="splash.png" />
<splash src="res/screen/android/screen-ldpi-portrait.png" density="port-ldpi" />
<splash src="res/screen/android/screen-mdpi-portrait.png" density="port-mdpi" />
<splash src="res/screen/android/screen-hdpi-portrait.png" density="port-ldpi" />
<splash src="res/screen/android/screen-xhdpi-portrait.png" density="port-xhdpi" />
<splash src="res/screen/android/screen-xxhdpi-portrait.png" density="port-xxhdpi" />
<splash src="res/screen/android/screen-xxxhdpi-portrait.png" density="port-xxxhdpi" />
</platform>
<!-- iOS * iOS * iOS -->
<platform name="ios">
<!--
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />-->
<!-- ICON * ICON * ICON -->
<icon src="res/icon/logo.png" width="57" height="57" />
<icon src="res/icon/logo.png" width="72" height="72" />
<icon src="res/icon/logo.png" width="114" height="114" />
<icon src="res/icon/logo.png" width="144" height="144" />
<!-- SPLASH * SPLASH * SPLASH -->
<splash src="res/screen/ios/screen-iphone-portrait.jpg" width="320" height="480" />
<splash src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" height="960" />
<splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" height="1136" />
<splash src="res/screen/ios/screen-iphone-portrait-667h-2x.png" width="750" height="1334" />
<splash src="res/screen/ios/screen-iphone-portrait-736h-3x.png" width="1242" height="2208" />
<splash src="res/screen/ios/screen-ipad-portrait.png" width="768" height="1024" />
<splash src="res/screen/ios/screen-ipad-portrait-2x.png" width="1536" height="2048" />
</platform>

<platform name="winphone">
<icon src="res/icon/logo.png" gap:platform="winphone" />
<icon src="res/icon/logo.png" gap:platform="winphone" gap:role="background" />
<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />

</platform>

</widget>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
If that is happening in Android only, please remove
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />


For the splashscreen: you are missing a 'SplashScreen' preference. See the splashscreen plugin's docs.
Photo of Chennaiyil Oru Mazhaikalam

Chennaiyil Oru Mazhaikalam

  • 8 Posts
  • 0 Reply Likes
Thanks for your prompt help..

The splash screen preference is inside the

Now I have changed it as below


<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="5000" />


Also removed the allow-intent content as mentioned by you but still both the problem exists
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well,

1.
I don't see the SplashScreen preference in your config;
The combination of both preferences as posted above makes no sense: you say:"Don't automatically hide my splash, and please do it after 5 seconds". That is not logical, is it?

2.
I am not sure about the external site opening in a browser. You are using the content element to directly open an external site (which will most likely be rejected by the AppStore, anyway). It is quite uncommon to do it this way.
Wouldn't you rather use the inappbrowser plugin with the '_self' parameter, called from your index.html after the deviceready event has fired?
Photo of Chennaiyil Oru Mazhaikalam

Chennaiyil Oru Mazhaikalam

  • 8 Posts
  • 0 Reply Likes
Thanks for your support again...But I have tried all the possibilities as per the phonegap document and also googled many reference and I am now totally confused.

Everything is working except the splash screen and Discus which both worked well in the previous version using phonegap build of 3.6.3

Please help to find out the issue in the config.xml. Below is the config.xml content


<?xml version='1.0' encoding='utf-8'?>
<widget id="com.chennairains.mobileapp" version="1.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>COMK</name>
<description>Chennaiyil Oru Mazhaik Kaalam - Chennai's Own Weather Blog</description>
<author email="chennairain2014@gmail.com" href="http://www.chennairains.com">Chennai Rains</author>

<content src="http://mobileapp.chennairains.com"/>
<access origin="*" subdomains="true" />

<gap:platform name="android" />
<gap:platform name="ios" />
<gap:platform name="winphone" />

<preference name="phonegap-version" value="cli-6.0.0" />
<preference name="permissions" value="none"/>
<preference name="orientation" value="portrait"/>
<preference name="target-device" value="universal"/>
<preference name="fullscreen" value="false"/>
<preference name="webviewbounce" value="false"/>
<preference name="prerendered-icon" value="true"/>
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque"/>
<preference name="detect-data-types" value="true"/>
<preference name="exit-on-suspend" value="false"/>
<preference name="disable-cursor" value="false"/>
<preference name="android-minSdkVersion" value="14"/>
<preference name="android-build-tool" value="gradle" />
<preference name="android-installLocation" value="auto"/>
<preference name="FadeSplashScreenDuration" value="1"/>
<preference name="show-splash-screen-spinner" value="false" />

<!-- PLUGINS * PLUGINS * PLUGINS -->
<gap:plugin name="cordova-plugin-camera" source="npm"/>
<gap:plugin name="cordova-plugin-media-capture" source="npm"/>
<gap:plugin name="cordova-plugin-console" source="npm"/>
<gap:plugin name="cordova-plugin-device-orientation" source="npm"/>
<gap:plugin name="cordova-plugin-dialogs" source="npm"/>
<gap:plugin name="cordova-plugin-file" source="npm"/>
<gap:plugin name="cordova-plugin-file-transfer" source="npm"/>
<gap:plugin name="cordova-plugin-vibration" source="npm"/>
<gap:plugin name="cordova-plugin-inappbrowser" source="npm"/>
<gap:plugin name="cordova-plugin-network-information" source="npm"/>
<gap:plugin name="cordova-plugin-device" source="npm"/>
<gap:plugin name="cordova-plugin-whitelist" source="npm" />

<gap:plugin name="cordova-plugin-geolocation" source="npm"/>
<gap:plugin name="cordova-plugin-globalization" source="npm"/>
<gap:plugin name="cordova-plugin-media" source="npm"/>
<gap:plugin name="cordova-plugin-statusbar" source="npm"/>
<gap:plugin name="cordova-plugin-vibration" source="npm"/>

<!-- Splashscreen settings -->
<plugin name="cordova-plugin-splashscreen" source="npm"/>
<preference name="SplashScreen" value="Screen" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="5000" />

<plugin name="pushwoosh-pgb-plugin" source="npm" spec="4.2.2"/>

<!-- ICON - Android -->
<icon src="icon.png" />
<icon src="res/icon/logo.png" gap:platform="android" gap:qualifier="ldpi" />
<icon src="res/icon/logo.png" gap:platform="android" gap:qualifier="mdpi" />
<icon src="res/icon/logo.png" gap:platform="android" gap:qualifier="hdpi" />
<icon src="res/icon/logo.png" gap:platform="android" gap:qualifier="xhdpi" />
<!-- ICON - IOS -->
<icon src="res/icon/logo.png" gap:platform="ios" width="57" height="57" />
<icon src="res/icon/logo.png" gap:platform="ios" width="72" height="72" />
<icon src="res/icon/logo.png" gap:platform="ios" width="114" height="114" />
<icon src="res/icon/logo.png" gap:platform="ios" width="144" height="144" />
<!-- ICON - Windows -->
<icon src="res/icon/logo.png" gap:platform="winphone" />
<icon src="res/icon/logo.png" gap:platform="winphone" gap:role="background" />

<!-- SPLASH * SPLASH * SPLASH -->
<gap:splash src="splash.png" />
<!-- SPLASH - Android -->
<gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="ldpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="xhdpi" />
<gap:splash src="res/screen/android/screen-xxhdpi-portrait.png" gap:platform="android" gap:qualifier="xxhdpi" />
<gap:plash src="res/screen/android/screen-xxxhdpi-portrait.png" gap:platform="android" gap:qualifier="xxxhdpi" />
<!-- SPLASH - IOS -->
<gap:splash src="res/screen/ios/screen-iphone-portrait.jpg" gap:platform="ios" width="320" height="480" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-667h-2x.png" gap:platform="ios" width="750" height="1334" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-736h-3x.png" gap:platform="ios" width="1242" height="2208" />
<gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" />
<gap:splash src="res/screen/ios/screen-ipad-portrait-2x.png" gap:platform="ios" width="1536" height="2048" />
<!-- SPLASH - Windows -->
<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />

<access origin="*"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<platform name="android">
<allow-intent href="market:*"/>
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
</platform>
</widget>

Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Hm, you seem to ignore previous suggestions.

Here's (again) feedback:

1. You have several 'access intent' rules redundantly. It would not be a bad idea to clean up a bit
2. If you want external websites to display in the webview, you need an 'allow-navigation' rule for that site.
3. You still have
<content src="http://mobileapp.chennairains.com"/>
I suggested it would be much better to use the inappbrowser plugin with the _self parameter for that purpose.
4. You still have contradictory preferences:
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="5000" />

This makes no sense.
5. (not related). You can safely delete
<gap:plugin name="cordova-plugin-file" source="npm"/>
since you already have the file-transfer plugin, which includes the file plugin.
6. Finally, the paths to the splashes might be wrong, but I could only check that if your zip file was available online, somewhere. If so, please post its url and I'll be happy to have a look.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Chennaiyil,
Are you aware that both Google and Apple frown on apps that are website wrappers?

Jesse
Photo of Chennaiyil Oru Mazhaikalam

Chennaiyil Oru Mazhaikalam

  • 8 Posts
  • 0 Reply Likes
Yes..I am aware...But our app has been the wrapper one since we published and till now there is no issue. Being a non-developer, creating a pure mobile app is huge learning curve....
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
Okay. Best of Luck.
Photo of Chennaiyil Oru Mazhaikalam

Chennaiyil Oru Mazhaikalam

  • 8 Posts
  • 0 Reply Likes
@Petra

Again thanks a lot for your time in reviewing the config.xml

I have implemented your feedback points 1,2 5.

Regarding the point 4, I am not clear what should be done exactly to make splash screen works. I tried as mentioned in the document and also several ways when i searched across tutorials but of no use.

Regarding the point 3, I am yet to do, but will do once this splash issue fixed...Planning to go one by one

I have added the code to the git
https://github.com/Chennai-Rains/comk...

Please review the contents if possible
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Thanks.
About the splash problem:

I noticed two things:
1. Your splashes appear to be jpg format, not png. They have .jpg extensions and in your config, they are named xxx.png. You should have true png images (with .png extension, of course)
2. The screen-iphone-portrait-667h-2x.png is not 750 wide. It is 1 pixel wider. You should carefully create images with the exact correct dimensions.
Photo of Chennaiyil Oru Mazhaikalam

Chennaiyil Oru Mazhaikalam

  • 8 Posts
  • 0 Reply Likes
Thanks you very much for you time and the feedback....
Splash screen and disqus embd login also works now.

Splash works with jpg also and now I want to display the splash screen for 5 seconds.


<preference name="SplashScreen" value="Screen" />
<preference name="FadeSplashScreen" value="false"/>
<preference name="ShowSplashScreenSpinner" value="false"/>


Apart from the above preferences do i have to add

<preference name="SplashScreenDelay" value="5000" />
as mentioned in the plugin documentation

https://cordova.apache.org/docs/en/la...
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Sure. That's what the docs say.
But why 5 seconds? Wouldn't you rather dismiss the splash as soon as your first screen can be displayed?
Photo of Chennaiyil Oru Mazhaikalam

Chennaiyil Oru Mazhaikalam

  • 8 Posts
  • 0 Reply Likes
Some images are loaded in the startup and it takes close to 5 seconds...Only when i set 5 seconds, there is no black screen display before the landing page displays... After adding the above preference it works without any black screen.

Again thanks a lot for your great support...Now working with adding pushwoosh notification module...Hoping to complete without much issues this time so that we send notifications during the severe thunderstorms during our monsoon starting from June

Previously we used andromo build with airpbop for notification and it was very costly hence the reason we moved to phonegap build after designing mobile site seperately.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Some images are loaded in the startup and it takes close to 5 seconds...Only when i set 5 seconds, there is no black screen display before the landing page displays...
I don't think that's sound reasoning.
Five seconds is five seconds...on any device. But your images may load in 2 seconds on one device and in 6 seconds on another device. You never know. That's why I would suggest to hide() the splashscreen once everything is ready to be displayed....no matter how long that takes.

Thanks for explaining some of your project's background.