Geek Answers Handbook

Safari Sites Preview

In Safari's Top Sites section, the iCloud.com image displays a logo instead of the login screen, as you can see below. Typically, Top Sites only displays the image of the loaded web page (and the loaded page does not look like that). Can you even imagine how they did it? I did not find anything in the Apple documentation. Thank you for your help.

enter image description here

+7
source share
5 answers

Here's how iCloud does it to show a preview of Top Sites: (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

+7
source

In fact, Safari is not looking for the <link> or anything else. We can use two different things:

  • The HTTP headers of the incoming request in PHP .

  • Properties of the window object in JavaScript .

Both methods work very well, and you can use either of them or even both of them if you want to be sure.

Php

If we check the HTTP headers, we will see that when sending a Safari Top Sites Preview request, there is X_PURPOSE that is set to preview . Then you should write on a regular website:

 if($_SERVER["HTTP_X_PURPOSE"]=="preview") { header("Location:thumbnail link");//Redirect to the thumbnail. } //Display the normal website.

And you can add to the page where there is a thumbnail:

 if($_SERVER["HTTP_X_PURPOSE"]!="preview") { header("Location:normal link");//Redirect to the normal website. } //Display the thumbnail.

Thus, you will not be able to see the thumbnail except from the preview of Safari Top Sites.

Javascript

window.navigator.loadPurpose is preview if it is a Safari Top Sites Preview that is trying to open a website. But window.navigator does not exist if it is in the normal view. Thus, when you check this value, you need to check the very existence of this property, as well as its likelihood. Then this is the code for a regular 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 }

A little trick from me :

If you really want to put the <link> tag you can write:

 <link rel="safari-preview" href="thumbnail link" />

Then add the section at the end of the chapter:

 <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

+6
source

I believe they programmatically capture a page snapshot when it finishes loading. And if you look at the progress bar at the top, when iCloud shows that (only the iCloud logo), it has finished loading and makes a little animation.

0
source

I think they did it specifically for their iCloud service, they just check if the domain is an icloud domain, and if it displays this logo instead of the usual site preview.

0
source

Apple touch devices may search for pre-created images on your web server. I know that he can request these images:

  • apple-touch icon-114x114-precomposed.png
  • apple touch icon-144x144-precomposed.png
  • apple touch icon-57x57-precomposed.png
  • apple-touch icon-72x72-precomposed.png

If you look at the souce of iCloud.com, you will notice that it will have <link /> elements pointing to these resources (because they are not at 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 just guess here, but maybe the safari is looking for the same images as on the top site.

More about these types of images can be found here.

http://theksmith.com/technology/howto-website-icons-browsersdevices-favicon-apple-touch-icon-etc/

0
source

More articles:


All Articles