JavaScript on iPad needs regular reboot of network connectivity - javascript

One website I regularly access on my iPad has various JavaScript elements which stop working after around 15 minutes of use (it appears not to be after a set number of actions, if I do one interaction then leave it 15 minutes I have the same problem).
The problem happens on two different iPads on the same network. A fairly old iPad 3 with latest iOS 9.3.5 and a brand new iPad Mini 2 also with latest iOS. If I use mobile internet connection (tethered to my phone) rather than my in-house Wifi I don't have the problem.
The problem doesn't occur on desktop browsers, even when running as an iPad by updating the agent.
The website owners are supposedly investigating, but have said they can't recreate on their mobile test devices. Don't know how hard they have tried mind you!
Originally I though that the only thing that can make the website work again was to switch off and power on again the iPad. Closing the tabs, or the whole browser, or clearing history etc, makes no difference, only powering off and on again. I have more recently figured out that just disconnecting from the network and reconnecting, then reloading the page appears to reload the failing Javascript elements.
Using private browsing until the problem occurs and then closing down the tab, leaving private browsing, and then re-entering has certainly cleared all information as I have to login to the website again, but the problem persists.
So my question is, what could a network do to stop loading javascript parts of a webpage that disconnecting and reconnecting would fix? i.e. what might I have to fix on my home network? If there is any other information I can give, please do let me know.

Related

Videos stop playing on mobile, browser thinks that the video is still playing

The problem:
On my website mrgigi.me, I have 3 videos that start playing once the videos are visible in the viewport with javascript's .play()/.pause() API.
However, after a few seconds of playing the videos they all freeze on a frame. Checking in the console if the videos are paused with videoID.paused, returns the boolean false.
Meaning that the browser still thinks that the video is playing without any problems.
Using the play/pause buttons also do not work after the video freezes.
A few things to be noted:
This only happens on mobile, on desktop it works perfectly fine.
I am using an iPhone 13 Pro on, at the time of writing, iOS 15.4.1
I tried different mobile browsers which include:
The default browser, Safari
DuckDuckGo Browser
Brave Browser
This only happens when the website is deployed/hosted (so going to the website's domain). It works perfectly fine when using a local server like Live Server
For hosting, I'm using Firebase and Cloudflare
All the code can be found on the GitHub repository: DarthGigi/mrgigi.me
Here are a few videos demonstrating the issue:
Video showing the bug
Video showing the console output
It seems like there was nothing wrong with the code but with the hosting platform I was using, Firebase.
I do not know what the problem exactly was with Firebase, so I switched to Vercel (GitHub Pages would have fixed it too).
Thanks to Jack Latimer for helping me find the cause of the problem and also providing a fix for it!

iOS Safari Won't Refresh Javascript Content

I just created this Awesome Website with some interactions, but I found a bug on iOS Safari about the 'Firebase' Animation (it won't work). So I connected my iPhone(iPhone 6, iOS 12) to my Mac with a cable to use the Safari Web Inspector.
But then even when I reload the page or open it again, the JavaScript content won't reload. However, on desktop browsers, the changes have been applied.
The bad thing is that I'm a student and there's this stupid thing about screen time that blocks private mode and history&cache delete.
I really need to fix this bug and there's a bunch of other bugs to fix, so probably waiting until the page fully reloads will drive me nuts. Is there any way to do a 'hard' reload, or is there any other ways to fetch data from the server again?
Just found the answer.
Connect the iPhone to your Mac via USB cable, open the web inspector, then press ⌥⌘R.
The keyboard shortcut also works for iOS safari.

How to debug WebSocket / Server Sent Events reconnections on desktop?

I am developing an app that uses Server Sent Events (SSE - basically one-way websockets). If the user uses the site on their mobile chrome browser and then tabs out for about a minute, the SSE connection breaks. If the user then tabs back into the site, it doesn't refresh the page (this is good). But I still need to re-establish the SSE connection so that the server can resume sending messages to them without a refresh.
I'm trying to debug my implementation but having to do it on mobile is very tedious. I have to grab my phone, refresh the page, then tab out, wait 1 minute (so the connection can break), and then tab back in to determine if my code for re-establishing the connection worked properly.
I would much rather be able to debug this on desktop, but I haven't found a way. I have tried the following:
Tried 5 different Chrome extensions for sleeping a tab. Unfortunately, when you navigate back into the tab it just refreshes the page rather than resumes it.
Tried using USB Debugging, but the desktop keeps the tab open at all times even if you tab out on mobile, so the tab never sleeps.
Tried running debugger; in the Chrome Developer Tools console, but even if I let the Javascript sit with its execution frozen for 5+ minutes, it never breaks the SSE connection, so I can't test if reconnecting works.
Tried using an extension to kill the internet for Chrome, but miraculously, this still maintains the active websocket/SSE connections. Apparently Google engineers have deprioritized this effort?
Basically, I am looking to simulate the behavior that happens on mobile when you tab out of your web browser, wait a minute, and then tab back in (the Javascript execution is frozen, the SSE connection is broken after a minute or so, and then tabbing back in resumes Javascript and attempts to reconnect the SSE connection).
Is this possible?
I think that best change you have by emulating your android device. You can do so by installing android studio from https://developer.android.com/studio and then here you have all you need to start and manage your virtual android env https://developer.android.com/studio/run/managing-avds
This it the way I debug my whole mobile development
The most obvious solution to me would be to attach a listener that tracks the events related to tab activation and build some custom solution upon that.
Simply:
window.onfocus = () => {
// Restore SSE session
};
window.onblur = function () {
// Inactive
};
Just for info, SSE is a different protocol from websockets.
In case you are interested in using websockets implementation, I suggest the following library which works very well in my experience: https://www.npmjs.com/package/#stomp/stompjs
Stomp is an abstraction over the websocket protocol, but it also means you would need to implement this on the server side as well.
You can use the chrome://discards to freeze your tab.
You should close and restore the connection based on the Page LifeCycle events.
You Can Try to use pause execution
goto:
Chrome javascript console (Ctrl+Shift+J) > sources > pause script (press f8)
This simulates like a mobile tab switching so you can debug easily
I think this is the simple and easy solution. thanks

Strange website redirect issue on mobile browser that's influenced by cache

I'm at a loss here.
I have a new Wordpress site at synergration.com.
If you access it on a mobile device (phone, not tablet) it will generally load fine the first time. Once you click on to another page and/or reload the home page it jumps into a redirect loop indefinitely attempting to reload the same page over and over and over...
I've weeded through the code and have been unable to find any JS redirects. I've also contacted the theme developer and they've been unable to help.
This only became an issue when I started hosting on WP Engine. They use some advanced caching that seems to be the culprit here as when I test the mobile site on their staging server (where no cacheing exists) it loads fine.
I contacted WPEngine about it and this was their reply:
This is being caused by our caching systems that run on our platform.
It looks like the theme is handling an internal redirect that detects
the user agent (desktop or mobile) and redirects the visitor to the
appropriate site based on that information. However, the redirect is
getting stuck in cache, causing the mobile version to load in an
infinite loop. Unfortunately, we don’t have an easy solution for this.
If this were only one part of the site, we could just exempt that part
of the site from caching, but because it covers the whole site,
exempting from caching isn’t an option. Our staging area is exempt
from all caching, which is why it’s working normally there. (The old
host was most-likely using a non-cached environment, which is why you
didn’t see this issue there). I would contact the theme developer and
ask them if they’ve ever come across this issue before. There’s a good
chance they have, and they might have a clever solution as a
work-around. You might have the option of disabling the mobile
routing, which would solve the redirect issue, though mobile devices
would load the full version of the site rather than the slimmed-down
mobile version.
As noted above, the theme developer didn't have any solution and I'm back at square one so I figured I'd reach out to stack to see if ya'll had any ideas.
I have two sites on WP Engine with redirect. They are identical gensis child themes and redirect plugins. I have one setup with a DNS redirect to a cname record for a "M.sitename.com" URL and the other redirecting to the mobile site that is having the same issue you noted above. I haven't had an issue with the site that points to the cname record. I am about the change the other site to the cname configuration to see if it makes a difference. I have no ideal why this works, but thought you might find this of value.
It works absolutely fine in my mobile's Opera Mini browser. To answer your question, an alternative way is to just create a mobile subdomain, like m.yourdomain.com. Make this decision public and let mobile users know in advance that that is the site for mobile users. A specific mobile site is loads better than visiting the page and then being redirected. It also saves time.
While developing the mobile site, keep in mind, to use minimal JavaScript. The reason being, that older mobile versions may not support JavaScript and if JavaScript is essential then it becomes a big problem.
Speaking about the theme, if it is getting stuck and developer has no idea, so the best option, FOR NOW, is change the template. Let the developer inspect on his very code. You can by that time use another template, that'll keep the site up running well whether it is on Mobile or anything. Because, small errors can divert lot of traffic from your site. I, to be frank, have no idea about what caching problems WP is having, and I don't expect anyone here to be knowing that, so it really depends on time. Till then, as I said, do try to use some other template for the time-being.
All the best.
I faced similar issue recently. It took good amount of time but I finally figured it out.
To prevent redirect from caching, you have to use 302 redirect. Moreover, you have initialize this redirect in "template_redirect" action of wordpress. If you do it in like "init", it'll be cache too.

iOS 5 Mobile Safari application cache changes?

I'm wondering if anyone has run into new problems with using the HTML5 application cache in Mobile Safari on iOS 5 devices? I had previously written an offline web app that worked well in iOS 4, but as devices that use this app are being moved over to iOS 5, I am discovering problems when devices are offline and attempting to access what should be cached resources.
I can confirm that the application caching procedure is working as expected, as I can track the hits to my webserver as resources are downloaded while the device is online.
The problem manifests itself in the form of the "Cannot Open Page: Safari cannot open the page because it is not connected to the Internet" dialog box when I attempt to follow a link to a page that should be cached while I am offline.
Interestingly, around the same time this error pops up, in the Debug Console one also gets the "JavaScript execution exceeded timeout" error, similar to what is mentioned in this thread. I'm not doing any computation nearly as complicated as what was posted there, but the suggestion to kill and restart Safari seems to fix both problems, at least for now.
So maybe this question is less a request for help and more of a landing place for future searchers to share their experiences.
Please check if you have added the cached page itself into the manifest file, in below example they are HTMLPage1.htm & HTMLPage2.htm. I have the same problem but it works after adding the cached page link.
CACHE MANIFEST
CACHE:
images/cover.png
HTMLPage1.htm
HTMLPage2.htm
NETWORK:
*

Categories