Bubble apps broken using Instagram in-app browsing on Android/Pixel: Megathread

Hi Bubblers:

I’ve experienced a major bug in Bubble and Bubble nor I are able to come up with a solution.

It appears that bubble apps don’t work when accessed via an Instagram browser on Pixel/Android (but perhaps it isn’t limited there).

Here are all the threads without solutions:

I received this response from Bubble:
However, this is a behavior we have noticed in the past and is related to how Facebook caches webpage for its build in-browser. No matter how aggressively we attempt to refresh a page (hit refresh, click again, clear app cache, reinstall the app…) it would still not update properly. This seems to point to the possibility that the Instagram embedded browser does not actually render the actual page, but almost certainly ‘speeds up’ rendering by going through its own servers, and tries to pre-render the page, then returns a cached version from its servers.

The caching rules in question are extremely opaque, but it could be a definite possibility that it caches based on the date (we have seen in the past that waiting overnight would enable us to get an updated version of the page) and based on the navigator’s user agent.

Unfortunately, I don’t think that we can control, or even properly verify these claims given how much of a black box that browser is, but given Facebook’s precedent for offering its own speed-focused VPN, and the fact that the pages load visibly faster inside the Instagram app than in the chrome browser when throttling the connection speed, this seems a very likely scenario.

Since all of this is not under our control, but that we still want pages to look great in this scenario, our suggested workaround is to trick the page into refreshing by itself every time a user navigates to it.

An easy way to do this would be to add a ‘page is loaded’ event on your index page, that redirects to the page with an extra url parameter (say, timestamp=Current Time:extract UNIX timestamp) every time you navigate to the page without a parameter. You would then have the bare page linked in your Instagram profile, and clicking there would redirect to a new page whose URL changes all the time. That way, no single breakage in the caching would persist more than once. What we have observed, for instance, is that simply appending ?test=test to the URL made the bug go away in Instagram, because probably that page was not cached, and did not exhibit the bad responsiveness bug when it loaded. I suggest you try different combinations of this trick, and see if you possibly have to periodically tweak the page URL in the first place to make sure that nothing gets cached in a broken state.

Additionally, our engineering team is currently exploring solutions to bypass the Instagram browser altogether by implementing a solution similar to what is described in this post

I have tried implementing the Unix timestamp solution as well as using URL redirects via Bitly. Our app is still broken solely through the Instagram browser.

Who else is experiencing the issue? Has anyone found a solution?

Thank you, Jacob

3 Likes

Just tested and still an issue using my Pixel 3 , ouch.

Definitely interested in a solution here as this is pretty bad for any apps targeted toward users of instagram

1 Like

The funny thing is that even the bubble.io site is broken on the instagram browser with pixel devices. Check it out @emmanuel

It sucks to be spending $$$ on Instagram ads then have that be your customer’s first impression, but it’s nice to know that we’re in good company!

I think I’ve seen them advertising on Insta before, tough to see the money go to waste

+1 for this issue, anyone heard anything from bubble regarding a solution? This is causing us some quite major challenges.

Nothing yet, could you please submit a bug report as well? Let us know what you hear. Thank you!

This topic was automatically closed after 14 days. New replies are no longer allowed.