Cos'è Capacitor e quando trasformare un sito in un'app

Hai una web app che funziona, i clienti la usano ogni giorno dal telefono, e adesso ti chiedono "ma è sugli store?". Riscriverla da capo in Flutter o React Native significa mesi di lavoro e due codici da mantenere; una PWA non basta perché servono le notifiche su iPhone e la presenza nell'App Store. In questo articolo trovi la terza strada, cosa ti dà davvero e dove smette di funzionare.

Cos'è Capacitor

Capacitor è un runtime open source che impacchetta un'applicazione web — HTML, CSS e JavaScript, fatta con qualsiasi framework — dentro un'app nativa per iOS e Android che la mostra in una WebView, e che le dà accesso alle funzioni del dispositivo come fotocamera, notifiche e file tramite plugin.

In altre parole: la tua interfaccia resta una pagina web, ma vive dentro un vero progetto Xcode e un vero progetto Android Studio, si installa dagli store e può chiamare codice nativo quando serve.

È sviluppato dal team di Ionic ed è di fatto il successore di Cordova (e di PhoneGap, la sua distribuzione commerciale), l'approccio che per anni ha dominato le "app ibride". L'idea di fondo è la stessa, l'implementazione è più moderna: i progetti nativi sono file veri che tieni nel repository e puoi modificare, non cartelle rigenerate a ogni build, e il sistema di plugin è pensato per TypeScript e per gli strumenti web attuali.

Ionic e Capacitor: non sono la stessa cosa

È la confusione più frequente, e nasce dal fatto che vengono dalla stessa azienda.

	Ionic (Framework)	Capacitor
Cos'è	Una libreria di componenti UI per il web	Il contenitore nativo che ospita la web app
Cosa ti dà	Pulsanti, liste, schede, navigazione con aspetto da app mobile	Il progetto iOS/Android, la WebView, l'accesso alle API native
Dove gira	In qualsiasi browser	Dentro l'app installata (e sul web, dove i plugin hanno versioni web quando possibile)
Serve l'altro?	No	No

Puoi usare Ionic senza Capacitor, per fare una web app o una PWA con aspetto da app. E puoi usare Capacitor senza Ionic, impacchettando un'app fatta con React, Vue, Angular, Svelte o JavaScript puro con il tuo design system. Usarli insieme è comodo perché i componenti Ionic imitano i controlli di iOS e Android, ma non è obbligatorio.

Come funziona in pratica

Capacitor non costruisce la tua app web: prende quello che il tuo strumento di build ha già prodotto (per esempio la cartella dist di un progetto Vite) e lo copia dentro i progetti nativi.

npm install @capacitor/core @capacitor/cli
npx cap init

npm install @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios

npm run build
npx cap sync
npx cap open ios

cap sync copia il build web nei progetti nativi e aggiorna i plugin. cap open apre Xcode o Android Studio, da cui compili e pubblichi come faresti con qualsiasi app. Per compilare la versione iOS ti serve comunque un Mac.

Quando ti serve una funzione del dispositivo, installi un plugin e lo chiami da JavaScript:

import { Camera, CameraResultType } from "@capacitor/camera";

async function scattaFoto() {
  const foto = await Camera.getPhoto({
    quality: 80,
    resultType: CameraResultType.Uri,
  });
  return foto.webPath;
}

Sotto, il plugin esegue codice Swift su iOS e Kotlin o Java su Android, e ti restituisce il risultato come una normale Promise. Esistono plugin ufficiali per le funzioni più comuni (fotocamera, file, notifiche push e locali, geolocalizzazione, preferenze, condivisione), plugin della comunità per molto altro, e buona parte dei plugin Cordova resta utilizzabile. Se manca quello che ti serve, puoi scriverne uno tuo — e lì sì, tocchi il codice nativo.

La terza via tra PWA e cross-platform

Per inquadrare Capacitor servono le altre due opzioni. Il quadro generale è in come scegliere la tecnologia per un'app mobile; qui conta il confronto diretto.

Una PWA è un sito installabile: nessuno store, nessuna revisione, aggiornamenti immediati. I limiti sono noti e li trovi in PWA o app nativa: su iOS le notifiche web richiedono che l'utente aggiunga l'app alla schermata Home e restano meno affidabili di quelle native, l'accesso alle API del dispositivo è parziale, e molti utenti un'app la cercano sugli store.

Un framework cross-platform come Flutter o React Native produce un'app con interfaccia nativa o disegnata da un motore dedicato, con prestazioni e sensazione al tocco da app vera. Ma è un codice nuovo: la tua web app non si riusa, si riscrive.

Capacitor si mette in mezzo. Ti serve quando:

• una PWA non basta — vuoi la presenza negli store, notifiche push affidabili anche su iPhone, accesso ad API native;
• ma non vuoi o non puoi riscrivere tutto in un altro framework, perché esiste già una web app funzionante o perché il team sa fare web e basta.

Il vantaggio più concreto è che lo stesso codice serve il sito, la PWA e le app negli store. Una modifica, tre canali aggiornati.

I limiti, senza addolcirli

Prestazioni e sensazione da web, non da app nativa. L'interfaccia è una pagina in una WebView. Le WebView moderne sono veloci, ma l'utente attento percepisce la differenza: la risposta al tocco, lo scorrimento, le transizioni tra schermate non sono quelle di un'app nativa. Ionic riduce la distanza, non la annulla.

Animazioni complesse e liste enormi soffrono. Un elenco di migliaia di righe, gesti elaborati, animazioni legate al dito: sono i punti dove un motore web in un contenitore mostra i suoi limiti. Si mitiga con la virtualizzazione delle liste e con CSS ben scritto, ma se la tua app vive di queste cose, Capacitor è la scelta sbagliata.

Apple può rifiutarla. Le linee guida dell'App Store chiedono che un'app offra funzionalità da app, e prevedono il rifiuto per le app che sono sostanzialmente un sito web impacchettato senza valore aggiunto. Un'app Capacitor che mostra solo il tuo sito, magari caricandolo da remoto, rischia esattamente questo. Integrazioni native reali — notifiche, fotocamera, funzionamento offline, accesso ai file — fanno la differenza. Le regole e la loro interpretazione cambiano: verifica alla fonte e leggi come pubblicare un'app sull'App Store prima di investire.

Due mondi da gestire comunque. Anche se scrivi solo web, restano Xcode, Gradle, certificati, permessi, versioni minime dei sistemi operativi. Qualcuno nel team deve saperli affrontare quando una build fallisce.

Differenze tra WebView. Su iOS il motore è quello di Safari, su Android quello di Chrome aggiornato tramite il sistema. Una funzione CSS o JavaScript che funziona su uno può comportarsi diversamente sull'altro, come nello sviluppo web classico.

Quando è la scelta ideale

Tipo di progetto	Capacitor?	Perché
App gestionali, CRM, pannelli di amministrazione	Sì	Tanti form e tabelle, poche animazioni
Strumenti interni aziendali	Sì	La distribuzione conta più della raffinatezza grafica
Prodotto con una web app già esistente	Sì	Riusi quasi tutto il codice
App di contenuti con qualche funzione nativa	Spesso	Se il valore aggiunto rispetto al sito è chiaro
Giochi, app con animazioni ricche	No	Serve un motore di rendering dedicato
Social con feed infiniti e gesti complessi	No	Le liste enormi sono il punto debole
App che devono sembrare indistinguibili dal sistema	No	Meglio React Native o nativo

Errori comuni

Caricare il sito remoto invece di impacchettarlo. Puntare la WebView all'URL del tuo sito in produzione sembra comodo, ma perdi il funzionamento offline e ti esponi al rifiuto in revisione. I file vanno inclusi nell'app.

Non adattare l'interfaccia al contesto app. Un sito con footer, cookie banner e link "scarica la nostra app" dentro un'app installata è un segnale evidente di sito impacchettato. Gestisci le aree sicure dello schermo (notch, barra di sistema) e rimuovi ciò che ha senso solo nel browser.

Dimenticare cap sync. Modifichi il codice web, ricompili da Xcode e non vedi il cambiamento: il build web non è stato copiato nel progetto nativo.

Confondere Ionic e Capacitor nella scelta. Non ti serve il framework Ionic per usare Capacitor, e scegliere Ionic non risolve da solo il problema degli store.

Testare solo nel browser. Plugin, permessi e comportamento della WebView vanno provati su dispositivi reali, su entrambe le piattaforme.

In sintesi

Capacitor trasforma una web app in un'app installabile dagli store, mostrandola in una WebView dentro un vero progetto nativo e dandole accesso alle funzioni del dispositivo tramite plugin. È il successore moderno di Cordova.

Ionic e Capacitor sono due cose diverse: il primo è una libreria di componenti UI, il secondo è il contenitore nativo. Si usano bene insieme, ma nessuno dei due richiede l'altro.

È la terza via tra PWA e cross-platform: più di una PWA (store, notifiche affidabili, API native), senza la riscrittura richiesta da Flutter o React Native. Il vantaggio vero è un unico codice per sito e app.

I limiti sono quelli del web: sensazione al tocco non nativa, difficoltà con animazioni e liste enormi, e il rischio di rifiuto da parte di Apple se l'app è solo un sito impacchettato. È ideale per gestionali, strumenti interni e prodotti che hanno già una web app; è sbagliato per tutto ciò che vive di fluidità.

Se vuoi rafforzare le basi web che Capacitor mette a frutto, trovi i percorsi nei corsi. Se hai una web app e vuoi capire se portarla sugli store con Capacitor o con un altro approccio, è uno dei servizi di cui mi occupo.