Safari iOS Favorite/Bookmark icon not updating apple-touch-icon.png - ios

So based on my searches this has been a long-standing bug on iOS/Apple’s end. As of yet I haven’t been able to confirm a workaround so would like to see if I’m up to speed on this.
I incorporated a new favicon on my site with the help of realfavicongenerator, and it’s showing up everywhere except Safari iOS where a faulty cache seems to force the old image to show when the site is favorited or bookmarked. Adding to homescreen works fine, MacOS favoriting/bookmarking works fine, Safari iOS doesn’t.
I remember having a similar issue when incorporating the first apple-touch-icon a few years ago, also using realfavicongenerator: when favoriting/bookmarking in Safari iOS the icon was empty instead of showing the image. Eventually it showed up but I don’t recall how or exacty when, but it definitely took a lot longer than it should have.
I’ve obviously tried clearing cache and website data/history through Safari settings, restarting my phone, appending a variable to the apple-touch-icon URL, using both absolute and relative paths, and tinkering with different image size specifications, none of which worked.
I saw a suggestion somewhere that resetting the phone may work, but my question in that scenario is what exactly to reset and whether this would compromise other data.
Are there any workarounds/fixes I’m not aware of?
I’m using an iPhone 7 with iOS 12.2. The code being used is straight from what realfavicongenerator provides.

RealFaviconGenerator's author speaking.
As you noticed, iOS Safari is quite lazy regarding favicon reloading. It is not the only one.
The trick is to force it to reload the icon by providing a URL it never encountered before. A simple way of doing this is to suffix the existing icon URL with a dummy parameter. For example, change /the_icon.png to /the_icon.png?v=2.
To do so with RealFaviconGenerator, generate your icons again. This time, make sure to open the Version/Refresh tab in the Favicon Generator Options panel, and select the second option, as below:
Note: You might want to edit manually the code already created by RealFaviconGenerator and append the version yourself. This might be a bad idea. For example, if you put your icons in your root folder, some HTML lines were not generated (because of conventions RFG is taking advantage of). But suddenly, these lines must be added to specify a version. This is definitely not something you can guess at first sight.

New favicon showed up today, with no intervention on my part (versioning had also been removed). Not sure why. Guess it may be due to a time interval.

Related

Webpack url-loader PDF data URI link for Vue site stops working in iOS 14

I have a Vue.js website with a PDF file which is included in my ultimate javascript bundle via webpack. (It's my CV.) The following build and delivery process has worked perfectly fine for me since 2017, but suddenly stopped working in iOS 14:
Build the PDF with LaTeX.
Use webpack's url-loader to include the PDF in my webpack bundle as a base64 data URI.
Load that URL into a vuex data store, and then just deliver it as a link when clicked.
For the last three years, this has worked fine: I've been able to click on the link and get a working PDF. It's been kind of random and platform-specific whether the PDF opens in-browser or shows up in a download folder, and whether it gets the filename I've asked it to get or not, but, well, that doesn't matter to me. And the core functionality of click the link and get the PDF has worked on every browser and every platform I've ever tried it on.
All of a sudden, with iOS 14, it's stopped working. Now, when I try to activate the PDF link in iOS Safari, nothing happens at all. When I do it in iOS Chrome, it produces a little popup claiming it downloaded a document, but nothing seems to actually be able to open the document. And when I do it in iOS DuckDuckGo, it just displays the base64 data URI in the address bar.
Interestingly, if I take the dataURI that DDG displays in the address bar and copy and paste it into Safari or Chrome on iOS, it actually displays my pdf. So the browsers still have the capacity to display a PDF from a data URI. It just doesn't want to do so from my link.
And my site still works as expected on the desktop. Including in Safari on the desktop. Also, it still works on my wife's phone (she's still on iOS 13). So this is clearly something Apple changed in iOS 14. But what? And how to get my site working again?
I'm guessing that Apple has changed the behavior of the renderer in iOS in some fashion to cause it to break across browsers but nowhere else (since browsers in iOS are all still required to rely on webkit, right?)
This is a pretty important feature to me. I made this decision deliberately for perceived performance---combined with pre-rendering, everything on my site, including the PDF, loads very close to instantly from the user perspective. So I'd really like to keep it.
I'm using Webpack 2.6.1 and Vue 2.3.3. This is a stable build that has been working flawlessly for three years, so I haven't felt the need to update anything except for security updates.
After searching around, I did find this Apple dev discussion which suggests that in iOS 14, Apple newly blocks redirects to data URIs. But I'm not doing a redirect, I'm actually navigating directly to the URI through a link. And the linked discussion suggests that the newly banned behavior just brings Apple in line with what other browsers already ban---but my code works in every other browser, so that can't be it.
Relevant code, to the extent it matters (though it's so basic and obvious that I doubt a simple code fix will be the answer here):
from my webpack.base.js:
{
test: /\.(pdf)$/,
loader: 'url-loader'
},
from my vuex store, in state.js
import cvURL from './assets/pdf/gowdercv.pdf';
from the component containing the link that points to PDF:
<p><a :href="cvURL" download="gowdercv.pdf"><img src="../../assets/icons/file-pdf.svg" class="cvicon"> Download in PDF</a></p>
which is loaded as a computed property to the component, i.e.,
computed: {
cvURL: function(){return this.$store.state.cvURL;},
Does anyone know how to get functionality back in iOS? Is there a workaround built in recent versions of webpack or vue for this? Thanks!
Update: after some help off SO, an acquaintance turned up this similar problem, which also came up with a solution: turning the base64 URI into a blob and passing that data url. Which also solves my problem. Though that SO doesn't have an accepted answer, so I can't vote to close my own question as a duplicate, alas.

Uploading App Images: "Invalid GeoJSON: Your routing app coverage file is invalid."

This question is not a duplicate to another question that asks about the same message, but in another context. The context of this question is just about uploading screenshot images and getting the message.
Today, I had a new message when uploading images to App Store Connect:
Invalid GeoJSON: Your routing app coverage file is invalid.
This makes absolutely no sense since, at this time, I had not even chosen a build for the upload.
Retrying to upload the images, it worked. But unfortunately, the message appeared for each language and format.
Is this a bug by Apple or am I missing something? I would guess that uploading images has nothing to do with GeoJSON.
I used Safari. Others seem to have the problem with Chrome. So it occasionally seems to happen on all browsers.
I had this same problem today while uploading App Store Icon on Preparing for submission page. Solved it by removing "-" from my image name.
This is an unusual bug. Apple might be already working on it. It's not coming on any specific browser. It occurs mostly when we are trying to upload more than one images at once.
Apple always keeps their live site maintenance work active, so this is most likely a bug occurring in their live site maintenance. It will be fixed soon.
For now, if you are finding difficulties handling screenshot uploads, you can try to upload them one by one rather than uploading in a bulk.
Important Note:
I am stating this on basis of the last few uploads I have experienced. Also, the solution I have given is tried from my side and it worked for me well. So, you can just try it out and I'm sure that it's not a browser issue. It can occur on any browser.
It did not work for me even if I provided English file names. It kept giving the above error.
Only thing that worked for me was to remove all underscores. So instead of iphone_xs_max_1.png, it worked when I renamed it to iphone1.png and uploaded.
Make sure screenshot files name in English.
Make sure screenshot files all the directory path(and folder name) in English.
it worked for me.
I had the same bug today. Some of the images uploaded without problems, others didn't.
I was uploading in Chrome when I got the issue. Opening the site in Safari and uploading the images there, solved the problem.
What solved this for me was removing strings of numbers and periods from the filenames. It appears the system is running the filenames through some kind of geocoder, and if there are strings of characters that could be interpreted as locations, it will error out.
Make sure after editing the image you save the file with an extension like myimage.png or myimage.jpg
In my case, I forgot to save the file with extension after removing alpha and transparency properties and no need to change browser etc.

ckeditor behaving strangely

I'm having all kinds of trouble getting CKEditor working in a Rails app.
It always makes a request for skin.js which doesn't even exist in the stock package.
Whether or not it displays the groups I specify seems completely up to chance. Some of them work (like Clipboard), others don't (Like Document).
All the icons are messed up. They display on the wrong buttons. Sometimes the same icon will show up on two separate buttons.
I have no idea what's going on. I didn't customize anything. I got the 4.4.0 download straight from the homepage. Standard package.
Any thoughts???
Thanks!
This problem usually occurs when it clashes with any other js script in the project. try downloading the code and run it in a separate project, if it works fine there , this means you have some other js in your code conflicting with the ckeditor script and usually this is the inline js which causes problem.

Why does app crash on Cocos2d after sprite name is changed?

I'm taking over an app for a friend who had a developer stop working for him. We want to change the icons of the characters in cocos2d. It's a small running game like temple run. We had a graphic designer create another image with the same size and same file name.
We then simply drag and dropped the image to replace the old ones. At first it was running fine, then when we switched a few more, the game crashed.
just posting as an answer so it may help others too.
What it may be :
hitting the logs would let you know that "failed to load data from xyz.png" which means the file you are referring is not present in the project which in your case may be due to excessive refactoring.
Also, check the extensions ".png" vs ".PNG".

Application cache: strange behaviour on iPad

I'm making a website where a user can say which items he wants to cache. Based on this, a manifest file is generated. By doing this the user can still browse in the website when he is offline. This is all working fine in google chrome. But on iPad it's not working as it should.
Sometimes things get cached sometimes not, not even the pages i visited.
We have been testing with 2 iPads all morning, but we haven't been able to get the same result on both iPads. Even if we do exactly the same, we sometimes get different results.
So what we do:
turn WiFi on
browse to the website
make some settings so some pages/images/... are added to the manifest file
turn WiFi off
go back to safari refresh/browse to pages that should be cached.
Sometimes on one iPad (this is an iPad 1) it works exactly as it should, but sometimes it doesn't work at all.
On the other iPad (this is an iPad 2) it never works completely as it should. Just some random results.
It also looks like the results are different when we completely shutdown safari, and then clear the cache and then do the whole process of downloading and caching stuff...
Somebody can help me with this problem? It's a real pain in the ass at the moment... :(
Open web server (IIS)
Select website
Open MIME type
Add or edit to text/cache-manifest
Reset iis at command prompt iisreset
It works for me.
I've encountered some problems as well with ipad caching.
MIME type of the manifest file is not set right due to windows hosting. The standard MIME type on a windows server is "application/x-ms-manifest". This was created when the ClickOnce applications came to life. The MIME type that is necessary to work on safari is: "text/cache-manifest"
Cache size is too small on ipad (you should get a warning to enlarge it)
the Ipad needs time! I've noticed that the cache is not filled when you see all assets or when the website is "loaded". Give it twice the normal time to load before you place the website to your homescreen.
Cache of the cache :) The iPad only reloads the files when the modified date on the server is changed. So when you really want to test, clear all cache on the iPad, remove the link on the homescreen and upload all your files again.
Conclusion: Time consuming!
Hint: Turn on the debug console in safari on your desktop or iPad. It gives a fair idea if you did something wrong or if it is a cache problem on the iPad.
It looks like the problem didn't have anything to do with the application cache. It was somehow a problem with the cookies/the way i was dynamically building the manifest file.
I'd like to slightly echo Pieter-Paulus Vertongen, I had a similar experience with Windows hosting.
According to the debugging console in Safari, the mime type for the manifest file was being misread and nothing was being downloaded as a result.
I copied all of my files, including the .htaccess file, over to a linux server without changing any content within the files...and then the caching worked beautifully.
So yes, it's possible this may be an issue of where the files are hosted. Use the debugging console and Jonathan Stark's code to find out:
http://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/

Resources