Mozilla web-app Les applications web de Mozilla Yoann DUVAL 10/12/2012
Introduction Différentes plateformes et différents systèmes Les technologies web évolues Application ou site internet? Mozilla open web app 2
Plan Dans quel but? Comment ça marche? Comment l utiliser? Quelques APIs et librairies utiles? Mozilla open web app 3
Dans quel but? Développeurs Des applications semblables aux applications natives Une infrastructure de paiement La possibilité de créer son propre «store» Utilisateurs La possibilité de choisir leurs «stores» Des applications proches des applications natives Partager leurs applications entre différents équipements Mozilla open web app 4
Comment ça marche? Installation depuis un serveur web Exécution dans l environnement web Un écosystème ouvert Mozilla open web app 5
Comment ça marche? Installation depuis un serveur web Serveur Web Market place Intègre le market Serveur Web Application web Installation Installation Client Navigateur web Mozilla open web app 6
Comment ça marche? Exécution dans l environnement web Ajoute une icone de lancement sur le système hôte Exécute l application comme toutes autres applications natives Moteur d exécution Vérifie les permissions de l application Permet l utilisation des fonctions du système (localisation, orientation, ) Mozilla open web app 7
Comment ça marche? Un écosystème ouvert Personna Un système unique d authentification pour toutes les applications Synchronisation Un service de synchronisation de plusieurs appareils via le cloud Mozilla open web app 8
Comment l utiliser Un manifeste (fichier.webapp) Une api JavaScript Un «market place» Un gestionnaire d application Mozilla open web app 9
Comment l utiliser? Créer un manifeste Informations sur l application { "name": "Mon Application", "description": " La description de mon application", "launch_path": "/", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": «prénom nom", "url": "http://ma-page-web.fr" }, } Mozilla open web app 10
Comment l utiliser? Créer un manifeste Définition des différentes langues : "default_locale": "fr ", "locales": { "fr": { "description": «Ma description en français!", "developer": { "url": "http://monsite.fr/" } }, "en": { "description": «My description in english!", "developer": { "url": "http://monsite.com/" } } } Mozilla open web app 11
Comment l utiliser? Créer un manifeste Définition des permissions (APIs utilisées): "permissions": { "contacts": { "description": pourquoi l application en a besoin", "access": "readcreate" }, "alarms": { "description": pourquoi l application en a besoin" } } Mozilla open web app 12
Comment l utiliser? API pour l installation navigator.mozapps : var request = navigator.mozapps.getself(); request.onsuccess = function() { if (request.result) { // l application est déjà installée } else { navigator.mozapps.install("http://path.to/my.webapp"); } }; Mozilla open web app 13
Comment l utiliser «Market place» Mozilla open web app 14
Comment l utiliser Gestionnaire d applications Mozilla open web app 15
DEMO Mozilla open web apps 16
APIs et librairies WebPayment API : Cette API fournie un moyen aux développeurs pour vendre leurs applications ou services Le moteur d exécution se charge de vérifier que le paiement a été effectué Mozilla open web app 17
APIs et librairies WebPayment API : interface nsidomnavigatorpayment { DOMRequest mozpay(in jsval jwts); } Mozilla open web app 18
APIs et librairies Alarm API : Permet de planifier l envoi de notifications et l exécution d applications Utilise les alarmes du système hôte Mozilla open web app 19
APIs et librairies Alarm API utilisation : interface AlarmsManager { DOMRequest getall(); DOMRequest add(in jsval date, in DOMString respecttimezone, [optional] in jsval data); }; void remove(in unsigned long id); Mozilla open web app 20
APIs et librairies LocalStorage : Permet de stocker des données chez le client de façon persistante Stockage sous forme clef / valeur Mozilla open web app 21
APIs et librairies LocalStorage utilisation : if(typeof(storage)!=="undefined") { // sauvegarde localstorage.lastname= "Nom"; } // lecture alert(localstorage.lastname); Mozilla open web app 22
Conclusion Facile à mettre en place Utilisation des nouvelles technologies du web Une volonté de standardisation Mozilla open web app 23
Webographie https://developer.mozilla.org/en-us/docs/apps https://wiki.mozilla.org/apps https://blog.mozilla.org/webdev/2012/09/14/appsthe-web-is-the-platform/ https://github.com/mozilla/openwebapps Mozilla open web app 24
Merci QUESTIONS? Mozilla open web app 25