Après les trois premiers articles de la série “Firefox OS : Dev Tips” (#1, #2 et #3), nous attaquons ce quatrième article sur Firefox OS avec ces trois points :
- Comprendre les options d’un fichier manifest.webapp
- Comment différencier les différents types d’application de Firefox OS ?
- Comment utiliser la WebAPI Vibration ?
Comprendre les options d’un fichier manifest.webapp
Le fichier manifest.webapp est le fichier principal d’une application Firefox OS car il est utilisé par le navigateur pour interagir avec l’application. Ce fichier permet de distinguer une webapp d’un site web. Toutes les informations sont stockées au format JSON. Mais quels sont les différents champs et leur contenu ?
activities
Permet de définir les WebActivities utilisés.
Exemple avec la WebActivity Share :
"activities": {
"share": {
"filters": {
"type": [ "image/png", "image/gif" ]
},
"href": "foo.html",
"disposition": "window",
"returnValue": true
}
}
D’autres WebActivities peuvent être définies comme parcourir la galerie (“browse”), configurer les paramètres (“configure”), composer un numéro de téléphone (“dial”), créer un nouveau contact/mail/sms (“new”), etc…
Lien : Définition des différentes WebActivities.
appcache_path
Permet de définir le chemin du fichier AppCache afin de gérer le mode offline de la technologie HTML5.
"appcache_path": "/cache.manifest"
Lien : Tutoriel : Réaliser une application offline en HTML5
csp
Permet de définir une “Content Security Policy” qui permet de spécifier les ressources autorisées à accéder au DOM de la page et ainsi bloquer toutes failles XSS. C’est – pour faire simple – une liste blanche des ressources (style, scripts et objets) autorisées.
Attention : Ce champ ne peut qu’améliorer la politique appliquée et non la réduire.
Lien : Politique par défaut
default_locale
Permet de définir la langue par défaut (dans le cas d’une webapp multilingue). Ce champ doit être au format de la RFC 4646.
Lien : Exemples de la RFC 4646
description
Permet de définir l’application en 1024 caractères maximum.
developer
Permet de définir le développeur par deux informations : son nom et son site web.
Exemple :
"developer": {
"name": "Your name",
"url": "http://your-website.tld"
}
fullscreen
Permet de définir si l’application sera lancé ou pas en plein écran. Le champ est un booléen.
Exemple :
"fullscreen": "true"
icons
Permet de définir les différentes icônes utilisées pour représenter l’application. Les différentes tailles possibles pour les icônes sont :
- 16 x 16 (Support : Firefox & Android)
- 32 x 32 (Support : Firefox & Android)
- 48 x 48 (Support : Firefox & Android)
- 64 x 64 (Support : Firefox & Android)
- 128 x 128 (Support : Firefox & Android)
- 256 x 256 (Support : Firefox & Android)
- 30 x 30 (Support : Firefox OS)
- 60 x 60 (Support : Firefox OS)
Exemple :
"icons": {
"16": "/img/icon-16.png",
"30": "/img/icon-30.png",
"32": "/img/icon-32.png",
"48": "/img/icon-48.png",
"60": "/img/icon-60.png",
"64": "/img/icon-64.png",
"128": "/img/icon-128.png"
"256": "/img/icon-256.png"
}
Lien : Firefox OS : App Icon Guidelines
installs_allowed_from
Permet de définir les sites qui sont autorisés à lancer l’installation d’une application.
Exemple :
"installs_allowed_from": [
"https://marketplace.firefox.com",
"https://marketplace.example.com"
]
"installs_allowed_from": [*]
launch_path
Permet de définir le chemin initial au lancement de l’application.
Exemple :
"launch_path": "/index.html"
locales
Permet de traduire les éléments traduisibles du fichier manifest.webapp
Exemple :
"locales": {
"fr": {
"description": "Ma description",
"developer": {
"url": "http://my-website.es"
}
},
"de": {
"description": "Meine Beschreibung",
"developer": {
"url": "http://my-website.de"
}
}
}
messages
Permet de définir les messages systèmes qui sont autorisés à être intercepté et vers quels pages les redirection se font.
Exemple :
"messages": [
{ "alarm": "/app/message.html#alarm" },
{ "notification": "/app/message.html#notification" }
]
name
Permet de définir le nom de l’application en 128 caractères maximum.
orientation
Permet de définir les orientations à laquelle l’application restera bloqué, même si l’orientation change.
Exemple :
"orientation": [
"portrait",
"landscape-secondary"
]
permissions
Permet de définir les permissions pour la webapp.
Une permission est composée d’une clé “description” pour faire la demande auprès de l’utilisateur, et en fonction de la WebAPI, d’une clé “access” contenant le type d’accès (lecture seule, lecture – écriture, lecture – création, et création seule).
Exemple :
"permissions": {
"device-storage:sdcard": {
"description": "Nécessaire pour écrire un fichier de log",
"access": "readwrite"
},
"geolocation": {
"description": "Nécessaire pour définir votre position"
}
}
Lien : Permissions
redirects
Dans le cas d’une application “packaged”, il est possible dans le cas d’autorisation OAuth d’avoir besoin de redirection d’une URL vers un fichier dans la webapp.
Exemple :
"redirects": [
{
"from": "http://mydomain.tld/oauth2.html",
"to": "/redirects/oauth2.html"
}
]
type
Permet de définir le type d’application : web, privileged, ou certified.
version
Permet de définir le numéro de version de la WebApp.
Comment différencier les différents types d’application de Firefox OS ?
Il y a deux types principales d’application sous Firefox OS : les “hosted app” et les “packaged app”.
Les applications hébergés ou “hosted app” sont des sites web transformés en WebApp via l’intermédiaire d’un fichier manifest.webapp.
Les applications packagés ou “packaged app” sont l’ensemble de l’application (HTML, CSS et JS) avec le fichier manifest.webapp contenus dans un fichier ZIP.
Ces dernières sont divisés en 3 :
Lien : MDN : Types de “packaged app”
Comment utiliser la WebAPI Vibration ?
La WebAPI Vibration ne demande pas de permissions à demander à l’utilisateur, contrairement à d’autres comme la WebAPI Alarm. Le support actuel, au niveau navigateur et système, est Chrome, Firefox, et Firefox OS.
Pour faire vibrer le téléphone pendant 1 sec soit 1000 msec :
navigator.mozVibrate(1000);
Pour faire vibrer le téléphone par alternance (vibration pendant 500ms, arrêt pendant 200ms, vibration pendant 400ms, arrêt pendant 100ms) :
navigator.mozVibrate([500, 200, 400, 100]);
Pour arrêter une vibration en cours :
navigator.mozVibrate(0);
navigator.mozVibrate([]);
Lien : MDN : WebAPI Vibration
Cet article Firefox OS : Dev Tips #4 est apparu en premier sur RootsLabs.
Original post of Progi1984.Votez pour ce billet sur Planet Libre.
