We have a Bluemix node.js application that loads perfectly in all browsers, except on Safari Mobile. Even on OSX Safari it works fine. We have tested this with iPhone 5, 6 and different iPads. We have done this over different WiFi networks and 3G/4G.
You can test it here: http://innowall-debug.eu-gb.mybluemix.net/ some of the resources on the first page already load very slowly. This issue is reproducible on the first page.
The strange thing is when you load the site over https it will load/render fast. What could be the issue causing this to go slow over http only for Safari mobile?
HTTP (slow entry highlighted - check latency 27secs):
HTTPS (fast):
My original instinct was that there is some render-blocking JS/CSS in your application that fails to resolve quickly in Safari. Running your website in Google PageSpeed Insights gives us some good information that could help fix that latency:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Finnowall-debug.eu-gb.mybluemix.net&tab=mobile
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 4 blocking script resources and 3 blocking CSS
resources. This causes a delay in rendering your page.
Related
I have a T-shirt designing app (running on fabric.js 1.7.14) that has been working fine on iOS Safari for quite some time. Now, when I am calling toDataURL on canvas element, Safari throws a security error. The page in question is here:
https://ideashirt.pl/projektuj/koszulka-t-shirt-basic-kolor-meska
The weirdest thing is it can't be reproduced locally. When I access my local server from my iPhone everything works fine (both http and https). But when you access the page on ideashirt.pl from Safari on an iPhone and add some text to the T-shirt, the script fails when you want to add a product to cart. When you refresh the page and don't modify the canvas, it works. The elements are added in the same way when you add them manually and when they are added from the session after a refresh. This makes me think that maybe fabric somehow taints the canvas for Safari when you modify the elements on canvas.
The problem was indeed CORS. We've recently migrated static content to Amazon and fabric controls images (for resize/rotate/delete) painted on the canvas were served from Cloudfront domain. It's weird that only Safari on iOS and some versions of FF were affected by that though. Thanks for all the help!
As Apple announced Service Worker support for iOS 11.3 a few months ago, I recently started trying to get a service worker to work on iOS. On Safari it works as expected, after vising the website, it works offline. However, when trying to use the same feature in Chrome, I had intermittent results. Specifically, the service worker would only work every other page refresh, with the original refresh after going offline being one of the ones not working.
I know that Chrome on iOS is built on a version of Safari, therefore I am confused about this behavior.
Is this due to incomplete support from Chrome iOS for Service Workers? Because it is Chrome on iOS, I'm not sure of any easy way to debug it either, so any other tips to help track down the problem would be appreciated. Thank you!
Chrome for iOS do not support service workers currently(as of Apr-2020) and also the "Add to home screen" option is not available, if you are interested in that. Any offline page loading that you are experiencing should be from regular browser cache.
Here is an official documentation from Apple's web-kit page.
Update: A previous version of this post stated the Service Worker API
is available in all applications using WKWebView. At this time it is
only available in Safari, applications that use
SFSafariViewController, and web applications saved to your home
screen.
Notably, Chrome uses WKWebView as its browser engine in iOS, which don't have service worker support yet as per the above statement(which you can find in the link provided above). So the only way you can use Service worker in iOS is to use Safari browser or use one of the above supported web-views inside a native app.
Here is an article on what all PWA features iOS is still missing. Remember, this is a fast growing area. Always check if what is applicable now, especially if the documentation/article is getting older.
Here is an adapter to help debug in Chrome dev tools for pages loaded iOS - webkit/safari. Hope it becomes as easy as Android Chrome debugging one day!
Chrome for iOS is open source (https://blog.chromium.org/2017/01/open-sourcing-chrome-on-ios.html)
We can install the Chrome app with our developer signed certificate on an iOS device, launch the Chrome App, and start testing.
It is technically feasible.
As an update in January 2021: the official documentation from Apple's web-kit page still says the same thing, and I just battled a very difficult to debug issue in Chrome iOS - posting here in case it helps someone.
I had an iFrame containing a cross-origin Angular 10 PWA with Service Worker enabled, and the iFrame content would not show after an initial load - no errors, no server logs, just blank. The only solution that worked was to self-destruct the Service Worker per Angular's docs, and now the iFrame loads fine.
In my current MEAN stack project, everything functions fine on desktop Safari, Chrome, and mobile Chrome, but in mobile Safari for iOS, data-binding shows as text (e.g. {{data.total}} as opposed to $25). To make matters worse, when I open the app from iOS Safari served from localhost, it also works properly.
I've tried rolling back my Heroku app and the problem persists, even when I go back to a version from when I'm sure it looked good on an iPhone. I've checked it out on others' iPhones, and gotten the same negative result. I can't find this problem elsewhere on the internet, nor am I sure what I should be looking for as the problem seems to be with Heroku or iOS.
Here's the live page: http://minneapolish3-beta.herokuapp.com/reddress. This has me very much stumped, but I'm pretty green. If you find it not working on other platforms, I'd love to know about that as well.
(Naturally, I can't well spin up a CodePen example as the problem is only occurring in the wild.)
A friend introduced me to the Safari Web Inspector for mobile which allwed me to see warnings, alerts, etc.
It turns out that my Google Maps API call, via http://, was causing the page to break on mobile Safari. When I changed it to https:// everything worked! Thanks go to Bonus Kun whose answer to another question helped expedite my solution.
Having a very difficult time tracking down a solution to this bug, hoping someone can help me.
My web app http://www.customozer.com loads fine on desktop, but on mobile safari, some images load corrupt (screenshots below in comments).
This issue does not appear when I use chrome on my ipad (iOS 8.1.2), just safari and saved web apps.
What's also interesting is that when loaded directly from my local MAMP stack using an ngrok tunnel (http://alexgoodwinmedia.ngrok.com/Oz-Snowboards/site/app.php), the issue does not appear. Files on my local machine and on the customozer.com server are synced.
From what I've read, there's a mobile safari issue with loading large amounts of AJAX data.. but that's not how these images are being loaded.
Does anyone have some insight into how can this issue be resolved? Happy to provide more details/tests.
Thanks!
After rather extensive testing, I've finally concluded that the PNG images were being corrupt by an old version of PNGlib (a GDlib element). By moving my project to a new server that allowed for a newer version of GDlib to be installed, I was able to fix the problem.
I've been doing lots of work in getting a few web apps to work offline on iOS using the HTML5 manifest. I've ran across the typical problems everyone else has and fixed them and everything seems to be working fine—except in the case where I save the web app to the desktop on my iPhone 4.
If I do this and then enable airplane mode, I get the following alert when trying to access the app via the home screen: "your-app-name could not be opened because its not connected to the internet." Accessing the app via Safari browser works fine while offline.
If anyone knows if this is an error on my part, or even the slim possibility of a work around, do tell.
Even downloading the new Financial Times web app (very well done with extensive localStorage support) results in an error when accessing it offline from the home screen.
Technical specs: Running iPhone 4 with iOS 4.3.3 (but also saw the issue in 4.3.2)
After reading the comments (especially Rowan's) I ran more tests and found the answer:
No, Apple did not disable HTML5 offline capability for web apps saved to the home screen, it works - for the most part. There is a bug that will make it not work. It doesn't seem to have anything to do with your manifest setup (unless perhaps it downloaded a bad manifest or incomplete manifest at one point.) We don't know how widespread it is but the fix is to clear your Mobile Safari Cache.
Here's the steps:
Close the web app (make sure its not sticking around in the background).
Cleared Mobile Safari cache: Settings > Safari > Clear Cache
Reopened the app (for caching).
Close the web app again (make sure its not sticking around in the background).
Enabled "Airplane Mode": Settings > Airplane Mode
Reopened the app.
It should now work offline. If it doesn't then its probably a separate manifest issue in your app. Looks like a weird bug with the browser cache - or perhaps the cache was completely full? Who knows, but that's the answer. Thanks guys.
iOS seems to be very sensitive to load issues when offline.
I was getting your "could not be opened" error when offline on a page I was working on. The problem turned out to be that the page created an iframe pointing to a site that didn't have an AppCache. Removing those iframes fixed the issue.
In my case, I handled it using window.navigator.standalone which tells you whether you're running in an iOS homescreen app. The code looked like this:
if (!navigator.standalone) insertFrames();
add this to your html:
https://web.archive.org/web/20170201180939/https://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/
I found it massively useful - even though I've created my manifest file and compared it to other people's manifests this JavaScript debugging script gave me the clue I would have never found otherwise. I apparently had syntax error in my manifest ... long story short I had to remove everything and add the paths to each file/image one by one. The end result was the same however it worked... how weird!!! does whitespace / comments affect the syntax of the file?