Condividi tramite

Attività iniziali per lo sviluppo di un'app Web ibrida o PWA per Android

  • Articolo

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.

Funzionalità di app Web ibrida o PWA

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

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

Ionic

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.

Attività iniziali di Ionic tramite installazione degli strumenti necessari

Per iniziare a creare un'app Web ibrida o PWA con Ionic, è prima necessario installare gli strumenti seguenti:

Creare un nuovo progetto con Cordova e Angular

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.

Creare un nuovo progetto con Capacitor e Angular

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.

Creare un nuovo progetto con Ionic e React

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.

Testare l'app in un dispositivo o emulatore

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:

  1. Installare i componenti necessari: Java Development Kit (JDK), Gradle e Android SDK.

  2. 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).

  3. 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.