Cordova always breaks CSS when on 3G/4G, but works fine on WiFi

My cordova app works perfectly when on WiFi, no issues whatsoever, but if I use it from mobile data connection (wifi either disabled or out of range), the app will break when it updates to the latest code on the server (which happens immediatelly after install). There will be no CSS. Is anyone else having this problem? It is on both iOS and Android. Happens 100% of the time on mobile, but if I clear cache and re-open on WiFi, it will update perfectly fine. I don’t think it has to do with the quality of the connection as this has been happening for months and months when tried with dozens of different phones, all experiencing the same problem.

If you’re running localhost then the server and device needs to be on the same network(AKA Wifi) to be able to work properly. Or are you running it on a production server?

I’m running on a production server.

Essentially it seems like it isn’t loading Bootstrap (I’m using the official twbs package) or my custom css, even though both load fine when on WiFi.

I’m getting weird errors too, where my javascript files are not loading in the right order (i moduralize my app into components - each in their own file). I’m using famo.us for the rendering.

This is driving me insane. Is it not happening for other people? Why would it not work over mobile data but work fine over Wifi?

errr could it be that thing I read about where some mobile service providers are injecting some JS for analytics and tracking?? have you checked the developer tools by tethering your phone to your PC and debugging?

Articles mentioning TMobile and Vodafone doing it… (not recent though)



2 Likes

My Cordova app runs without any issues on both cellular and wifi connections.

Have you tried remote Chrome debugging to see where the issue is? Josh Owens covers Android and iOS debugging of Cordova apps in this helpful recent post:

http://joshowens.me/easily-debugging-meteor-js/

Wow. This was it. The people I had been testing with were all using Sprint. I found someone using Verizon and it worked fine for them.

I added this code and now it works on Sprint as well. This had really been causing a lot of frustration. Thanks so much!

var connectHandler = WebApp.connectHandlers;
Meteor.startup(function () {
  connectHandler.use(function (req, res, next) {
    res.setHeader("Cache-Control", "no-transform");
    return next();
  })
})
2 Likes

Just tried doing the same thing, but I get WebApp.connectHandlers is undefined…did you import a package or something?

Glad I could help!
I saw the title of your post and it was the first thing that came to mind.

No, I didn’t import a package. This is in the server folder.