Nativefier - création de vos web apps

Webmaster inclus dans catégorie Blog

2023-02-06 2024-07-11 499 mots 3 minutes

Contenu

Nativefier permet de créer des applications web autonomes (webapps) à partir de vos sites préférés. cela évite d’installer les versions logicielles natives des services web, et offre une pseudo-application quand aucune version officielle n’est disponible pour votre distribution.

Nativefier s’appuie sur Node.js, ce qui le rend multiplateforme (Windows, Linux, macOS).

Les manipulations décrites sont réalisées sous elementary OS 7. Si vous utilisez un autre système, adaptez les commandes et chemins.

Installation de Nativefier

On commence par l’installation des paquets requis.

# Installation de la version LTS de NodeJS
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
# Installation de la version Current de NodeJS
curl -sL https://deb.nodesource.com/setup_19.x | sudo -E bash -

sudo apt-get install -y nodejs npm

Site officiel

Ensuite, on installe le paquet Nativefier avec npm

sudo npm install nativefier -g # -g qui permet une installation global

Mise en place de l’environnement

Avant d’utiliser Nativefier, nous allons mettre en place les différents dossiers utile, mais cette étape n’est pas obligatoire, vous pouvez adapter la structure à vos besoins.

Nous allons créer un dossier spécifique pour les webapps. Mais sachez que Nativefier va créer la webapp dans le dossier courant.

Je vais l’appeler .webapps (un point devant, pour le cacher) et créer les sous dossier icônes et apps.

Pour récupérer de belles icônes de vos applications, voici le site dédié : logosear.ch

mkdir .webapps && mkdir .webapps/icones && mkdir .webapps/apps

Placez-vous dans le répertoire dédié aux webapps :

cd ~/.webapps/apps

Création de la 1ère Webapps

On va tester la création de la première webapp avec WhatsApp.

nativefier -n "WhatsApp" -i "~/chemi/vers/votre/icons/whatsapp.png" "https://web.whatsapp.com"

Voici la réponse que vous aurez :

$ nativefier -n "WhatsApp" -i ~/.apps/icones/WhatsApp.png "https://web.whatsapp.com"


    Hi! Nativefier is minimally maintained these days, and needs more hands.
    If you have the time & motivation, help with bugfixes and maintenance is VERY welcome.
    Please go to https://github.com/nativefier/nativefier and help how you can. Thanks.

Processing options...

Preparing Electron app...

Converting icons...

Packaging... This will take a few seconds, maybe minutes if the requested Electron isn't cached yet...

Finalizing build...
App built to /chemi/vers/votre/Webapps/apps/WhatsApp-linux-x64, move to wherever it makes sense for you and run the contained executable file (prefixing with ./ if necessary)
Menu/desktop shortcuts are up to you, because Nativefier cannot know where you're going to move the app. Search for "linux .desktop file" for help, or see https://wiki.archlinux.org/index.php/Desktop_entries

Vous pouvez maintenant lancer la webapp à partir du raccourci qui a été créé à cet endroit :

/chemi/vers/votre/Webapps/apps/whats-app-web-linux-x64

Création d’un raccourci dans le Slingshot

Maintenant que votre webapp est installée, intégrons-la au lanceur d’applications (Slingshot) d’elementary OS pour un accès rapide.

Pour simplifier la création des raccourcis, nous utiliserons AppEditor, une application dédiée disponible en Flatpak :

flatpak install flathub io.github.lainsce.AppEditor

Flathub—An app store and build service for Linux

Vous pouvez désormais faire vos différentes Webapps. Dans un prochains post, j’expliquerai comment permettre d’utiliser un useragent différent ou activer l’option Widevine qui est utile pour Netflix.

Source