4 Replies Latest reply on Aug 10, 2016 1:02 PM by kerrishotts

    App not working without Hydration

    dgarnier

      Hello!

      I´m having the same problem of issue https://forums.adobe.com/message/8866421#8866421.

      My app works fine with hydration enabled, but when I disabled it, the cordova icon appear instead of my splash screen and just freeze.

       

      I´m testing on iOS 9.3.2 version.

      I do always remove my app before installing a new build from PGB.

      App Id: 2207016 (private app)

       

      I am using this meta tag policy in the <head> of my html:

      <meta http-equiv="Content-Security-Policy" content="default-src 'self' http://www.myappsite.com.br https://www.youtube.com 'unsafe-inline' 'unsafe-eval' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *">

       

      my config.xml is:

      <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.myapp" version="1.5">

        <name>MyApp Name</name>

        <description>My app description</description>

        <author href="http://www.myappsite.com.br" email="daniel@myappsite.com.br">author name</author>

       

        <content src="index.html" />

       

        <!-- Target Platforms -->

          <platform name="android" />

          <platform name="ios" />

        <!-- /Target Platforms -->

       

        <!-- Multi Platform--> 

          <!-- preference name="phonegap-version" value="cli-5.2.0" / -->

          <preference name="phonegap-version" value="cli-6.3.0" />

          <preference name="orientation" value="portrait" />

          <preference name="fullscreen" value="true" />

        <!-- /Multi Platform--> 

       

        <!-- iOS Platform -->

          <platform name="ios">

            <preference name="target-device" value="universal" />

            <preference name="prerendered-icon" value="true" />

            <preference name="detect-data-types" value="true" />

            <preference name="exit-on-suspend" value="false" />

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

            <preference name="show-splash-screen-spinner" value="false" />

            <preference name="deployment-target" value="7.0" /> <!-- Minimum version -->

          </platform>

        <!-- /iOS Platform -->

           

        <!-- Android Platform -->     

          <platform name="android">

            <preference name="android-minSdkVersion" value="14" /> 

            <preference name="android-installLocation" value="auto" />   

            <preference name="android-windowSoftInputMode" value="stateHidden|adjustResize" />

            <preference name="SplashScreen" value="splash" />

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

          </platform>

        <!-- /Android Platform -->

         

        <!-- PLUGINS -->

        <plugin name="cordova-plugin-dialogs" source="npm" />     <!-- spec="1.1.1" -->

        <plugin name="cordova-plugin-splashscreen" source="npm" />  <!-- spec="2.1.0" -->

        <plugin name="cordova-plugin-inappbrowser" source="npm" />  <!-- spec="1.0.1" -->

       

        <plugin name="cordova-plugin-google-analytics" source="npm" />  <!-- spec="1.5.3" -->

       

        <feature name="UniversalAnalytics">

          <param name="ios-package" value="UniversalAnalyticsPlugin" />

        </feature>

       

        <feature name="UniversalAnalytics">

          <param name="android-package" value="com.danielcwilson.plugins.analytics.UniversalAnalyticsPlugin" />

        </feature>

       

        <feature name="UniversalAnalytics">

          <param name="wp-package" value="UniversalAnalyticsPlugin" />

        </feature>

       

        <icon src="icon.png" width="128" height="128" />

       

        <!-- iOS 7.0+ -->

          <!-- iPhone / iPod Touch  -->

          <icon src="res/icon/ios/icon-60.png" platform="ios" width="60" height="60" />

          <icon src="res/icon/ios/icon-60@2x.png" platform="ios" width="120" height="120" />

          <!-- iPhone 6 / 6+ -->

          <icon src="res/icon/ios/icon-60@3x.png" platform="ios" width="180" height="180" />

          <!-- iPad -->

          <icon src="res/icon/ios/icon-76.png" platform="ios" width="76" height="76" />

          <icon src="res/icon/ios/icon-76@2x.png" platform="ios" width="152" height="152" />

          <!-- Settings Icon and Spotlight and Settings Icon for iOS 6.1 -->

          <icon src="res/icon/ios/icon-small.png" platform="ios" width="29" height="29" />

          <icon src="res/icon/ios/icon-small@2x.png" platform="ios" width="58" height="58" />

          <!-- Spotlight Icon -->

          <icon src="res/icon/ios/icon-40.png" platform="ios" width="40" height="40" />

          <icon src="res/icon/ios/icon-40@2x.png" platform="ios" width="80" height="80" />

        <!-- /iOS 7.0+ -->

       

        <icon src="res/icon/android/icon-36-ldpi.png" platform="android" qualifier="ldpi" width="36" height="36" />

        <icon src="res/icon/android/icon-48-mdpi.png" platform="android" qualifier="mdpi" width="48" height="48" />

        <icon src="res/icon/android/icon-72-hdpi.png" platform="android" qualifier="hdpi" width="72" height="72" />

        <icon src="res/icon/android/icon-96-xhdpi.png" platform="android" qualifier="xhdpi" width="96" height="96" />

       

         <splash src="splash.png" width="320" height="480" />

       

        <splash src="res/icon/android/screen-36-ldpi.png" platform="android" qualifier="ldpi" width="200" height="320" />

        <splash src="res/icon/android/screen-48-mdpi.png" platform="android" qualifier="mdpi" width="320" height="480" />

        <splash src="res/icon/android/screen-72-hdpi.png" platform="android" qualifier="hdpi" width="480" height="800" />

       

        <splash src="res/screen/ios/screen-iphone-portrait.png" platform="ios" width="320" height="480" />

        <splash src="res/screen/ios/screen-iphone-portrait-2x.png" platform="ios" width="640" height="960" />

        <splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" platform="ios" width="640" height="1136" />

       

        <!-- https://www.npmjs.com/package/cordova-plugin-whitelist -->

        <plugin name="cordova-plugin-whitelist" source="npm" /> <!-- spec="1.0.0" -->

       

        <!-- navigation Whitelist: Controls which URLs the WebView itself can be navigated to. -->

        <allow-navigation href="*://*.myappsite.com.br/*" />

        <allow-navigation href="http://*/*" />

        <allow-navigation href="https://*/*" />

        <allow-navigation href="data:*" />

       

        <!-- A wildcard can be used to whitelist the entire network,

           over HTTP and HTTPS. *NOT RECOMMENDED* -->

        <!-- <allow-navigation href="*" /> -->

       

        <!-- intent Whitelist: Controls which URLs the app is allowed to ask the system to open. By default, no external URLs are allowed. -->

        <allow-intent href="*://*.myappsite.com.br/*" />

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

       

        <!-- Network Request Whitelist: Controls which network requests (images, XHRs, etc) are allowed to be made (via cordova native hooks). -->

        <!-- Don't block any requests -->

        <access origin="*" />

      </widget>

        • 1. Re: App not working without Hydration
          kerrishotts Adobe Community Professional

          What platform(s) and device(s) are you testing on? Does the issue occur on all of the targets?

          • 2. Re: App not working without Hydration
            VectorP Level 4

            Two common problems when using Hydration:

             

            1. If you make any config changes, make sure you disable Hydration before uploading and rebuilding, otherwise Hydration will make PGB ignore any such changes.

             

            2. Hydration comes with its own whitelisting rules (which are quite broad and general). Switching off Hydration makes the app depend on its own whitelisting rules. If these are omitted or tighter, it's often a sign that something is missing in the whitelisting.

             

            Also, I strongly suggest you remove the feature elements, as they are obsolete in PGB.

             

            Finally, you're missing several splashes for the larger screen dimensions.

            Android: xhdpi, xxhdpi and xxxhdpi

            iOS: see the 'launch images' Apple iOS docs.

            • 3. Re: App not working without Hydration
              dgarnier Level 1

              Thanks for the tips!

               

              Answering each point:

               

              1. The updade function in PGB never works well for me. Then, I do delete the app from PGB and create another leaving hydration off.

              2. OK! I got that. I've read it in another post that you have made. I don´t know for sure if my whitelisting rules are enough, but I've tested in Chrome Browser (inspect view) and resolve all security errors showed to me.

              3. OK! feature elements removed.

              4. OK! I will complete this missing splashes. Do you think this might be the reason for this error?

               

              Additionally, I have some critical doubts about PhoneGap structure:

               

              How my project is:

              inside www/ folder:

              css/

              img/

              js/

              res/

              spec/

              themes/

              index.html

              config.xml

              icon.png

              splash.png

              page2.html

              page3.html

               

              But, PhoneGap Desktop (v0.3.5) "simulator" only works if the config.xml is outside the www/ folder. So, what I do is to copy the config.xml for outside the www/ folder, just fo work with PhoneGap Desktop.

              When I do make the zipfile for PGB, I do include all the files and folders inside the www/ folder (not including the www/). Is that correct?

               

              I realized that I have this js call in my index.html, but I don´t have this js.

              <script type="text/javascript" src="cordova.js"></script>

              PGB resolve this missing file or I have to include it?

              I´ve just follow the index.html example that PhoneGap Desktop creates and also don´t have the cordova.js file.

               

              The last doubt (for now):

              Do I need to have some JS code for initialize (device ready) my app in index.html? If yes, could you give me a simple example for how to do this?

               

              Thank you!

              Daniel

              • 4. Re: App not working without Hydration
                kerrishotts Adobe Community Professional

                See my response here regarding zip structure: Re: error: no index.html present

                 

                PGB (and the CLI) will always take care of adding "cordova.js" to your project. You should never include this file anywhere (just reference it in index.html).

                 

                You must always wait for "deviceready" before starting your app. See Events - Apache Cordova