Les applications web sont créées en utilisant des technologies web standard. Elles fonctionnent avec tous les navigateurs modernes, et vous pouvez les développer en utilisant vos outils préférés. Voici certaines caractéristiques qui distinguent les applications web des sites web :
- Les applications sont installées par l'utilisateur.
- Elles sont autonomes et n'ont pas besoin en permanence du chrome de la fenêtre du navigateur.
- Elles peuvent être conçues pour fonctionner hors-connexion. Gmail, Twitter, et Etherpad sont des applications web.
Le projet Open Web apps propose quelques petits suppléments aux sites existants pour les transformer en applications qui leur donnent un environnement informatique excitant et riche en possibilités. Ces applications tournent sur les ordinateurs classiques comme sur les appareils mobiles, et pour l'utilisateur, elles sont plus faciles à découvrir et à lancer que des sites web. Elles ont accès à un nombre croissant de fonctionnalités novatrices, telles que la synchronisation entre tous les appareils de l'utilisateur.
Publication de l'application
La seule chose que vous devez faire pour publier une application web à partir d'un site web c'est ajouter un manifeste d'application (en anglais, app manifest). Il s'agit d'un fichier JSON qui décrit votre application, précise son nom, les icônes qu'elle utilise et la décrit de façon compréhensible par un humain.
Le manifeste doit être hébergé dans le même domaine que votre site web, et doit être fourni avec l'en-tête HTTP Content-Type: mis à la valeur application/x-web-app-manifest+json. Tous les détails sur le manifeste sont à votre disposition dans la documentation, et pour vous aider à démarrer vous pouvez essayer le testeur de manifeste en ligne.
Politique de même origine
Il est important de savoir que chaque application doit être hébergé sur son propre domaine. Différentes applications ne doivent pas partager le même domaine. Une solution acceptable est d'héberger chaque application sur un sous-domaine différent. Voir Réponses aux questions fréquentes sur les manifestes d'application pour plus d'information.
Vérifier que l'application est installée
Quand un navigateur web charge la page de l'application, celle-ci doit prendre en compte le cas où l'utilisateur n'a pas encore installé l'application. Vous pouvez vérifier si l'application est installée ou non en appelant getSelf(), comme suit :
var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
if (request.result) {
// Application bien installée
} else {
// Application non installée
}
};
request.onerror = function() {
alert("Erreur lors de la vérification de l'installation: " + this.error.message);
};
Installation de l'application
Vous pouvez distribuer votre application directement sur votre site. Il est préférable de tester l'installation depuis votre site, pour vérifier que le manifeste est valide, avant de le soumettre au Firefox Marketplace.
Il vous suffit de créer un bouton ou un lien qui lance ce code JavaScript :
var request = navigator.mozApps.install("https://chemin.vers/mon/exemple.webapp");
request.onsuccess = function() {
// Tout va bien - Affichez un message, ou redirigez vers une page
};
request.onerror = function() {
// Problème - this.error.name contient le détail
};
Appeler navigator.mozApps.install() provoque le chargement du manifeste par le navigateur et demande à l'utilisateur s'il désire installer l'application. Si la réponse est positive, l'application est installée dans le navigateur. Sur Mac OS X, l'application sera installée dans le dossier "Applications".
Le second paramètre est un argument install_data de navigator.mozApps.install(), pour conserver des informations dans le catalogue des applications installées par l'utilisateur. Ces informations peuvent être synchronisées avec ses autres appareils, et récupérées par votre application en utilisant l'appel à getSelf() (voir Vérifier que l'application est installée). Par exemple :
navigator.mozApps.install(
"https://chemin.vers/mon/exemple.webapp",
{
user_id: "un_utilisateur"
}
);
Promotion de l'application
Mozilla crée un magasin d'applications qui s'occupe de leur exposition, de leur révision, de leur évaluation et de leur paiement, en utilisant une infrastructure ouverte qui peut être employée par d'autres tierces parties pour créer leurs propres magasins. Mais vous n'avez aucune obligation de répertorier votre application dans un magasin.
Voici un premier aperçu pour les développeurs du Open Web apps project qui est une toute première version de la boutique d'applications de Mozilla. Vous pouvez également souscrire à la lettre d'information des développeurs web pour être tenu au courant des nouveautés et des progrès de la boutique d'applications de Mozilla, ainsi que des astuces et conseils pour la création d'applications.
Lancement hors-connexion et utilisation des API avancées des appareils
Les navigateurs web modernes ont ajouté un grand nombre de fonctionnalités fantastiques pour vous permettre de faire tourner votre application hors-connexion et accéder aux possibilités de l'appareil. Voici quelques liens utiles :
- Lancement hors-connexion : des précisions et des démos qui expliquent comment utiliser HTML5 AppCache.
- Événements hors-ligne et en ligne : détection de l'état de l'appareil, connecté ou hors connexion.
- Utiliser l'audio et la vidéo dans votre application.
- Dessiner avec Canvas.
- Créer des graphismes en 3D avec WebGL.
- Utiliser Content-Editable pour créer des éditeurs de texte riches et complets dans votre application.
- Utiliser des fichiers d'applications web avec l'API File du HTML5.
- Utiliser le glisser-déposer pour réorganiser les éléments dans vos applications et entre elles.
- Détecter l'orientation de l'appareil.
Stockage de données localement
L'API localStorage fournit un réservoir précieux de données persistantes que vous pouvez utiliser pour garder trace des données de l'utilisateur entre deux visites avec votre application. Si l'utilisateur a un navigateur moderne, tel que Firefox (versions 4 et ultérieures), ou Chrome, vous pouvez également utiliser IndexedDB, un réservoir de données structuré et hautement performant côté client.
Si vous avez des données qui doivent être partagées entre plusieurs instances de votre application parmi tous les appareils de l'utilisateur, vous devriez utiliser l'option install_data pour la fonction install(), comme décrit ci-dessus.
Exemples
Quelques exemples d'applications web :
- Exemple MozillaBall (utilise canvas pour dessiner et l'API JavaScript pour installer l'application)