Le Web app sono applicazioni costruite usando le tecnologie standard del Web. Funzionano in ogni browser moderno e possono essere create con i tuoi strumenti preferiti. Ecco alcune caratteristiche che distinguono le Web app dai siti web: le Apps sono installate dall'utente, sono slegate dal browser e non sempre richiedono di essere eseguite in una finestra del browser, inoltre possono essere costruite perchè funzionino anche offline. Gmail, Twitter e Etherpad sono delle Web app.
Il progetto Mozilla Open Web Apps propone di aggiungere piccole migliorie a siti pre-esistenti per trasformarli in app che funzionano in un ambiente potente, semplice e variegato. Queste app funzionano sui browser desktop, sui device mobili e sono più semplici, per l'utente, sia da trovare sia da usare rispetto ad un sito web. Inoltre hanno accesso ad una serie crescente di funzioni tutte nuove, come la sincronizzazione tra gli apparecchi di un utente.
Prima di cominciare
Se sei uno sviluppatore ed è la tua prima volta con le Web app forse vorrai verificare a che punto è l'implementazione delle API.
Pubblicare la tua app
L'unica cosa da fare per creare una Web app da un sito web è che tu aggiunga un file manifest. Questo altro non è che un file JSON che descrive la tua app includendone il nome, le icone e una descrizione leggibile da un utente.
Il file manifest deve essere sullo stesso dominio del sito in questione e deve essere evidenziato dal tag Content-Type con valore application/x-web-app-manifest+json (Nota: per adesso non è obbligatorio ma è necesario per pubblicare sul Firefox Marketplace). Per tutti i dettagli su file manifest fai riferimento alla documentazione per il file manifest.
Ci sono strumenti adatti a validare il tuo file manifest. Vedi Validare un file manifest.
Stesso dominio d'origine
È importante ricordarsi che ogni app dovrebbe essere pubblicata sul suo dominio, quindi app differenti non dovrebbero condividere lo stesso dominio. La soluzione più immediata è di pubblicare ogni app su un sottodominio differente. Vedi le FAQs del file manifest per più informazioni sui domini d'origine.
Controllare se l'app è installata
Quando un browser Web carica la pagina dell'app bisogna tenere contro che l'utente potrebbe non avere l'app installata.
Puoi controllare se l'app è installata facendo una chiamata a checkInstalled()come nell'esempio:
var request = navigator.mozApps.checkInstalled("https://path.to/my/example.webapp");
request.onsuccess = function() {
if (request.result) {
// app installata
} else {
// non installata
}
};
request.onerror = function() {
alert('Errore durante il controllo: ' + this.error.message);
};
Installare le app
Puoi distribuire la tua app direttamente dal tuo sito. È una buona idea provare l'installazione dal tuo sito per vedere se funziona tutto prima della pubblicazione sul Firefox Marketplace.
Per farlo basta aggiungere un bottone o un ink che invochi questo javascript:
var request = navigator.mozApps.install("https://path.to/my/example.webapp");
request.onsuccess = function() {
// great - display a message, or redirect to a launch page
};
request.onerror = function() {
// whoops - this.error.name has details
};
Chiamare navigator.mozApps.install() fa caricare il file manifest al browser (i.e. example.webapp) che chiede all'utente se installare l'app collegata. Se l'utente acconsente l'app è installata nel browser. Su OS X le web app saranno installate nella cartella "Applicazioni".
Il secondo parametro opzionale per navigator.mozApps.install() permette di conservare informazioni nello spazio concesso all'app installata. Queste informazioni possono essere sincronizzate con alri apparecchi, e possono essere recuperati dall'app usando una chiamata a getSelf()(vedi Controllare se l'app è installata). Per esempio:
navigator.mozApps.install(
"https://path.to/my/example.webapp",
{
user_id: "some_user"
}
);
Promuovere la tua app
Mozilla sta costruendo un app marketplace che si faccia carico di promozione, recensioni, valutazioni e pagamenti usando un'infrastruttura aperta che possa essere usata anche da terze parti per creare il loro negozio. Ma non sei obbligato a inserire la tua app in uno store.
Se vuoi che gli utenti paghino per la tua app vedi i termini di pagamento del Marketplace.
Prossimamente sarà disponibile il Firefox Marketplace. Puoi iscriverti alla Apps Developer newsletter per tenerti sia aggiornato sullo sviluppo del Firefox Marketplace sia per ricevere consigli e suggerimenti per creare app.
Funzionamento offline e uso delle API avanzate
I browser Web moderni hanno agiunto molte facilitazioni per permettere alla tua app di funzionare offline o per accedere al hardware del dispositivo (GPS, accelerometro...). Ecco dei link utili:
- Funzionamento offline: dettagli e demo per mostrare l'uso di HTML5 AppCache
- Eventi Online e Offline: capire quando il telefono passa tra online e offline e viceversa
- Usare audio e video nella tua app
- Disegna grafici con Canvas
- Disegna grafici 3D con WebGL
- Usare contenuti modificabili per creare editor di testo completi ed efficenti per la tua app
- Usare file locali con le Web app usando le HTML5 File API
- Usare il Drag and Drop per trascinare oggetti tra Web app
- Capire l'orientazione del device
Mantenere i dati locali
La localStorage API permette di mantenere i dati associandoli ad una chiave in modo che possano essere usati ogni volta che viene usata la tua app. Se l'utente ha un browser moderno, come Firefox 4 (e successivi) o Google Chrome, puoi usare anche IndexedDB, un metodo efficente e ben strutturato di mantenere i dati locali implementato dal client e non dal server.
Se dei dati devono essere accessibili dalla tua app su tutti i device dell'utente allora dovresti usare il paramentro install_data nella funzione install() come descritto prima.
Esempi
Qualche esempio di open Web app:
- MozillaBall Example (usa canvas per disegnare grafica e JavaScript API per installare l'app)