Capacitor è una layer che espone un set di API che consentono alle applicazioni web-based di accedere a funzionalità native all'interno di un device. Questa descrizione potrebbe riportare la nostra memoria a due librerie già esistenti da molto tempo sul mercato: Apache Cordova e Adobe PhoneGap. L'associazione è in effetti corretta: Capacitor è una libreria che si frappone tra la nostra applicazione web e il sistema operativo. Il suo core prende spunto da Apache Cordova e ne mantiene una retrocompatibilità. All'interno dell'infrastruttura possiamo trovare anche metodologie e strutture che possono ricordare altri framework popolari come React Native e TurboLinks.

I motivi che ci spingono a scegliere Capacitor sono presto elencati:

• API che garantiscono lo sviluppo di un'app 100% cross-platform;
• Indipendenza dalla piattaforma di distribuzione, la quale può essere impostata in un secondo momento;
• Utilizzo di npm per aggiungere plug-in o crearne di nuovi;
• Possibilità di customizzare il plug-in utilizzando codice nativo, dove necessario.

Capacitor può essere implementato su qualsiasi framework frontend, con una predilezione verso Ionic, la cui CLI, dal giorno 0, è in grado di configurare in automatico un progetto che utilizzi la libreria.

Con l'ultima verisone degli Angular Schematics è possibile configurare in modo del tutto automatico anche un progetto Angular! Questo ci consentirà di distribuire la nostra applicazione anche tramite AppleStore, PlayStore e lo Store di Windows; permettendoci di creare progetti sia per iOS che Android che Electron. Partendo da una nuova applicazione Angular, o utilizzando una applicazione già esistente, ci basterà utilizzare uno script per configurare il progetto.

ng new myApp --routing --style scss
cd myApp
ng add @capacitor/angular

A questo punto, come descritto a console al termine dell'installazione, possiamo compilare l'applicazione, come siamo abituati da sempre e, successivamente, utilizzare i comandi npx cap add ios o npx cap add android, per convertire la nostra applicazione in un progetto Xcode o AndroidStudio. E' importante ricordare che per poter creare i due progetti è necessario configurare la macchina di sviluppo in maniera opportuna.

Capacitor è una libreria che non impatta sulla struttura del progetto. Oltre a installare le due dipendenze necessarie per l'utilizzo @capacitor/core e @capacitor/cli modificando il package.json ed eseguire un minimo scaffolding, riesce a riutilizzare le informazioni presenti nel file angular.json e nella folder /dist per poter creare un progetto compatibile con la piattaforma selezionata, inserire i file e valorizzare le proprietà principali come, ad esempio, il nome che avrà l'applicazione.