# Nativefier - création de vos web apps


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).

<!--more-->

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. 

```bash
# 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](https://nodejs.org/?ref=techsystem.fr)

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](https://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 :

![web-app-01](web-app-01.png "web-app-01")

```
flatpak install flathub io.github.lainsce.AppEditor
```

[Flathub—An app store and build service for Linux
](https://flathub.org/apps/details/com.github.donadigo.appeditor)

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**

- [Forum elementary OS Fr](http://forum.elementaryos-fr.org/topic/1473-ajouter-ou-modifier-une-cat%C3%A9gorie-dans-le-menu-application-slingshot/?ref=techsystem.fr)  
- [Memo-linux](https://memo-linux.com/nativefier-transformez-nimporte-quel-site-web-en-application-de-bureau/?ref=techsystem.fr)  
- [Korben](https://korben.info/vos-applications-web-en-applications-natives.html?ref=techsystem.fr)  
- [Nativefier](https://www.npmjs.com/package/nativefier?ref=techsystem.fr)