Nativefier le vere WebApp

Mar 14, 2026 · 6 min. lettura · linux webapp software opensource internet unix sviluppo ·

Spesso si fa uso delle WebApp per utilizzare specifiche pagine web com fossero applicazioni stand alone, soprattutto dove, sempre più spesso, non sono disponibili applicazioni specifiche native. In molte distribuzioni Linux sono disponibili strumenti per creare appunto delle WebApp.

tutto è molto utile e funzionale, tuttavia non esente da difetti, il più evidente, secondo me, la discreta confusione che viene a crearsi nel caso di utilizzo del browser e di differenti WebApp, icone che si confondono, link che si aprono da una finestra all'altra e non solo, le soluzioni ci sono, alcune più complicate altre meno, un buon compromesso tra efficacia e semplicità d'uso è a mio avviso nativefier, questo strumento ci permette di creare WebApp che si comportano come vere e proprie applicazioni con istanze singole e icone personalizzate, grazie ad Electron.

Electron è un framework open source che permette di creare applicazioni desktop usando tecnologie web (HTML, CSS e JavaScript). In pratica, impacchetta insieme un browser Chromium ridotto e Node.js, così una webapp gira come se fosse un'app nativa sul tuo sistema operativo. È lo stesso motore che fa girare applicazioni popolari come Visual Studio Code, Slack e Discord. Il rovescio della medaglia è che ogni app Electron porta con sé il suo Chromium, risultando più pesante in memoria rispetto a un'app nativa tradizionale.

Di seguito cercherò di guidarvi all'uso di questo utilissimo strumento.

Per prima cosa abbiamo bisogno di alcuni strumenti, oltre nativefier ovviamente, per permettere a quest'ultimo di funzionare correttamente, ci occorre NodeJS e npm

1sudo apt update
2sudo apt intall nodejs npm

Node.js è un ambiente di esecuzione che permette di usare JavaScript fuori dal browser, direttamente sul sistema operativo. È alla base di moltissimi strumenti da terminale e server web moderni. npm (Node Package Manager) è il suo gestore di pacchetti integrato, che permette di installare con un solo comando librerie e strumenti sviluppati dalla comunità — tra cui, appunto, Nativefier. Con oltre un milione di pacchetti disponibili, npm è oggi il registro di software open source più grande al mondo.

1sudo npm install -g nativefier

Il flag -g installa il pacchetto globalmente, rendendolo disponibile come comando da qualsiasi cartella.

creare una WebApp

iniziamo a creare una WebApp con un comando base:

1nativefier "https://sito.com" --name "NomeApp" --icon ~/icona.png

nativefier creerà una cartella nella cartella di lavoro corrente

1~/NomeApp-linux-x64/

Vediamo di seguito le opzioni principali a nostra disposizione

Opzione	Descrizione
`--name`	Nome dell'app (visibile nel menu e nella barra)
`--icon`	Percorso a un file .png per l'icona (consigliato 256×256)
`--ignore-certificate`	Ignora certificati SSL non validi (self-signed su NAS/server locali)
`--insecure`	Permette contenuti misti HTTP/HTTPS (reti locali HTTP)
`--internal-urls`	Regex degli URL da tenere nella finestra (gli altri si aprono nel browser)
`--single-instance`	Impedisce di aprire più copie dell'app per sbaglio
`--hide-window-frame`	Rimuove la barra del titolo per un look più nativo
`--user-agent`	User-agent personalizzato (se il sito blocca Electron)

Alcune di queste opzioni sono molto importati per la creazione e la specificità della nostra WebApp

Esempio di creazione di una WebApp per un servizio locale: NAS, router, stampanti etc...

1nativefier "https://192.168.0.10:5001" --name "rymnas" --icon ~/benas.png --ignore-certificate --internal-urls ".*192\.168\.0\.10.*"

è possibile anche procedere in maniera differente, senza necessariamente inserire tutte le opzioni nella stessa riga, ecco come fare:

1nativefier "https://www.ilsitoapp.com"
2>--name "nome della mia webapp" \
3>--icon miaicona.png \
4>--single-instance

se al termine della prima riga dove viene inserito il carattere backslash questo abiliterà una sorta di modalità editor, dove potremo inserire via via le opzioni che ci saranno utili, il mancato inserimento di backslash \ determinerà la fine dell'inserimento delle opzioni e nativefier creerà la cartella come sopraindicato.

Una volta creata la nostra applicazione sarà necessario installarla o meglio, integrarla nel sistema, questa guide è riferita a sistemi Debian like, i percorsi sono quindi riferiti in tal senso.

spostiamo la cartella con la nostra WebApp nella cartella di sistema /opt e rendiamola eseguibile:

1sudo mv ~/NomeApp-linux-x64 /opt/nomeapp
2chmod +x /opt/nomeapp/NomeApp

per ritrovare la nostra applicazione nel menu dovremmo creare un file .desktop un uno specifico percorso:

1nano ~/.local/share/applications/nomeapp.desktop

il file dovrà contenere queste informazioni:

1[Desktop Entry]
2Name=NomeApp
3Exec=/opt/nomeapp/NomeApp
4Icon=/opt/nomeapp/resources/app/icon.png
5Type=Application
6Categories=Network;
7StartupWMClass=nomeapp

NB io ho dato indicazione per creare il file .desktop con l'editor nano ma è possibile utilizzare qualsiasi editor voi preferiate.

successivamente aggiorniamo il database delle applicazioni:

1update-desktop-database ~/.local/share/applications/

nel caso l'elenco della applicazioni non visualizzasse la nostra nuova WebApp, verificata la correttezza di tutti i passaggi e il contenuto del file .desktop, possiamo forzare l'aggiornamento della cache di Cinnamon, mi riferisco a Cinnamon in quanto utilizzo Linux Mint.

La voce StartupWMClass

È la riga più importante per l'isolamento visivo. Dice a Cinnamon di trattare questa finestra come un'applicazione separata, assegnandole la propria icona nel taskbar senza raggrupparla con il browser.

Per trovare il valore corretto, apri l'applicazione e lancia da un altro terminale:

1xprop WM_CLASS

Icone di qualità

Nativefier tenta di scaricare l'icona dal sito automaticamente, ma spesso il risultato è di bassa qualità. Meglio procurarsene una manualmente in formato PNG 256×256 o 512×512.

alcune risorse potrebbero essere:

macosicons.com — ottima raccolta in stile macOS, perfette anche su Linux
iconsdb.com — icone PNG gratuite in varie dimensioni
Repository GitHub ufficiali dei progetti (Home Assistant, Nextcloud, Portainer…)

Aggiornare o ricreare un'applicazione

 1# Elimina la versione precedente
 2sudo rm -rf /opt/nomeapp
 3rm -rf ~/NomeApp-linux-x64
 4
 5# Rilancia il comando con le nuove opzioni
 6nativefier "https://..." --name "NomeApp" --icon ~/icona.png --ignore-certificate --internal-urls ".*indirizzo.*"
 7
 8# Reinstalla
 9sudo mv ~/NomeApp-linux-x64 /opt/nomeapp
10chmod +x /opt/nomeapp/NomeApp

il file .desktop non andrà modificato, punta già al percorso corretto in /opt

Risoluzione dei problemi (indicativamente!)

Sintomo	Soluzione
Finestra bianca/vuota	Aggiungi `--ignore-certificate` (HTTPS self-signed) o `--insecure` (HTTP)
Link si aprono nel browser	Controlla il pattern `--internal-urls`, deve coprire tutti gli URL del servizio
Icona non appare nel menu	Verifica che `Icon=` nel `.desktop` punti a un file esistente
App non visibile nel menu	Riesegui `update-desktop-database ~/.local/share/applications/`
Più icone nel taskbar	Verifica che `StartupWMClass` corrisponda all'output di `xprop WM_CLASS`
Errore nel nome cartella	Non usare `\` su più righe: scrivi il comando tutto su una riga sola

Template / riferimento rapido

potete copiare adattando i valori riferiti alla WebApp che vorrete creare:

 1# 1. Crea l'app
 2nativefier "https://INDIRIZZO:PORTA" --name "NOMEAPP" --icon ~/icona.png --ignore-certificate --internal-urls ".*INDIRIZZO.*"
 3
 4# 2. Installa
 5sudo mv ~/NOMEAPP-linux-x64 /opt/nomeapp
 6chmod +x /opt/nomeapp/NOMEAPP
 7
 8# 3. Crea il file .desktop
 9cat > ~/.local/share/applications/nomeapp.desktop << 'EOF'
10[Desktop Entry]
11Name=NOMEAPP
12Exec=/opt/nomeapp/NOMEAPP
13Icon=/opt/nomeapp/resources/app/icon.png
14Type=Application
15Categories=Network;
16StartupWMClass=nomeapp
17EOF
18
19# 4. Aggiorna il menu
20update-desktop-database ~/.local/share/applications/

Ho cercato di essere più preciso possibile nelle indicazioni di utilizzo di questo strumento, potrebbe sembrare più complesso di quanto lo sia davvero poi in realtà. Lo consiglio come nuovo approccio alla creazione di WebApp.