Ça y est, j’ai reçu la sonde il y a quelques jours par la poste et elle est maintenant installée.

J’avais expliqué dans ce billet comment afficher la température sur une page web.

Avec quelques astuces complémentaires, voici comment j’ai transformé cette page en app pour iPhone.

Transformer une page web en app

C’est très simple. Il suffit d’ajouter une ligne dans le header de la page :

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="favicon.ico" />

La première ligne va permettre de créer une web app autonome sur un périphérique iOS.

La seconde va configurer la couleur le la barre de menu en noir.

La troisième va donner le chemin vers l’icône à placer sur l’écran d’accueil.
Dans notre cas, le dossier ou se trouve la page qui affiche la température.
L’icône sera une image JPG ou PNG carrée. iOS se chargera d’arrondir les coins.

Protéger la page par un mot de passe sous Nginx

Il faut tout d’abord créer un fichier contenant le couple login/mot de passe crypté.
On va le placer à la racine du dossier à protéger.

On va le créer avec la commande htpasswd :

sudo htpasswd -c /var/www/<chemin vers le dossier>/.htpasswd MonLogin
New password:
Re-type new password:
Adding password for user MonLogin

Avec -c pour créer un fichier. Sans lui, le couple log/pass sera ajouté au fichier existant.

Ensuite, il suffit d’ajouter ce code à la configuration de Nginx :

location / {
auth_basic "Administrator Login";
auth_basic_user_file /var/www/<chemin vers le dossier>/.htpasswd;
}

Installation de l’icône sur la page d’accueil :

Dans Safari, entrez l’adresse sous forme :

http://login:motdepasse@www.nomdedomaine.tld/<chemin vers le dossier>/pagetemperature.php

Safari va peut-être vous signaler un phishing. Ignorez-le.

Suivez ensuite le pas-à-pas en images ci-dessous.

Hameconnage

Ajouter à la page d’accueil

Donner un nom à l’icône

L’icône sur la page d’accueil

L’affichage de la Web App