4 Replies Latest reply on Mar 8, 2017 3:06 PM by StartGuides

    App screen wlashes white before content loads

    StartGuides Level 1

      We use InDesign CC 2017 to design apps, export as HTML, and use PhoneGap Build to create APK for Android. Things have been working perfectly until Marshmallow (Android 6.0) came out.

       

      In a nutshell, the problem is this:

      Since Android v6.0 (API 23) came out, we're getting a white flash before every page load in our apps. That is, when you tap a button to jump to a different page, the screen goes white for half a second before loading the content. With Android v5.1.1 (API 22). everything works smoothly with no flashes between screens. So, something that was implemented in API 23 has us up against a wall. We are building these apps for a customer for their fleet of Samsung Tab S2 8.0 devices. The apps we are building are completely self-contained, as this fleet of devices are network-disconnected (no wireless or internet connection). The HTML that the app is built from in PhoneGap runs flawlessly in a browser, and the APK runs fine in a Tab S2 API 23 emulator.

       

      We are not programmers, so we reached out to a very talented developer friend to see what he could see under the covers, In case it's helpful, below is what he said. Just one person's analysis, but offering it FWIW.

       

      "Ok, so, this phone gap thing. calls chrome like mad. You have a classic cumulative latency issue here. Every time phone gap asks for a page it opens a chrome tab, passes it to the “app” and closes it, and actually, you can see this in the chrome history. HTML is flawless, thats how I know it, Phone gap is causing the white flash. It's mis-handling the delay. In the emulator it's also flawless. The HTML just works - but on the device there is a delay to launch a chrome tab. I'm pretty confident in this."

       

      Hoping someone in the PhoneGap Build community can help us fix this. It's becoming a real problem and we can't downgrade the devices to API 22.

       

      Thanks in advance for anything that is offered.

       

      Steve

        • 1. Re: App screen wlashes white before content loads
          kerrishotts Adobe Community Professional

          Without seeing the code behind your app, it's impossible to say for certain, but my guess is as follows:

           

          You probably built the app like a website and not like a web app. The two are very different in approach. Web apps are typically built using the "single page architecture", whereas a lot of websites use multiple pages. The terminology here is a bit misleading, though -- SPA does not mean a single HTML file. What it really means is that there is no navigation away from the entry point (index.html, usually). This has the benefit of allowing the app to "fake" native navigation animations and such, at the expense of having to worry about memory and such. A web site, though, typically navigates by unloading the current page and loading the desired page. This gives no opportunity for animation handling, and is ultimately slower (PhoneGap has to re-initialize some things). It also can lead to the white flash you are seeing. (That you didn't see it before only meant that you got lucky.)

           

          There is, unfortunately, no quick fix. The app needs to use the single page architecture. You'll almost certainly want to use a framework to accomplish this (Framework 7, Ionic, etc.). My guess is, though, that you'll be able to get away with a fairly simple "wrapper" of sorts without having to change all of your pages and such. But that's a guess based on my assumptions of your app architecture currently.

          • 2. Re: App screen wlashes white before content loads
            StartGuides Level 1

            Kerri,

             

            Thanks for your response. We built the app using InDesign, which does export HTML as multiple pages, so what you say make sense. But why would every app we've built so far have worked fine in Lollipop, then suddenly do this upon upgrading to Marshmallow. I am not convinced it's luck. Isn't  it possible that the PhoneGap Build compiler is interpreting something in the source code in a way that is no longer compatible with the "upgraded" Android OS?

             

            In any case, how would one go about creating a "wrapper" to test this theory without recreating everything from the ground up? Can you direct me to a reference somewhere?

             

            Again, many thanks!

            • 3. Re: App screen wlashes white before content loads
              kerrishotts Adobe Community Professional

              So, there is no guarantee of visual persistence when navigating between web pages. There never has been; that you've not had a problem thus far is why I'm saying you got lucky -- you were essentially relying on undocumented behavior (the webview was being really kind to you!). There are lots of reasons why flashes can occur during navigation (not least of which is that the context is being unloaded, but could be due to timings of when content starts to be streamed in, or web fonts / styles, etc.), and not all of them are consistent across all platforms, which is one reason why hybrid apps typically aren't built this way. Besides, most hybrid apps want to control the exit of the old material and the presentation of the new material, and you can't do that simply by navigating away from your current context.

               

              PhoneGap itself is just using the system webview to render your content, and providing a bridge between the webview and native features. It's not interpreting anything in your source code -- the webview itself is responsible for that, and as such, if the webview wants to flash during navigation, there's not a whole lot PhoneGap can do about it.

               

              As far as testing something goes, Framework 7 might be an option. It won't be super trivial, but you should be able to take one of their examples and tweak it appropriately. Link: http://framework7.io/ The feature you'd be using is called Ajax Pages in their terminology: http://framework7.io/docs/pages-ajax.html 

               

              There's probably a tutorial on how to convert from MPA to SPA online somewhere, but I've just always used SPA from the start, so I don't have any links handy. If someone else has a good tutorial/reference, they can chime in.

              • 4. Re: App screen wlashes white before content loads
                StartGuides Level 1

                Kerri,

                 

                Thanks again for helping. Our apps are completely off-line, self-contained content, so there's no streaming of anything. It's all called from local folders on non-networked Tab S2s. Not sure if that adds any information that would change anything, but wanted to reinforce that.

                 

                I'll look into options you suggest, and do a search for converting MPA to SPA, if such a thing even exists! If you have any more ideas or commentary, everything is appreciated.