App broken using Instagram In-app browsing

Our app is completely broken when navigating from in-app browsing on Instagram; it won’t update and the “We just added changes, please click here to refresh” is constantly appearing. The app works through all other channels. No buttons are clickable. When I update the sites “please click here to refresh” to a new message, nothing is updated. The site version is old. There is no distinction between “Mobile Version” of the site and regular version (we’ve left that selection blank in the page editor). Will be experimenting and updating. Viewed all related threads I could find before posting.

We could use some help ASAP; our site is live and we’re getting thousands of hits from this channel :cold_sweat:

Update: it appears that Instagram is caching our browsers at a point in time when we were updating the site. Looks like it is working for other devices, but continues to be broken on our teams. Clearing caches on Instagram browser doesn’t help.

Just to make sure that this is not a Bubble-wide problem, I checked my app through an in-app Instagram link, and it works fine. Perhaps it’s a cache problem on your test device? I will be happy to check your link through my insta app, if it helps. Send me a DM.

It looks like in-app instagram browsing does have some aggressive caching, for example, Wordpress sites also have had similar problems (updates not pushed through insta-browsing). Further, the only way to bypass such caching probably is at the CDN level, so probably not doable in Bubble in a simple way. Hopefully, more advanced Bubblers will have some suggestion.

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.

Please do let us know if you have any other questions.

3 Likes

did anyone to solve this problem? this is real hell

1 Like

@emmanuel There are a number of threads with dozens of users that are aware they are experiencing this issue. There are probably a few dozen that are also having this issue, but aren’t aware of it.

I implemented the ‘fix’ that was recommended to me, but the solution did not fix the problem and was atrocious from a UX perspective (the URL kept changing dozens of times every 30 seconds). I even sent screenshots of the ‘fix’ to ensure I did it correctly.

This is tanking our conversion rates on Instagram, which is our dominant channel and is causing thousands in lost revenue. The issue appears to be relatively isolated to bubble apps, with the exception of a few WooCommerce sites, which seem to have implemented an actual fix.

We would appreciate a prompt solution.

Using URL shorteners like Bitly seems to help a bit, though responsiveness seems quite broken still.

Update: URL shortener was a partial fix for the homepage, but the rest of the site is broken.
Update: homepage now broken as well.

Very sorry you’re having this issue! Can you file a bug report for this case? We’ll need to look at your application, and then the success team will be able to assist you.

Thanks!

I have filed a bug report and did not receive a working solution as outlined above.

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