What does it mean when the apple-touch-icon.png was requested - apple-touch-icon

I know what the apple touch icon is, and I have seen an apple desktop before, so I can imagine what it would look like. I also know how to add an apple touch icon to my site.
But here's the burning question: I keep getting (failed) requests for this touch icon... So what does that mean?
Was an apple user simply accessing the site?
Were they bookmarking it?
What is the action from an apple machine that triggers the request for the touch icon?

When somebody using an iOS device visits your web-page and decides to "bookmark" your page by addding your page to their Home screen the apple touch icon is used. It is like a favicon for browsers but has higher resolution and "might be designed" to match app icons ...

Many log investigate to find that: whatever you have specified paths to apple-touch-icon files in the <head>, Safari will search these files at the domain's root when you add a bookmark/home screen shortcut:
/apple-touch-icon.png
/apple-touch-icon-120x120-precomposed.png
/apple-touch-icon-120x120.png
/apple-touch-icon.png
Yes, 2 times the same file (tried on an iPhone 6).

to avoid 404 error on NGINX
create an empty image file (blank.gif)
put it into images directory
use following configuration:
Location ~* /apple.*.png$ {
rewrite ^.+$ /images/blank.gif last
}

Related

Vue favicon doesn't change in ios chrome & safari browser

I alredy change the favicon.ico to the logo file which I want to use In Vue-cli's public folder, and named it the same file name.
In web browser the Favicon and title be changed successful
but in the mobile browser neither safari or chrome are fail
I didn't use pwa so probably not have manifest.json problem
And I already tried to clean both browser's cache or open it on Incognito Windows, but still the same, is anything I neglect to do with my index.html or vue-cli config?
You can add <link rel="apple-touch-icon" href="/custom_icon.png"> so that your favicon is shown when you favorite the page or view it in that tabs view. This is mentioned here.
For the webpage itself its very likely your iPhone is still caching the old icon regardless of your attempts to clear said cache. In my experience trying to load the page with no network connection, waiting for the time out error and then connecting to the network and reloading the page is the best way to "force" the device to clear its cache. Alternatively with the dev tools open and a keyboard attached type command + option + r. If not, patience, it'll update... eventually.

Dev tools not showing insecure content loaded in via javascript

I work with a lot of SSL/https pages that must be 100% secure so the lock is green and not yellow.
It's easy to pinpoint any 'dom level' scripts or images, because console puts out the error 'this page is loading insecure content from __'
The problem is when a secure https script loads NON-https image/script... it doesnt seem to be logged in chrome dev tools console as an error for loading insecure content. The only way to see it is if i manually move the mouse over like 80 different asset links, tracking pixels, etc and making sure it starts with https
Does anyone know a better way of handling this? Thanks!
In Firebug you can enable the display of a Protocol column. To do so you have to right-click onto the column headers inside the Net panel and click on Protocol. Then you can sort by that column by clicking on it's column header.
Doing so it should be pretty easy to spot the insecure request.
Sebastian

One Click install for Safari Extensions

When a user downloads a plugin firefox (for example) the plugin installation begins as soon as the download has completed.
Is it possible to achieve the same thing in safari? i.e. user clicks link to download plugin, once it has downloaded it automatically begins the installation.
I don't think this is possible to do on any other domain except extensions.apple.com.
I've done some extensive testing on this and the safari.installExtension() method is only present if the domain matches extensions.apple.com (probably controlled by the browser, similar to how certain Chrome APIs only shows up inside of extensions themselves).
I tested this theory by going to the JS file itself and opening the JS console:
https://extensions.apple.com/home/scripts/extensionInstall.js
After that JS file has loaded, type typeof(safari.installExtension) in the JS console and it should return "function". Notice that it exists on a non-HTML page, meaning it's being provided by the browser (since this script doesn't execute, nor has the code in it to provide this method).
I tried doing this on other sites and it doesn't exist: "undefined".
I also had a crazy thought that it just needs extensions as the subdomain, so I tested it on http://extensions.joomla.org too, no dice. I can't seem to find an extensions sub-domain that's SSL though. That may work, but I seriously doubt it as the method appears to be regulated to only show up when on Apple's specific extensions sub-domain.
No solution for that here, but maybe this can help?
In apple extension gallery at https://extensions.apple.com the extensions do install in one click, and i wanted to achieve the same in a website of mine, so i went and checked their JS source code.
A javascript file there defines a "ExtensionOneClick" Object (https://extensions.apple.com/home/scripts/extensions.js).
A method is dedicated to installing extensions:
// href : path to the extension ".safariextz" file
// id : com.whatever.myextension-<safaridevelopper10charsid>
safari.installExtension(id, href);
I tried to replicate this on my website, but i get "safari is undefined", so I guess a site specific hack in Safari is helping here?

Find out what resources are not going over HTTPS

I have an ASP.NET site which should transport completely over HTTPS. However, in Google Chrome I get a warning that the page includes resources which are not secure. How can I find out which those resources are and why they wouldn't be going over HTTPS?
I've just had this problem in Chrome also. I checked in the Network tab but all resources were loaded over https.
Solution: close Chrome and re-open.
Chrome must cache its secure-content detection so that even when you fix the problems the insecure content message won't disappear.
Usually this occurs because you are loading Images, javascript include files or external CSS files without using https. You can use a program such as FireBug: http://getfirebug.com/
FireBug will tell you how your elements are loading and which aren't going through the ssl layer. If you don't have firefox, then I am pretty sure Chrome also has something similar to FireBug built in.
Here's how to use firebug:
Open firebug
Click on the Console Tab
Reload the page
Any https errors will show in the console and tell you which resource is not working.
Hope this helps
I have nothing to do with the people providing this online script, but it's easy and can be bookmarked in any browser.. works well and quickly to solve the problem.. http://www.whynopadlock.com
In Google Chrome: You can view the offending resource in the Console tab of the Inspect Element window.
It will be listed as:
The page at https://example.com/page displayed insecure content from http://example.com/resource
Of course you might have to reload the page with the Inspect Element window already open.
One of the easiest ways to do it is to right-click the page in Firefox and select View Page Info. Then go to the Media tab and find anything that is loading from http instead of https.
We've scratched our own itch and wrote a tool that crawls your web-site and tells you what pages have non-SSL resources on them. You just need to enter the root URL of your web site – no need to check every page manually.
http://www.jitbit.com/sslcheck/
I noticed that when I had this problem that a toolbar(uTorrent) was causing the error. I removed the toolbar and the error went away. Not sure why a toolbar would cause an error on my site, but no more problems here with the SSL certificate.
To add to this I right-clicked on the column headings in the Network tab view and selected Protocol.
If you then click on the Protocol heading, the contents of the report will be grouped by HTTPS, etc
In Chrome, you can find out which resources were loaded via http versus https by doing the following:
1) In Wrench menu, choose Tools > Developer tools
2) Click on "Resources" toolbar icon
3) Expand the Frames folder to see the different pages. Expand the page whose resources you want to see. The individual Resources for the page are then listed, broken down by Images, Scripts, and Stylesheets
4) To see the URL that was used to load that resource, just hover the mouse over the resource name and the URL will appear, either with http or https. You can also click on an image name to see the image on the right side, along with its URL
Chrome has their own developer tool.
you can right click a page, inspect it.. and then click the "network" tab and reload the page. you'll see the workflow.
I dont know if any one will be checking this answer
Or you might have found the solution already, but anyway, my answer might help other people suffering from similar issue
http://www.whynopadlock.com/
This is the link that I used to check the insecure content /file which was being loaded to my page.
Hope it helps. :)
I just discovered same behaviour in chrome (firefox showed a green lock), even though all resources were loaded via https.
The reason in my case was that the server supported broken (google poodle) SSLv3.
Setting ssl_protocols to exclude SSLv2 in nginx.conf like so
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
fixed the problem for me.
I consider it unfortunate that chrome doesn't make this reason more transparent. "this page loads some resources insecurely" is very misleading if not wrong.
If you want to crawl your own site from your own desktop for a list of all reasources loaded (not loaded by javascript though, which is worth bearing in mind), if using windows you can use Xenu's link sleuth. Export the TSV file and then right click and open with excel, then sort by URL, you can then find those pesky http resources for all pages on the site!

Empty HTML page after OTA install on Symbian

I have some quite nasty issue I couldn't solve so far.
Whenever I do installation of Symbian application on Nokia platform, the browser loads blank HTML page, and needs to be closed manually.
It doesn't happens on WAP push installations - only on direct link installations via the browser.
It happens on installations both from JAD and JAR.
I tried specifying manifest entries, etc... - nothing helped.
Any idea how to prevent this blank page, as it confusing the users?
Thanks in advance.
You should make sure that the content types of the downloaded files are correct:
For .jad, the content type should be text/vnd.sun.j2me.app-descriptor
For .jar, the content type should be application/java-archive
Setting the content type according to a file's extension is usually something you configure in your HTTP server.