In the Top Sites section of Safari, the iCloud.com image shows the logo instead of the login screen as you can see below. Normally, the Top Sites just shows a picture of the loaded web page (and the loaded page does not look like this). Do you have any idea how they accomplished this? I couldn't find anything in Apple's documentation. Thanks for your help.
Here's how it's done on iCloud to show a Top Sites specific preview: (edited for formatting)
if (window.navigator && window.navigator.loadPurpose === "preview") {
window.location.href = "http://www.icloud.com/topsites_preview/";
};
Source: http://blog.raffael.me/post/18565169038/defining-how-your-website-looks-like-in-safari-topsites
In fact, Safari doesn't search a <link> tag or anything else. There is two dfifferent thing that we can use:
The HTTP headers of the incoming request in PHP.
The properties of the window object in JavaScript.
The two ways work very good and you can use any of them, or even both of them if you want to be sure.
PHP:
If we inspect the HTTP headers, we will see that when it's Safari Top Sites Preview that sends the request, there is X_PURPOSE that is set to preview. Then you must write in the normal website:
if($_SERVER["HTTP_X_PURPOSE"]=="preview")
{
header("Location:thumbnail link");//Redirect to the thumbnail.
}
//Display the normal website.
And you can add in the page where there is the thumbnail:
if($_SERVER["HTTP_X_PURPOSE"]!="preview")
{
header("Location:normal link");//Redirect to the normal website.
}
//Display the thumbnail.
So that you can't see the thumbnail except from the Safari Top Sites Preview.
JavaScript:
window.navigator.loadPurpose has the value preview if it's Safari Top Sites Preview which tries to open the website. But window.navigator does not exist if it's in a normal view. As such, when you test this value, you have to test for the very existence of this property as well as for its truthiness. Then this is the code for the normal website:
if(window.navigator&&window.navigator.loadPurpose==="preview")
{
window.location.href="thumbnail link";//Redirect to the thumbnail
}
And for the thumbnail page:
if(!window.navigator||window.navigator.loadPurpose!=="preview")
{
window.location.href="normal link";//Redirect to the normal website
}
Little trick from me:
If you really want to put a <link> tag you can write:
<link rel="safari-preview" href="thumbnail link" />
And then add at the end of the head section:
<script>for(var i=0,link=document.getElementsByTagName("link"),l=link.length;i<l;i++)if(link[i].getAttribute("rel")==="safari-preview"&&window.navigator&&window.navigator.loadPurpose==="preview")window.location.href=link[i].getAttribute("href");</script>
Sources:
I believe they programmatically grab a snapshot of the page when it's finished loading. And if you look at the progress bar at the top, when iCloud shows that (just the iCloud logo), it's finished loading and is doing a little animation.
I think that they made it especially for their iCloud service, they just check if the domain is the icloud domain and if it is they show this logo instead of the normal site preview.
Apple touch devices can look for precomposed images on your webserver. I know it can query for these images:
If you check out the souce of iCloud.com you will notice it will have <link /> elements pointing to these resources too (because they're not in the root):
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/system/cloudos/en-us/1JPlus21/source/resources/images/apple-touch-icon-114x114.png">
I'm just guessing here but maybe safari looks for the same images to show in the top sites view.
More on these types of images can be found here
http://theksmith.com/technology/howto-website-icons-browsersdevices-favicon-apple-touch-icon-etc/
