Simulate a IOS environment for test website in safari - javascript

I'm developing an simples website using html, css/bootstrap and JS. I received feedback by Iphone user that some features not working in IOS mobile. Some Images not loading and counter-up not working too. In windows and android is working fine (chrome and Firefox). The question is, how I create a environment for simulate a IOS mobile for check how safari browser load my site? I tried install safari in windows but it not show equals execution in IOS. I think that browsershots not is a good ideia, because it works only with static content, and in the moment return 500 internal server error.

Microsoft BrowserStack provides a full test environment, however beyond the complimentary trial period it is not free. For errors related to pageload or reference, I would suggest you use device emulation and network throttling in a browser: Safari, Firefox, Chrome.
Some browsers are more forgiving of errors, so you may even have a typo. Is your trustworthy friend using an outdated browser while you require modern feature support? The scope of the problem seems undeserving of a bill for membership or tech support.

Related

Script not loading on iPhone

Recently I made my portfolio website and as I tested it today, everything works just fine on all of the most popular browsers. The problem is - I have access only to phones with Android and laptops with Windows. That way I am unable to test Apple devices and Safari itself.
For that, I asked my friend to visit my website on her phone (she has iPhone), so I can check if everything is ok. Unfortunately, when she entered my domain, Safari was unable to load JavaScript at all. What's even worse, she then installed Google Chrome and Mozilla Firefox, and the same stuff happened.
We were testing my website also on MacBook - that time also on Safari and Chrome. On Safari, there were some errors (it seems that at least part of the script worked), and on Chrome everything was right. I wasn't able to explore the problems, as we only had limited time via phone call.
Right now, my main issue is - why any browser on iPhone was unable to load the script? I would be very grateful if someone with iPhone or other Apple device could tell me what's happening there. The additional issue would be the Safari on MacBook. Because in this case, I was unable to detect anything useful, other than that only part of the script seems to be working.
Also, I don't know if that matters, but I used Webpack to bundle all JavaScript files. All code + domain can be found in the links below:
The website domain is: www.pmiecznik.pl
If you want to see those scripts/ style files - they are in the src folder in my GitHub repository.

Does off-site Push notification work on Chrome or Firefox for iOS?

Looking for information on compatibility for off-site push notifications on browsers, the following picture emerges:
Most desktop browsers support it, as long as they're somehow open or running in the background
Except Edge, which has Service Workers still under development apparently
Except Safari, of which, so far, there are only rumors that some day Service Worker implementation might be considered (or you can pay USD 100 for the privilege of using their completely non-standard implementation of push notification that has nothing to do with Service Workers)
On Android, Chrome and Firefox support it
On iOS, Safari definitively doesn't support it (same as for Desktop Safari, only worse since it's for "OS X only. Notifications for websites do not appear on iOS.")
However, there are iOS versions of Chrome and Firefox, but they don't seem to be the same codebase as their Desktop/Android browsers.
Firefox for iOS, in particular, According to MDN:
Because of Apple's App Store restrictions, [...] uses the built in
iOS UIWebView on iOS, which is based on WebKit
However, being restricted to using WebKit as rendering engine doesn't necessarily mean it's unable to implement service workers, or Push notification.
In particular, in the Push Notifications page of the Mozilla/Firefox wiki, there is this sentence:
Mobile is targeting Fx45+ to for initial support. Android and iOS will
leverage Google Cloud Messaging (GCM) and Apple Push Notification
Services (APNS) respectively.
Which, of course, sounds more like a declaration of intent or possibility, than of actual implementation.
So, does Push Notification using Service Workers work on Chrome or Firefox for iOS?
Are there plans to make it work on those iOS browsers, even while it doesn't on Safari?

Possible difference between "Safari on iPad" and "Safari on iPhone" on JavaScript

I have a project involving Google Maps API and some JavaScript codes. The page is build upon jQuery Mobile. I have the web page tested on Chrome, FireFox, Opera and IE on desktop, and on various mobile phones as well.
It doesn't work only on iPhone (4, nor 5). I mean, it's all good under Android, WP8, Chrome iPhone simulator, and even working perfectly on an iPad (Air, if matters).
It appears to be that Google Maps API is not loaded at all. It should be initialized after page load, and then show a map inside the page. But there's nothing. Also there's no alert about querying user's location, which does happen when using an iPad.
The safari on iPhone is the same version as that on my iPad, OS 7.0.4, Apple WebKit 537.51.1, Safari 9537.53. The devices are connected to the same WiFi network. Due to lack of a Mac I can't use the remote debugging function right now.
Any brief ideas about what's wrong with the application? I suspect it's inside JavaScript but I could be wrong.
Thanks.
I've found the problem and solved it.
It is because the location service is disabled for safari (by default), on iPhone. However it's enabled on my iPad (not sure if it's default) so that I get different reaction from the location service API.
I have to put an alert message for iOS users when detecting that location service is disabled. After it's enabled in the privacy settings on the device, the application works perfectly on all devices.
The patch code is here for those who need.

How to connect to iPhone's webkit debugger?

new iOS 6 feature is, that you can debug html and javascript running on device or simulator in desktop safari. I suppose, that this feature is based on Webkit Remote Debugging Protocol.
How can I connect to webkit running on iPhone without desktop Safari?
I can do this for mobile Chrome running on Android using websockets, but how can I do that for iOS devices?
The ios-webkit-debug-proxy project (from Google!) does this.
You want to look at this code https://github.com/leftlogic/remote-debug/tree/master/safari - although it fails when it actually comes to RPC calls that use __rpc_forwardSocketData.
If you've got any ideas why several of us are interested!
You need to open up the iPhone Simulator and browse to a website.
Then open Safari and choose "Develop" from the menubar. There is a the option called "iPhone Simulator".
If you hover over this you can see all of the open websites of the simulator.
This gives you the same inspector Safari uses. You can even see hovered elements in the iPhone Simulator.

how to emulate a mobile (android) browser on desktop

I'm trying to debug a problem that only occurs when I access a mobile website from a mobile browser. I strongly suspect that the root cause of the problem is due to caching that occurs when you access the same page several times.
I can reproduce the problem consistently when I access the page from my Android phone, but if I use a desktop browser the problem never occurs.
Because I can't use any developer tools on my Android phone, I really need to reproduce the problem from a desktop browser, so that I've some way of debugging into it. I've already tried using both Firefox and Chrome with an appropriate setting of the User-Agent header (so that the mobile version of the site is displayed), but that doesn't work.
Is there a better way to emulate the behaviour of a mobile browser from the desktop, in a manner that allows the client-side code can be debugged? FWIW, I'm fairly confident that I could also reproduce the problem on an iPhone, but don't have one available.
You can use a debugger on your phone, using chrome debugger.
Nowadays, you can just navigate to chrome://inspect/#devices after plugging your device in.
If that doesn't work, you can use the old method:
Connect your mobile device to the host using a USB cable
On the mobile device, launch Chrome. Open Settings > Advanced > Developer tools and check the Enable USB Web debugging option
Issue the following command in the console on your host machine to enable port forwarding:
adb forward tcp:9222 localabstract:chrome_devtools_remote
Open desktop Chrome and navigate to localhost:9222
Choose the page you need to debug
You can now start debugging and profiling mobile content in the Developer Tools on your desktop

Categories