Come trasformare una web app Angular in un’app desktop con Electron per Windows e macOS

Premessa: perché una web app non basta (più)

Oggi molte aziende partono da una web app in Angular per la rapidità di sviluppo, la facilità di rilascio e la flessibilità multipiattaforma. Ma ci sono contesti — ambienti aziendali, team interni, reti chiuse, postazioni fisse — in cui un’app desktop installabile è preferibile o addirittura necessaria.

È proprio il caso che abbiamo affrontato in Shellonback: un CRM sviluppato in Angular, pensato all’inizio solo per il browser, è dovuto diventare un’app desktop completa per Windows e macOS.

---

Obiettivo: portare l’esperienza utente oltre il browser

Non si trattava semplicemente di “incapsulare” l’app in Electron, ma di offrire:

• Esperienza nativa su entrambi i sistemi operativi
• Distribuzione tramite installer MSI e DMG
• Aggiornamenti automatici, firmati e silenziosi
• Compatibilità con ambienti aziendali (proxy, certificati, AD)
• Accesso locale sicuro e integrazione con il file system
• Velocità e stabilità paragonabili a quelle di un’app nativa

---

Architettura adottata

Abbiamo mantenuto il core Angular come SPA già ottimizzata per il browser, integrandolo in un progetto Electron gestito tramite electron-builder, con questa struttura:

📁 root
├── 📁 angular-app (SPA buildata)
├── 📁 electron
│   ├── main.ts (main process)
│   └── preload.ts (contextBridge)
└── 📄 electron-builder.config.js

Dettagli tecnici implementati:

• Comunicazione IPC sicura: nessuna chiamata diretta dal renderer, tutto passa per contextBridge e ipcRenderer, in modo sicuro e in sandbox.
• Aggiornamento automatico multipiattaforma: integrazione con electron-updater, supporto a Squirrel.Windows e DMG notarizzato con firma Apple.
• Persistenza dei dati: fallback su IndexedDB per Angular, ma supporto anche a SQLite locale tramite better-sqlite3 con binding nativo.
• Notifiche di sistema: gestite tramite la Notification API per coerenza con Angular, ma con fallback nativo su Windows Notification Center/macOS Notification Center.
• Supporto offline: cache intelligente tramite Service Worker, che in Electron è ancora utile quando Angular è compilato come PWA.
• Modalità kiosk/embedded: per postazioni in ambienti retail, possibilità di avviare l’app a schermo intero bloccato.

---

Distribuzione e DevOps

Abbiamo creato un processo CI/CD dedicato con GitHub Actions:

• Build Angular + Electron
• Packaging per Windows (.exe, .msi) e macOS (.dmg, notarizzazione)
• Deploy su server di aggiornamento custom (compatibile con autoUpdater)
• Firma digitale con certificati EV/Apple Developer ID

---

Risultato

Il risultato è un’app capace di:

• Installarsi come un software standard
• Funzionare offline, anche in ambienti chiusi
• Aggiornarsi automaticamente
• Integrarsi con il sistema operativo
• Conservare tutto il valore dello stack Angular esistente

Tutto questo senza riscrivere l’applicazione da zero, ma ottimizzando ciò che c’era già con una solida infrastruttura basata su Electron.

---

Considerazioni finali

Trasformare una web app in un’app desktop non è solo una questione estetica o di comodità: può rendere possibili casi d’uso strategici, in contesti dove la connessione non è garantita o dove l’integrazione con l’ambiente locale è essenziale.

In Shellonback questo tipo di progetti ci appassiona: uniamo esperienza web, infrastruttura desktop, attenzione al dettaglio UX e pipeline di rilascio professionali.

---

Vuoi fare lo stesso con la tua web app?

Che sia un CRM, un gestionale o una dashboard, possiamo aiutarti a trasformarlo in un’app desktop elegante e potente.

Contattaci
http://shellonback.com/contact