My websocket connection works:
When testing on localhost on Desktop Chrome, Desktop Safari, and iOS
When testing on production on Desktop Chrome and iOS.
It DOES NOT work:
When testing on production on Desktop Safari
There are no console errors in the browser. I can see the websocket is created, but it never fires "open" event on Desktop Safari. On the server side, the connection comes through fine everywhere other than from Desktop Safari, where I don't see anything come in.
The websocket is on the exact domain as the origin, and both are using secure connection (https/wss)
There are a lot of moving parts on production (e.g. load balancer). I've looked at and configured things like "stickiness" and TLS versions on each layer in production.
Again, it works most places.
I'm thinking there must be something like TLS, CORS, etc that I'm not fulling understanding that is causing the breakdown.
This is what happens on iOS (and about the same in Chrome desktop, etc):
This is what happens in Desktop Safari on Mac:
Well. After many hours of spinning my wheels I solved it:
There is a setting in AWS Load Balancer attributes called "Client port preservation". Once I checked this, websockets started to flow from Desktop Safari:
Related
I'm developping a website which is meant to be used on mobile devices using Google Chrome, the purpose is to list information such as time (hh:mm) and battery level.
I saw the Battery Web API but I'm experiencing a strange error:
click to see the chrome error
Here is the code I used in order to get the battery level:
navigator.getBattery().then(function (battery) {
console.log(Math.round(battery.level * 100))
});
I had the error yesterday, without changing any line of code, it is working today on my tablet (chrome version: 103), but I tested on another tablet (Samsung Galaxy TAB A7 LITE, Chrome version: 103) and I encounter the error, I restarted several times the devices, inspected pages using the devtools connected by cable to my laptop, but I can't solve this error.
I saw a topic having the same error but he was developing a web worker it is not the same context as I.
No matter when I'm calling the navigator.getBattery() if the error appeared in the beginning it will stay undefined later, so it is not a problem of timing to call it (I even bound it to the body.onload but it didn't work).
I thought it could be authorization issues on system information but there's nothing refering to the battery which is not authorized in the application settings of Chrome.
Any help is welcome :D
I found out where my error was coming from.
It is a problem of HTTPS, my testing environment is configured behind a NGINX HTTP Server, which serves HTTP and HTTPS version of my application in order to use a single certificate for every of my projects, Chrome on my laptop prefix URLs I'm accessing with https:// and it is hidden in the navbar, but it is not the case on Chrome tablet or mobile, I thought I was consulting the HTTPS version but it was HTTP, and Battery Web API isn't accessible on HTTP websites, it is required to have a secure connection using HTTPS and certificates. It has nothing to do with version number since Battery Web API is fully supported since Chrome version 38 according to MDN Documentation.
I have a pretty standard geolocation implementation I'm using in JavaScript.
navigator.geolocation.getCurrentPosition(
function (position) {...},
function (error) {....}
);
It is and has been working great on Internet Explorer/Chrome on my main Windows machine, physical Android, IOS on different iPhones...It's not working on my Macbook Pro with HighSierra and latest Safari though.
I downloaded an old version of Safari for Windows, and while I know it's old and deprecated, I figured I could at least see and it doesn't work on that either so I feel like that somewhat means something as far as testing goes.
The error code I'm getting back is POSITION_UNAVAILABLE. Here's where it gets really weird, I got so fed up because it really is on my end inexplicable, I decided to try other websites on Safari that have demo geolocation to test, html5demos.com, w3schools etc. All return same thing on Safari when debugging their code. Same thing with the older version of Safari for all tests on all websites on a completely different machine.
My site is HTTPS, I have confirmed location services are enabled on Safari for the website, I'm prompted for approve/deny location. I've confirmed all location services are active on the MBP system preferences. I have no idea what the heck is the deal, I can't confirm if...it's something...on this machine since it's my only MBP I have access to, but again it works on mobile IOS and every other website I've tried that has a Geolocation demo on the MBP does not as well on my Windows box with the last available version of Windows Safari 5.1.7. I'm using wifi if that matters at all since I've seen a hard connection for whatever reason coming up sometimes as a problem when consulting Google.
Any ideas?
I have really strange problem. The thing is it seems that Cloudflare Rocket Loader doesn't work on mobile devices, but works perfectly on desktops.
My website is loading for less than a 1 sec on desktops and for more than 12 secs(!) on mobile devices.
I checked Networking in Chrome dev tools.
This is what's happens on desktop:
screenshot
And this is on Android device:
screenshot
It seems that Rocket Loader is just ignoring everything. What could be the problem?
RocketLoader is still in beta so can be a bit bugger. The better alternative is to enable HTTP/2 which has the benefit of multiplexing and a single connection whilst also having other benefits such as Server Push and Header Compression.
To get HTTP/2 on Cloudflare, all you need to do to enable SSL on your site (such as by setting an "Always Use HTTPS" Page Rule in Cloudflare).
On IOS 10 within safari (and chrome) websocket connections are dropping, I can see it making the initial connection on the server side, but then doesn't keep it alive.
Before updating to IOS 10 everything was working correctly, it also works fine in safari on OSX.
There are also no signs of error in the JS console my initial thoughts are issues with the Content-Security-Policy but I have still come to no avail.
I'm developing an application that design to be inserted in side web-site via iframe.
Recently QA reported about notisable performance regression between prod and dev env in chrome (Sasmung S3)
During some researching I've defined that it's not a regression, mobile app works the way faster under iframe on this device in chrome browser.
I tested on different devices and seems that the such behaviour present only on Samsung devices (also tested on Samsung S7 edge, HTS one, Nexus 5).
On Nexus5 and HTS one there is no difference is iframe present or not.
How to explain such behaviour?
iframe forses GPU mode on mobile devices.