Introduction à Firefox OS

• Depuis 20 ans, les navigateurs évoluent
• 1991: Ce sont des liseuses de document
• 2013: Ce sont des « runtimes » applicatifs

• L'accès à une fonctionnalité matérielle passe toujours par une API
• L'appel à cette API peut être autorisée ou non, au cas par cas
• Différentes règles sont appliquées : accord de l'utilisateur, accord implicite, application installée ou non
• Une API non standardisée (donc expérimentale) va être limitée aux applications installées

        {
          "name": "My App",
          "description": "My elevator pitch goes here",
          "launch_path": "/",
          "icons": { "128": "/img/icon-128.png" },
          "developer": {
            "name": "Your name or organization",
            "url": "http://your-homepage-here.org"
          }
        }
      

App manifest

• Contenu Web - sans privilèges particuliers, mais permet tout de même l'accès à certaines APIs (ex: géolocalisation)
• Applications hébergées - stockées et servies par un serveur web. Facile à mettre à jour, mais a un accès limité aux APIs.
• Applications packagées - packagées dans des fichiers ZIP, elles peuvent être installées depuis n'importe quel site.
• Applications privilégiées - revues par la Marketplace, packagées, et signées par une clé identifiant la Marketplace.
• Applications certifiers - ces applications font partie du système et ne peuvent pas être installées autrement.

App permissions

        var installapp = navigator.mozApps.install(manifestURL);
        installapp.onsuccess = function(data) {
          // L'app est installée
        };
        installapp.onerror = function() {
         // L'app n'est pas installée, et l'erreur est:
         // installapp.error.name
        };
        

• Des API ouvertes et standards pour accéder au materiel
• Créées, proposées et discutées avec les autres contructeurs de navigateur via les organismes de standardisation.
• Une bonne façon d'interagir avec le matériel via JavaScript
• Asynchrone — Tous les accès sont gérés via un gestionnaire de succès et d'erreur expliquant ce qui s'est passé de manière claire
• Chapoté par un modèle de sécurité à 3 niveaux permettant de donner des pouvoirs plus ou moins étendus aux applications selon leur mode de distribution.

WebAPIs on MDN

• Vibration API
• Screen Orientation
• Geolocation API
• Pointer Lock API
• Open WebApps
• Network Information API
• Battery Status API
• Alarm API
• Push Notifications API
• WebFM API / FMRadio
• WebPayment
• IndexedDB
• Ambient light sensor
• Proximity sensor
• Notification
• etc

Using WebAPIs to make the web layer more capable

• Gérer le cache et la latence: Application Cache, Storage, IndexedDB, Offline.
• Accéder au materiel: Sensor/Device API (devicemotion, deviceorientation, etc.)
• Sortir du navigateur: Notifications
• Travailler avec le réseau: Web Socket
• Optimiser vos applications: Page Visibility API

        CACHE MANIFEST
        # v1 2011-08-14
        style.css
         
        # Use from network if available
        NETWORK:
        script.js
         
        # Fallback content
        FALLBACK:
        / fallback.js
      

Application Cache on MDN

• sessionStorage (temporaire, par onglet)
• localStorage (persistant, global)

        localStorage.setItem('foo','bar');
         
        var foo = localStorage.getItem('foo');
         
        localStorage.removeItem('foo');
      

Storage on MDN

• Une base de données de type « index »
• Attention, ce n'est pas du SQL
• On stocke des paires clé/valeur
• Le moindre changement repose sur le concept de transaction
• L'API est totalement asynchrone

IndexedDB on MDN

• Geolocation, orientation, proximity, battery, luminosité, etc.

        function handleOrientation(event) {
          console.log(event);
          // Do stuff with the new orientation
        }
         
        window.addEventListener("deviceorientation", handleOrientation);
      

        // L'accord de l'utilisateur est indispensable
        Notification.requestPermission()
         
        // Il ne reste plus qu'à créer une notification
        var n = new Notification("Hi!")
         
        n.onshow(function () {
          setTimeout(n.close, 5000);
        })
      

Notification on MDN

        // Se connecter à un Web Socket
        var socket = new WebSocket("ws://www.example.com/socketserver");
         
        // Envoyer des données
        socket.onopen = function () {
          socket.send("I'm ready.");
        }
         
        // Recevoir des données
        socket.onmessage(function (event) {
          console.log(event.data);
        })
      

WebSocket on MDN

        function handleVisibilityChange() {
          if (document.hidden) {
            // Stop doing stuff
          } else {
            // Start doing stuff
          }
        }
         
        document.addEventListener(
          "visibilitychange", handleVisibilityChange
        );
      

Page Visibility on MDN

• Device Storage API
• Browser API
• TCP Socket API
• Contacts API
• systemXHR

Using WebAPIs to make the web layer more capable

          var contact = new mozContact();
          contact.init({name: "Christian"});
          var request = navigator.mozContacts.save(contact);
          request.onsuccess = function() {
            // contact generated
          };
          request.onerror = function() {
            // contact generation failed
          };
        

• WebTelephony
• WebSMS
• Idle API
• Settings API
• Power Management API
• Mobile Connection API
• WiFi Information API
• WebBluetooth
• Permissions API
• Network Stats API
• Camera API
• Time/Clock API
• Attention screen
• Voicemail

Using WebAPIs to make the web layer more capable

• Les applications peuvent s'abonner à des messages système.
• Le principe, c'est que l'application peut être lancée pour recevoir ce message.
• Beaucoup de fonctions sont implémentées avec ce principe: push notifications, téléphonie, sms, activités

    {
      ...
      "messages": [
        { "alarm": "/index.html" }
      ]
    }
     

    navigator.mozSetMessageHandler('alarm', function gotMessage(message) {
      ...
    });
     

• A proposal to get access to hardware by keeping the user in control instead of authenticating on their behalf
• Comparable to Android Intents, but with a more limited scope that makes sense for the web
• A technique to create an ecosystem of apps on the device - apps can register as handlers for certain tasks and other apps use them
• A simple way to get access to hardware and data without needing to package your app and host it from the market
• Highly secure as nothing happens without the user initiating it

WebActivies Wiki

• configure
• costcontrol
• dial
• open
• pick
• record
• save-bookmark
• share
• view
• new, f.e type: “websms/sms” or “webcontacts/contact”

        var call = new MozActivity({
          name: "dial",
          data: {
            number: "+1804100100"
          }
        });
      

        var getphoto = new MozActivity({
          name: "pick",
          data: {
            type: ["image/png", 
                   "image/jpg", 
                   "image/jpeg"]
          }
        });
      

        getphoto.onsuccess = function () {
          var img = document.createElement("img");
          if (this.result.blob.type.indexOf("image") != -1) {
            img.src = window.URL.createObjectURL(this.result.blob);
          }
        };
        getphoto.onerror = function () { // error
        };
      

• Unlike iOS and Android, there is no fixed SDK or set of IDEs/tools for Firefox OS.
• Firefox OS apps are HTML5 apps, and we never had one definite set of tools for writing HTML
• That said, there are some things to make your life easier and get you started more quickly
• A lot of them come with the browser, or as add-ons to the browser. That way you can use the computer you are comfortable with to develop code
• You do not need a Firefox OS device to get started – you might need one though to do interaction/performance testing
• This is an ongoing thing – more tools to come :)

• Mozilla has a few things brewing in the tools space
• Make sure you show the developer tools in Firefox (NOT, I repeat NOT Firebug) and the responsive view which allows you to resize the canvas of the browser to phone size
• Show the simulator live, change some of the CSS to show that apps are just like web sites
• Point to the following resizes, make sure to tell people that the OS components are for Gaia - not for any app out there.

• Jérémie Patonnier
• Julien Wajsberg
• Introduction à Firefox OS