Et là en lisant le titre vous vous dites : « mais mais mais… qu’est-ce qu’il va encore nous raconter ?! ». Je vais vous conter une histoire qui s’est déroulée il y a peu de temps et qui m’a bien surpris, et sur plusieurs aspects. Cela se passe sur iOS, smartphones et tablettes confondus (a priori)
Loin de moi la possibilité de tester la chose avec tous les appareils, mais d’après ce que j’ai pu tester, iOS provoque quasi inévitablement des 404 dans les logs de votre serveur en automatisant certaines requêtes à des moments bien précis.
Les symptômes
Il n’y a pas longtemps, un client revient vers moi pour me préciser que son tout nouveau site sous WordPress lui renvoie des erreurs 404. M’envoyant une liste des URLs issues des logs de son serveur, je me rends compte que des fichiers PNG sont manquants.
/apple-touch-icon-114x114-precomposed.png
/apple-touch-icon-114x114.pngCes appels avaient la particularité de ne pas avoir de referer (page vue précédemment par le visiteur, qui contient donc théoriquement le lien vers les ressources précitées).
Le hic c’est que ce site n’était pas prévu responsive et qu’aucun appel n’était fait explicitement dans le code source (il faut normalement utiliser des balises link spécifiques).
Je vérifie donc sur l’onglet réseau de mon outil de débogage : rien à signaler.
Un tiens vaut mieux que deux tu l’auras
N’ayant aucune erreur visible, et compte tenu des deux seules images attendues provoquant ces erreurs, je me suis dit qu’il fallait tester en live à partir d’un terminal Apple. J’ai donc testé à partir d’une mini-tablette iPad pour voir à quel moment la visite du site sur ce terminal pouvait provoquer ces erreurs.
Il pouvait très bien s’agir d’une tentative d’appel comme un navigateur s’attend à trouver un favicon.ico à la racine.
Bref, avec mon collègue Rodolphe nous avons donc lancé un bête test sur notre serveur avec les logs en live sous notre nez. Nous avons donc créé une page web vide.
- Connexion à la page web : pas d’erreur
- Ouverture des options de partage de la page… Paf !
Deux erreurs sont provoquées dès que le bouton :
est activé par l’utilisateur.
En effet la commande « Sur l’écran d’accueil » affiche une prévisualisation de l’icône qui pourrait s’afficher sur l’accueil de votre smartphone. Pour cela iOS fait plusieurs requêtes vers des noms précis d’icônes, puis s’il ne les trouve pas il créé une miniature de la page en guise d’icône.
Conclusion
Difficile de conclure simplement…
Faudrait-il systématiquement créer des icônes ? Cracher sur Apple ? Ou plutôt ignorer simplement les 404 qui vont s’afficher dans vos logs ? À vous de voir !
Faudrait faire un poil de rewriting ou de redirection via htaccess ?
Genre :
RedirectTemp /apple-touch-icon-114×114-precomposed.png http://www.nicolas-hoffmann.net/apple-touch-icon.png
RedirectTemp /apple-touch-icon-114×114.png http://www.nicolas-hoffmann.net/apple-touch-icon.png
(je viens de tester sur mon site)
Hello Nico,
Dans un certain sens ça revient au même pour le site web qui n’avait pas prévu cet aspect des choses : il lui faut des icônes de base, ou accepter les 404.
Mais ta solution est une des solutions que j’ai vu passer sur un site anglophone, surtout après le changement de syntaxe, mais je ne remets pas le nom.
Merci pour le test Nico 🙂
Y a même bien mieux à faire, genre un rewrite :
RewriteRule ^apple-touch-icon-(.+)\.png apple-touch-icon.png [L]
# tout ce qui commence par apple-touch-icon-(nawak).png = apple-touch-icon.png
Éventuellement avec [L, R=301] pour faire un redirect permanent.
Un billet de Mathias Bynens sur la question. 😉
Effectivement j’avais croisé ce billet pendant mes pérégrinations sur la toile, bien écrit et mis à jour 🙂
Par contre dans mes tests j’ai constaté que seules 2 icônes été recherchées, là où Mathias indique que la recherche se fait dans cet ordre :
XXxYY-precomposed.pngXXxYY.pngLes 404 apparaissent dans ces tests uniquement pour les deux premières icônes.
Mais peut-être ai-je mal compris quelque chose…
Dans tous les cas je vais tenter de pondre prochainement un rappel des différentes icônes à prévoir pour son site web (favicon, ms-icon, touch-icon, etc.), même si le lien en fin d’article fait déjà une grosse partie du travail 🙂
C’est marrant ça, j’ai lu la semaine dernière le changelog du HTML5 Boilerplate : des participants se sont demandés pourquoi il y avait ces appels et les ont donc virés (argument: c’est ch**nt de faire plusieurs images de ce type).
Donc : désormais le html5 BP est désormais sujet à ce problème éventuel… Je vais tenter de retrouver leur discussion pour mentionner ça..
Je suis peut-être hors sujet, mais moi aussi je me suis aperçu des erreurs 404 sur mon site http://macreart.com par mon iDevice préférer, sauf sur ma page d’accueil. J’ai remarquer que ma page d’accueil qui n’ai pas en sous-domaine et/ou il y a une page 404.htlm, le problème ne se pose pas, par contre ou j’ai des sous domaines le problème se pose, donc j’ai dupliqué ma page 404.htlm sur chaque domaine et comme par magie les erreurs 404 ont disparu, je pense que j’ai du mal configuré mon fichier .htaccess surtout que mes icons sont bien à la base de mon domaine et pas dans mes sous-domaine avec des liens qui inclue le non du http://domaine.com. Je suis novice dans le code donc soyer indulgent dans vos réponses, par contre l’idée de Nico me plais ou aussi d’avoir des 404.html dans chaque sous-domaine me donne l’idée de les personnalisés, merci pour votre attention François lesenne