Transformer un site web en application de bureau

Vos petites astuces, répertoire des tutoriels et astuces
Répondre
Avatar du membre
ledudulela
Messages : 242
Enregistré le : mer. 15 juil. 2015 20:49
Localisation : France - Gironde

Transformer un site web en application de bureau

Message par ledudulela »

----------------------------------------------------------------------------------------------------------
Node.js et Nativefier
màj 2021-12-13
Mise en pratique réalisée sur Linux Mint Debian Edition 4 (Debian 10)
pour le logiciel de messagerie chiffrée "Element" (https://app.element.io)
----------------------------------------------------------------------------------------------------------

Voici une autre façon pour accéder à vos sites favoris sans passer par un navigateur internet,
directement en créant une application sur votre bureau, avec l’aide de << Nativefier >>.

Nativefier est une application qui permet de transformer n’importe quel site internet en une application de bureau.
L'application générée est un navigateur autonome et allégé (chromium) affichant le site désiré.
Nativefier s'appuie sur l'environnement d'exécution Node.js .

Afin d'utiliser Nativefier, il est nécessaire d'installer npm (Node Packages Manager).
NPM est le gestionnaire de paquets officiel de Node.js.
Il permet d'installer des applications Node.js disponibles sur le dépôt npm.

Code : Tout sélectionner

apt-get install npm
Une fois npm installé, il est conseillé d'installer le module "N" qui permettra de mettre à jour Node.js .
Par exemple, si vous voulez mettre à jour votre version de Node.js (obtenir la plus stable), la commande:

Code : Tout sélectionner

sudo n lts
l'installera instantanément, tout en conservant les versions précédentes de Node pour un basculement facile si besoin.

npm est le moyen le plus simple d'installer les modules.
Les modules Node ont la caractéristique de pouvoir être exécutés dans un shell lorsqu'ils sont installés "globalement".
Pour installer un package "globalement" et s’en servir sur sa machine comme ligne de commande (CLI), exécutez la commande:
npm install nom_package -g

Et donc pour installer le module n:

Code : Tout sélectionner

npm install -g n
Enfin, pour installer le module nativefier:

Code : Tout sélectionner

npm install -g nativefier
Si à l'installation d'un module, un message d'avertissement de ce type apparait:

Code : Tout sélectionner

 npm notice New minor version of npm available! 8.1.2 -> 8.3.0
 npm notice Run npm install -g npm@8.3.0 to update!
Il suffit alors de suivre les instructions pour mettre à jour npm:

Code : Tout sélectionner

npm install -g npm@8.3.0
Il ne reste plus qu'à "nativefier" le site web de notre choix.
Exemple avec app.element.io :

Dans un premier temps, créez un dossier qui contiendra l'application.
Exemple: ~/Applications/Element/

Se placer dans ce dossier:
cd ~/Applications/Element/

Y coller l'icone de l'application (trouvée sur internet) qui apparaitra dans la barre des taches une fois l'application lancée.
Exemple: Element.png

Créez l'application finale avec la commande suivante:

Code : Tout sélectionner

nativefier --name "Element" --icon "./Element.png" --platform "linux" --arch "x64" --maximize --disable-dev-tools --single-instance --insecure --tray --internal-urls ".*?app\.element\.io.*?" --app-copyright "Matrix.org/Element" "https://app.element.io/"
Ce commande crée un fichier exécutable du nom de l'application dans un sous-répertoire ./appname-linux-x64/

Lancez l'application (exemple pour Linux Mint):

Code : Tout sélectionner

exec ~/Applications/Element/Element-linux-x64/Element --no-sandbox
Pour information, les données de l'application une fois lancée sont stockées dans le dossier $HOME/.config

Exemple de fichier Element.desktop pour créer un raccourci sur le bureau:

Code : Tout sélectionner

[Desktop Entry]
Encoding=UTF-8
Name=Element
Exec=/home/user/Applications/Element/Element-linux-x64/Element --no-sandbox
Terminal=false
Type=Application
Icon=/home/user/Applications/Element/Element.png
Comment=Private messaging from your desktop 
Categories=Network;InstantMessaging;Chat;
leDuduLéLà - Linux Mint Debian Edition 1 Mate , 2 Mate , 3 Cinnamon , 4 Cinnamon , 5 Cinnamon / 64 bits 6 Cinnamon / 64 bits

Répondre