af83

Intégration des web apps dans Unity (Ubuntu)

Canonical travaille sur l'intégration des applications web dans Ubuntu. Cela permet aux applications web d'être exécutées dans leur propre fenêtre, d'avoir une icône dans le Launcher, d'envoyer des notifications ou encore de s'intégrer aux menus Messaging et Sound.

Ce travail a commencé et en est encore à un stade assez expérimental, mais il est déjà possible de l'essayer. Ce billet de blog va vous montrer comment faire une première intégration de votre application web dans Unity.

La première étape est d'avoir un système pour tester cela. Cela veut dire avoir une Ubuntu 12.04, utiliser Unity et installer le paquet unity-webapps-preview. Pour les deux premiers, je vous laisse vous débrouiller, et pour le dernier, vous avez juste à taper dans une console :

sudo add-apt-repository ppa:webapps/preview
sudo apt-get update
sudo apt-get install unity-webapps-preview

Ensuite, il faut se déconnecter d'Unity et se reconnecter pour que les modifications soient prises en compte. On peut alors tester que l'intégration fonctionne en lançant chromium et en allant sur Twitter. Vous devriez voir un bandeau en haut du site qui vous demande si vous souhaitez utiliser l'intégration de twitter à votre bureau. Répondez « Oui » et vous aurez le droit à une icône Twitter dans votre Launcher.

Note : pour le moment, seul Chromium permet de profiter de cette intégration. Firefox devrait bientôt être aussi supporté et il y aura peut-être d'autres navigateurs d'ici la sortie d'Ubuntu 12.10. Pour la suite de ce billet, il faudra donc utiliser Chromium.

OK, il est temps de s'occuper de notre application web. Nous allons charger un fichier javascript supplémentaire, unity.js dans la page principale. Celui-ci va s'occuper d'activer l'intégration dans Unity :

var Unity;

window.setTimeout(function() {
    if (external && external.getUnityObject) {
        Unity = external.getUnityObject(1);
        Unity.init({
            name: "My webapp",
            iconUrl: "http://mywebapp.com/icon.svg",
            onInit: function() { console.log("Integrated!"); }
        });
    }
}, 1000);

Ubuntu met à notre disposition une méthode external.getUnityObject qui permet de créer un objet Unity sur lequel un certain nombre de méthodes sont attachées pour tirer parti de l'intégration avec Unity. En particulier, l'une de ces méthodes est init. Elle permet d'ajouter l'icône de noter webapp au Launcher.

Voici quelques remarques en vrac :

  • external.getUnityObject provient d'une extension pour le navigateur. Chez moi, l'extension ne s'exécutait qu'après mon code. J'ai donc du mettre en place un window.setTimeout pour que la fonction soit présente.

  • Pour éviter de provoquer une erreur JavaScript chez les personnes qui n'ont pas Unity, j'ai ajouté un test sur external.getUnityObject pour ne l'utiliser que si la fonction est présente.

  • Le 1 passé en paramètre de getUnityObject correspond à la version de l'API d'Unity. Et comme il n'y a qu'une seule version de l'API pour le moment, n'essayez pas de passer autre chose.

  • L'iconUrl est l'adresse de l'icône qui sera affichée dans le Launcher. Si vous avez un fichier SVG, c'est parfait, vous n'avez pas à vous casser la tête pour savoir quelle résolution elle doit faire. Sinon, j'ai testé avec un fichier PNG d'une taille 64x64 et ça marchait bien chez moi. Mais j'ai également vu des références à des tailles de 128x128, donc il est peut-être plus prudent de prendre une icône de plus grande taille qui reste jolie quand on l'affiche dans une taille moindre. À vous de voir ;-)

  • La function associée au paramètre onInit sera exécutée quand l'utilisateur aura acceptée l'intégration dans Unity. C'est donc elle que l'on va utiliser pour effectuer toutes les autres actions sur l'objet Unity.

Voyons justement comment ajouter une petite bulle avec un compteur par dessus l'icône dans le Launcher. Cela peut par exemple servir à indiquer un nombre de messages non-lus. Pour cela, on va aller chercher ce nombre de messages non-lus sur le serveur en JSON (une autre piste serait de récupérer ce nombre de messages dans le DOM) et l'afficher :

var Unity;

var updateCount = function() {
  jQuery.getJSON("/my-messages", function(data) {
    if (data.count) {
      Unity.Launcher.setCount(data.count);
    } else {
      Unity.Launcher.clearCount();
    }
  });
  setTimeout(updateCount, 10000);
}

window.setTimeout(function() {
    if (external && external.getUnityObject) {
        Unity = external.getUnityObject(1);
        Unity.init({
            name: "My webapp",
            iconUrl: "http://mywebapp.com/icon.svg",
            onInit: updateCount
        });
    }
}, 1000);

La fonction updateCount met à jour le compteur en fonction du nombre de messages non-lus avec la méthode Unity.Launcher.setCount. Si le nombre de messages non-lus est nul, on préfère cacher le compteur avec Unity.Launcher.clearCount. Et la méthode se rappele toutes les 10 secondes avec setTimeout pour remettre régulièrement à jour le compteur.

Comme vous avez pu le voir, il est relativement simple de s'intégrer à Unity. Attention toutefois, cette intégration est encore expérimentale, je suis notamment tombé sur certaines fonctions que je n'ai pas réussi à utiliser. Pour aller plus loin, je vous conseille la lecture du guide de l'API web d'Unity.

blog comments powered by Disqus