Accueil > Divers, Outillage > Application web : comment la faire passer pour une application lourde

Application web : comment la faire passer pour une application lourde

Le concept peut paraître un peu étrange et en interpeler certain. Pourquoi faire une application web alors que le client veut avoir l’impression d’être dans une appli lourde. La réponse que nous avons obtenus dans notre cas : « plus facile de maintenir et mettre à jour une appli web, plus facile de vendre une appli lourde à nos futurs clients ».

Bref dans tous les cas on se retrouve à devoir gérer une « impression » d’appli lourde avec une appli web.

Nous avons testé rapidement plusieurs solutions, en voici une liste non exhaustive et les impressions que nous en avons eu.

  • Créer son propre navigateur avec QtWebKit
    • Avantages :
      • Permet de donner l’apparence désirée à son navigateur et donc de le faire passer pour une appli lourde
      • Permet de rajouter du paramétrage si on en a besoin tout en étant transparent vis a vis du web
    • Défauts :
      • Relativement complexe à mettre en oeuvre, demande plusieurs jours pour bien maitriser le sujet
      • Compatibilité avec html5 css3 et javascript inconnue
    • Tests effectués:
      • Lecture de documentations et de tutoriels.
  • Créer son propre navigateur avec RCP (FrameWork Eclipse)
    • Avantages :
      • Extrêmement simple à mettre en oeuvre, on peut créer une fenêtre avec un navigateur dedans en 5 minutes
    • Défauts :
      • très mauvaise compatibilité avec html5 et css3
    • Tests effectués:
      • Création du navigateur, affichage de l’application dans une fenêtre simple
      • Il suffit de créer une nouvelle appli RCP et d’affiche le composant Browser
  • Embarquer un navigateur dans une appli de manière générale (C++, Java au autre langage) avec un framework
    • Avantages :
      • Vous pouvez choisir votre langage préféré, il existe des framework d’affichage de navigateur dans presque tous
    • Défauts :
      • Niveau de compatibilité avec html5 css3 et javascript variant d’un extrême à l’autre.
      • Solution parfois longue à mettre en oeuvre
    • Tests effectués:
      • La plupart des Frameworks Java + quelques autres (les plus simples)
  • Solution que nous avons retenue : Utiliser une version portable de Chrome et afficher le site web en mode « application » (raccourcis chrome qui n’affiche qu’une fenêtre avec le site web à l’intérieur, aucune UI dispo à part le clique droit)
    • Avantages :
      • Relativement rapide à mettre en œuvre
      • Produit des installeurs spécifique pour chaque OS identiques à n’importe quelle application lourde.
    • Défauts :
      • Nécessite de faire un installeur spécifique pour chaque OS
      • Difficile à mettre en œuvre pour linux, il n’existe pas de version portable de chrome pour linux
    • Tests effectués:
      • Création des installeurs pour windows et Mac os, tests de pistes pour linux.

Détail de notre solution

Windows :

Nous avons utilisé Inno pour générer un installeur windows. Il permet via un script de générer un .exe contenant toute notre appli et de générer des raccourcis où on le souhaite qui lanceront correctement chrome en mode application.

http://www.jrsoftware.org/isdl.php

Dans notre cas nous avons utilisé le packaging suivant :

Télécharger Chome portable : http://portableapps.com/apps/internet/google_chrome_portable

Créer un répertoire au nom de notre application et un sous répertoire Datas, déposer Chrome portable dans Datas. Nous avons également rajouté l’icone de notre application dans le répertoire Datas

Créer un nouveau script inno qui va packager notre application. Il faut faire très attention à la génération des raccourcis, c’est les paramètres delancement de crhome qui vont pointer vers la bonne adresse (celle de l’appli) et lancer chrome en mode application simple.

voici le script que nous avons utilisé pour installer l’appli et générer les raccourcis sur le bureau, dans le répertoire de l’appli et dans le menu démarrer.

; Script generated by the Inno Setup Script Wizard.
; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!

[Setup]
; NOTE: The value of AppId uniquely identifies this application.
; Do not use the same AppId value in installers for other applications.
; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
AppId={{47D6F841-DF2C-4094-AD17-8010EBF847C9}
AppName=yourApp
AppVersion=1.0.0
;AppVerName=yourApp1.0.0
AppPublisher=OpenSI
DefaultDirName={pf}\yourApp
DefaultGroupName=yourApp
OutputBaseFilename=yourApp-Install
Compression=lzma
SolidCompression=yes

[Languages]
Name: « english »; MessagesFile: « compiler:Default.isl »
Name: « french »; MessagesFile: « compiler:Languages\French.isl »

[DIRS]
Name: « {app}\ »; Permissions: everyone-modify

[Files]
Source: « C:\yourFolderPath\yourApp\* »; DestDir: « {app} »; Flags: ignoreversion recursesubdirs createallsubdirs
; NOTE: Don’t use « Flags: ignoreversion » on any shared system files

[Icons]
Name: « {group}\yourApp »; Filename: « {app}\Datas\Chrome.exe »;WorkingDir: « {localappdata}\yourApp\Data\profile »; Parameters: « –user-data-dir= » »{localappdata}\yourApp\Data\profile » » –app=http://yourApp.com/ »; IconFilename: « {app}\Datas\yourApp.ico »
Name: « {group}\{cm:UninstallProgram,yourApp} »; Filename: « {uninstallexe} »
Name: « {app}\yourApp »; Filename: « {app}\Datas\Chrome.exe »; WorkingDir: « {localappdata}\yourApp\Data\profile »;Parameters: « –user-data-dir= » »{localappdata}\yourApp\Data\profile » » –app=http://yourApp.com/ »; IconFilename: « {app}\Datas\yourApp.ico »
Name: « {commondesktop}\yourApp »; Filename: « {app}\Datas\Chrome.exe »; WorkingDir: « {localappdata}\yourApp\Data\profile »;Parameters: « –user-data-dir= » »{localappdata}\yourApp\Data\profile » » –app=http://yourApp.com/ »; IconFilename: « {app}\Datas\yourApp.ico »

[Run]
Filename: « {app}\Datas\Chrome.exe »; Parameters: « –user-data-dir= » »{app}\Datas\Data\profile » » –app=http://yourApp.com/ »; Description: « {cm:LaunchProgram,yourApp} »; Flags: nowait postinstall skipifsilent

En compilant ce script on obtient un .exe qui installe notre appli.

Mac :

L’un des avantages de Mac c’est que la plupart des applis sont portables par nature, chrome ne fait pas exception.

La première chose à faire est donc de télécharger le .dmg de chrome sur le site officie et de l’installer.

Puis Télécharger un script pour générer les raccourcis d’application chrome sous mac : http://www.lessannoyingcrm.com/articles/240/Updates_to_Mac_Chrome_application_shortcuts_and_the_iOS_fullscreen_webapp_generator

Utiliser ce générateur pour créer votre raccourci, n’oubliez pas de mettre l’icone de votre application quand vous générez ce lien.

Le lien généré est en réalité une petite application qui lance chrome. Le but par la suite va donc être de packager chrome dans cette petite appli et de faire pointer le raccourcis vers celle ci.

Créer une nouvelle image .dmg

Explorer notre petite appli, chrome et notre nouvelle image.

Copier tout le contenu de notre appli directement dans notre image.

Creer un nouveau répertoire Datas et mettre tout le contenu de Chrome à l’intérieur.

Voici à quoi ressemble notre arborescence après décompression de l’image sous windows

Il nous faut maintenant modifier le script de lancement, il se trouve dans le répertoire MacOS à la racine. nous l’avons modifié comme ceci :

#!/bin/sh
iam= »$0″
profDir=$(dirname « $iam »)
profDir=$(dirname « $profDir »)
profDir= »$profDir/Profile »
exec ‘/Applications/yourApp.app/Contents/Datas/Contents/MacOS/Google Chrome’ –app= »http://yourApp.com/ » –user-data-dir= »$profDir » « $@ »

Normalement vous devriez maintenant disposé d’une application installable sous Mac par un simple copier coller dans le répertoire Application.

Linux :

Nous n’avons pas eu le temps de créer des version linux, cela nous a semblé possible mais compliqué. Il existe en effet 4 version différentes de chrome pour les différentes distributions de linux, il faudrait faire un installeur spécifique pour chaque distribution.

Le principe serait de télécharger les package chrome, de les décompresser, de rajouter une génération automatique de raccourcis pour lancer notre appli et de rapackager le tout pour qu’il soit installer sous linux.

Categories: Divers, Outillage Tags:
  1. 15/11/2012 à 16:44 | #1

    J’ai comme l’impression que vous devez être orphelin de Adobe AIR, non 😉 ?

    Je pense que le concept sous-jacent à Adobe AIR était et reste particulièrement intéressant: un moteur d’exécution (runtime), coté client, incluant un navigateur web ; in fine, cela rassemble à la fois les forces du client léger et du client lourd.

    Sans jamais avoir mis les mains dans Adobe AIR, ni dans ActionScript, j’ai fini par reconnaitre l’intérêt du concept hybride sous-jacent. Depuis, je scrute les instanciations de ce concept:

    * « JavaFX may be the next Adobe AIR » : http://www.jroller.com/dmdevito/entry/javafx_may_be_the_next

    * « Adobe Flex+AIR sound just like Firefox » : http://www.jroller.com/dmdevito/entry/adobe_flex_air_sound_just

    * « Oracle looks like to offer 2 alternatives to Flex/AIR » : http://www.jroller.com/dmdevito/entry/oracle_looks_like_to_offer

    Puisque vous vous êtes intéressés à Eclipse RCP, que pensez-vous de JavaFX ?

  2. Remy Lapierre
    18/12/2012 à 08:42 | #2

    Nous avons effectué un test avec javaFX.
    En prenant l’un des exemple proposé nous avons tenté d’afficher notre application dans un navigateur web embarqué par javaFX. Nous avons rencontré les même problèmes qu’avec les autres Framework java testés : une mauvaise intégration de l’html5 css3.
    Il faut cependant noter que parmi tous les tests que nous avons effectués, JavaFX a été notre meilleur résultat. Nous ne pouvions cependant pas nous permettre de modifier l’application pour qu’elle soit complètement compatible avec JavaFX. Bien que l’intégration ait été meilleure, il nous aurait fallu changer beaucoup de choses.

    Concernant Adobe Air nous n’avons pas tenté cette approche.

  3. Laurent
    30/04/2016 à 21:12 | #3

    Bonjour, aurait-il moyen d’avoir le tuto pour créer l’appli sur Mac plus détaillé ?
    Car je n’arrive pas à le re-créer comme c’est expliqué plus haut.

  4. Lucien
    03/06/2016 à 10:57 | #4

    Excellent billet

  1. Pas encore de trackbacks


trois + 9 =