Come trasformare una Web App Angular in un’App Desktop con Electron per Windows e macOS

Premessa: perché una Web App non basta (più)

Nel panorama attuale, molte aziende iniziano con una Web App in Angular per la rapidità di sviluppo, la facilità di deploy e la flessibilità cross-platform. Ma ci sono contesti — ambienti aziendali, team interni, reti chiuse, postazioni fisse — in cui un’app desktop installabile è preferibile o addirittura necessaria.

È proprio questo il caso che abbiamo affrontato in Shellonback: un CRM sviluppato in Angular, inizialmente pensato solo per il browser, ha dovuto evolvere in una desktop app full-featured 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 col file system
• Velocità e stabilità paragonabili a 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, seguendo questa struttura:

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

Dettagli tecnici implementati:

• Secure IPC communication: nessuna chiamata diretta dal renderer, tutto passa per contextBridge e ipcRenderer, in modo sicuro e sandboxato.
• Auto-update cross-platform: integrazione con electron-updater, supporto a Squirrel.Windows e DMG notarizzato con firma Apple.
• Persistenza dati: fallback su IndexedDB per Angular, ma supporto anche a SQLite locale tramite better-sqlite3 con binding nativo.
• Notifiche di sistema: gestite tramite 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 è buildato come PWA.
• Modalità kiosk/embedded: per postazioni in ambienti retail, possibilità di lanciare l’app in modalità full-screen locked.

---

Distribuzione & 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 Electron-based.

---

🧭 Considerazioni finali

Trasformare una Web App in App Desktop non è solo una questione estetica o di comodità: può abilitare use case strategici. Contesti dove la connessione non è garantita, o dove l’integrazione con l’ambiente locale è essenziale.

In Shellonback, questo tipo di progettualità 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