Firefox OS : Dev Tips #4

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 :

• “Plain packaged app” : Ce type d’application est basique. Il n’a pas accès aux WebAPIs sensibles
• “Privileged app” : Ce type d’application est le niveau du milieu. Pour cela, il faut que l’application soit validé en interne par Mozilla via un processus spécial afind e favoriser la sécurité de l’utilisateur. L’accès aux WebAPIs sensibles est possible mais avec un accord de l’utilisateur. Une politique CSP est mise en place (

  "default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"

  ).
• “Certified app” : Ce type d’application est le niveau le plus complexe, car elles sont réservés aux OEM. Les applications ont alors accès aux paramètres du téléphone et aux WebAPIs sensibles – comme les “Privileged app” – mais de manière implicite. La politique CSP est encore plus élevé (

  "default-src *; script-src 'self'; object-src 'none'; style-src 'self'"

  ).

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.