Attività iniziali per lo sviluppo di un'app Web ibrida o PWA per Android
Questa guida consente di iniziare a creare un'app Web ibrida o un'app Web progressiva (Progressive Web App - PWA) in Windows usando una singola codebase HTML/CSS/JavaScript che può essere usata sul Web e tra piattaforme per dispositivi (Android, iOS, Windows).
Usando i framework e i componenti corretti, le applicazioni basate sul Web possono funzionare in un dispositivo Android in modo che sembri molto simile a un'app nativa.
Esistono due tipi principali di app Web che possono essere installate nei dispositivi Android. La differenza principale consiste nel fatto che il codice dell'applicazione sia incorporato in un pacchetto dell'app (ibrido) oppure ospitato in un server Web (PWA).
App Web ibride: il codice (HTML, JS, CSS) viene incluso in un pacchetto APK e può essere distribuito tramite Google Play Store. Il motore di visualizzazione è isolato dal browser Internet degli utenti, nessuna sessione o condivisione della cache.
App Web progressive (Progressive Web Apps - PWA): il codice (HTML, JS, CSS) si trova sul Web e non deve essere inserito in un pacchetto come APK. Le risorse vengono scaricate e aggiornate in base alle esigenze usando un ruolo di lavoro del servizio. Il browser Chrome eseguirà il rendering e visualizzerà l'app, ma avrà un aspetto nativo e non includerà la normale barra degli indirizzi del browser e così via. È possibile condividere archiviazione, cache e sessioni con il browser. Questo in pratica è come l'installazione di un collegamento al browser Chrome in una modalità speciale. Le PWA possono essere elencate anche in Google Play Store usando attività Web attendibili.
App Web ibride e PWA sono molto simili a un'app Android nativa in quanto:
- possono essere installate tramite l'App Store (Google Play Store e/o Microsoft Store)
- Avere accesso alle funzionalità native del dispositivo, ad esempio fotocamera, GPS, Bluetooth, notifiche ed elenco di contatti
- Work Offline (nessuna connessione Internet)
Le PWA hanno anche alcune funzionalità uniche:
- possono essere installate nella schermata iniziale di Android direttamente dal Web (senza un App Store)
- possono anche essere installate tramite Google Play Store usando un'attività Web attendibile
- possono essere individuate tramite ricerca Web o condivise tramite un collegamento URL
- Fare affidamento su un Ruolo di lavoro del servizio per evitare la necessità di creare un pacchetto di codice nativo
Non è necessario un framework per creare un'app ibrida o PWA, ma in questa guida sono disponibili alcuni framework diffusi, tra cui PhoneGap (con Cordova) e Ionic (con Cordova o Capacitor usando Angular o React).
Apache Cordova è un framework open source che consente di semplificare la comunicazione tra il codice JavaScript che vive in un webview nativo e la piattaforma Android nativa usando plug-in. Questi plug-in espongono endpoint JavaScript che possono essere chiamati dal codice e usati per chiamare API native per dispositivi Android. Alcuni plug-in Cordova di esempio includono l'accesso ai servizi del dispositivo, ad esempio stato della batteria, accesso ai file, vibrazioni o suonerie e così via. Queste funzionalità non sono in genere disponibili per app Web o browser.
Esistono due distribuzioni comuni di Cordova:
PhoneGap: il supporto è stato interrotto da Adobe.
Ionic è un framework che regola l'interfaccia utente (UI) dell'app in modo che corrisponda al linguaggio di progettazione di ogni piattaforma (Android, iOS, Windows). Ionic ti consente di utilizzare Angular o React.
Nota
Esiste una nuova versione di Ionic che usa un'alternativa a Cordova, chiamata Capacitor. Questa alternativa usa i contenitori per rendere l'app più intuitiva.
Per iniziare a creare un'app Web ibrida o PWA con Ionic, è prima necessario installare gli strumenti seguenti:
Node.js per interagire con l'ecosistema Ionic. Scaricare NodeJS per Windows o seguire la guida all'installazione di NodeJS usando il Sottosistema Windows per Linux (Windows Subsystem for Linux - WSL). È possibile prendere in considerazione l'utilizzo di Node Version Manager (nvm) se si lavora con più progetti e versioni di NodeJS.
VS Code per la scrittura del codice. Scaricare VS Code per Windows. Inoltre è possibile installare l'estensione WSL-Remote se si preferisce compilare l'app con una riga di comando Linux.
Terminale Windows per l'uso dell'interfaccia della riga di comando preferita (CLI). È possibile installare Terminale Windows da Microsoft Store.
Git per il controllo della versione. Scaricare Git.
Installare Ionic e Cordova immettendo quanto segue nella riga di comando:
npm install -g @ionic/cli cordova
Creare un'app Ionic Angular usando il modello di app "Schede", tramite l'immissione del comando:
ionic start photo-gallery tabs
Passare alla cartella dell'app:
cd photo-gallery
Eseguire l'app nel browser Web:
ionic serve
Per altre informazioni, vedere la documentazione di Ionic Cordova Angular. Per scoprire come trasformare l'app da ibrida a PWA, visitare la sezione Rendere l'app Angular una PWA dei documenti Ionic.
Installare Ionic e Cordova-Res immettendo quanto segue nella riga di comando:
npm install -g @ionic/cli native-run cordova-res
Creare un'app Ionic Angular usando il modello di app "Schede" e aggiungendo Capacitor tramite l'immissione del comando:
ionic start photo-gallery tabs --type=angular --capacitor
Passare alla cartella dell'app:
cd photo-gallery
Aggiungere componenti per rendere l'app una PWA:
npm install @ionic/pwa-elements
Importare @ionic/pwa-elements aggiungendo quanto segue al file src/main.ts
:
import { defineCustomElements } from '@ionic/pwa-elements/loader';
// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);
Eseguire l'app nel browser Web:
ionic serve
Per altre informazioni, vedere la documentazione di Ionic Capacitor Angular. Per scoprire come trasformare l'app da ibrida a PWA, visitare la sezione Rendere l'app Angular una PWA dei documenti Ionic.
Installare l'interfaccia della riga di comando Ionic immettendo quanto segue nella riga di comando:
npm install -g @ionic/cli
Creare un nuovo progetto con React immettendo il comando:
ionic start myApp blank --type=react
Passare alla cartella dell'app:
cd myApp
Eseguire l'app nel browser Web:
ionic serve
Per altre informazioni, vedere la documentazione di Ionic React. Per scoprire come trasformare l'app da ibrida a PWA, visitare la sezione Rendere l'app React una PWA dei documenti Ionic.
Per testare l'app Ionic in un dispositivo Android, collegare il dispositivo (assicurarsi che sia prima abilitato per lo sviluppo), quindi nella riga di comando immettere:
ionic cordova run android
Per testare l'app Ionic in un emulatore di dispositivo Android, è necessario:
Installare i componenti necessari: Java Development Kit (JDK), Gradle e Android SDK.
Creare una proprietà del dispositivo virtuale Android (Android Virtual Device - AVD): vedere la [Guida per sviluppatori Android]](https://developer.android.com/studio/run/managing-avds.html).
Immettere il comando affinché Ionic crei la compilazione e la distribuzione dell'app nell'emulatore:
ionic cordova emulate [<platform>] [options]
. In questo caso, il comando dovrebbe essere:
ionic cordova emulate android --list
Per altre informazioni, vedere Emulatore Cordova nella documentazione Ionic.
Feedback su Windows developer
Windows developer è un progetto di open source. Selezionare un collegamento per fornire feedback: