Hosted Web App: in 3 semplici step puoi trasformare il tuo sito web in un'app per la Universal Windows Platform

Sapete quanto è semplice realizzare un'app per tutti i dispositivi che utilizzano Windows 10? Se avete già a disposizione un sito web bastano davvero pochi click, grazie alle Hosted Web App!

Utilizzando questa tecnologia il vostro sito web diventa un'app a tutti gli effetti, che può essere scaricata dagli utenti tramite lo Store, aggiornata in maniera automatica quando viene modificato il sito web, e che sarà persino in grado di contenere funzionalità aggiuntive per migliorare la User eXperience dei vostri utenti.

L'idea alla base delle Hosted Web App è quella di riutilizzare le competenze e il lavoro da voi effettuato per la pubblicazione del vostro sito web: non occorre imparare un nuovo linguaggio di programmazione, non occorre usare IDE o Source Control diversi dalle vostre abitudini, non occorre utilizzare servizi di hosting Microsoft. Il vostro sito web può essere utilizzato come fonte per l'app senza la necessità di effettuare alcuna modifica.

Il codice è a tutti gli effetti lo stesso del vostro sito web, ecco perché tutte le modifiche effettuate sul sito si rifletteranno automaticamente anche sull'app, senza la necessità di sottomettere gli aggiornamenti allo Store di Windows. Il fatto che il codice non risieda all'interno dell'app ma si trovi invece lato server, inoltre, vi permette di ridurre l'effort di manutenzione, in quanto l'unico sorgente da aggiornare e modificare sarà ovviamente quello del sito web.

In aggiunta a tutti questi vantaggi, avete anche la possibilità di inserire funzionalità ulteriori all'interno dell'app, per sfruttare le API native della Universal Windows Platform, come ad esempio Cortana, le Tile, le Notifiche e molto altro.

La vostra Hosted Web App in 3 semplici step

Step 1

Il primo passo per realizzare la vostra Hosted Web App è creare un nuovo progetto vuoto in Visual Studio 2015 di tipo Javascript > Windows > Universal. Potete utilizzare anche la versione gratuita Visual Studio Community, ma è fondamentale precisare che occorre avere installato SDK e Tool per lo sviluppo di applicazioni per la Universal Windows Platform.

Step 2

A questo punto dal nostro progetto vuoto possiamo eliminare tutte le componenti che non ci serviranno: le cartelle CSS, js, WinJS, e il file default.html. Lasciamo invece la cartella images perché dovremo poi andare ad inserirvi tutte le immagini necessarie per la pubblicazione dell'app: tiles, splash screen, etc.

 Step 3

Modificare il file manifest, inserendo come Start Page l'url del vostro sito web e autorizzandolo ad accedere alle API WinRT, se necessario.

La modifica della start page indica che l'app deve utilizzare quell'indirizzo come pagina iniziale, da qui in poi la navigazione avverrà direttamente all'interno del sito web.

La seconda modifica, invece, abilita l'utilizzo di API native della piattaforma all'interno del sito. Come potete vedere, il menù prevede 3 opzioni:

• all - il codice remoto del sito potrà accedere a tutte le API della UWP
• allowForWebOnly - lo sviluppatore mantiene il controllo delle API che vuole esporre
• none - di default non si autorizza il codice esterno ad accedere alle API

Scegliendo, come nel nostro caso, la prima opzione, per poter sfruttare concretamente le API WinRT nella maniera opportuna, il sorgente del vostro sito dovrà contenere il relativo codice all'interno di un'istruzione

if (typeof Windows !== 'undefined')

A questo link potete verificare, ad esempio, come è stato utilizzato il controllo Contatti all'interno del sito web che stiamo utilizzando come riferimento per questo post.

Ecco fatto, la Hosted Web App è pronta e possiamo vedere immediatamente il risultato con un semplice F5. Facile, no?

Prima di pubblicare l'app

Realizzarla è stato davvero semplice e rapido, ma ci sono alcune considerazioni importanti da fare prima di poter pubblicare la vostra nuova app.

Responsive design

Le Universal Windows App girano in finestra, che può essere ridimensionata dall'utente a proprio piacimento. Inoltre, possono essere scaricate e utilizzate su diverse famiglie di device, con form factor molto differenti. Per queste ragioni, allo scopo di fornire all'utente una buona User eXperience, è fondamentale che il sito web di partenza sia responsive, con un design in grado di adattarsi allo schermo del dispositivo in uso o alla dimensione della finestra.

Update dei contenuti

Come già detto, il contenuto dell’app si aggiorna automaticamente, riportando in tempo reale le modifiche effettuate lato server, senza dover passare ogni volta attraverso il check dello Store. Attenzione però alla qualità dei contenuti: le app possono essere verificate anche quando si trovano già online, inoltre le segnalazioni degli utenti acquisiscono un peso ancora maggiore nel caso delle Hosted Web App, proprio per evitare l’inserimento di contenuti inappropriati dopo la pubblicazione sullo Store.

Gestione dell'offline

La Hosted Web App utilizza come start page l'url di un sito web, ma cosa succede se l'utente non ha connettività? E' fondamentale gestire almeno una pagina di errore, per indicare che l'app è in grado di funzionare solo se c'è copertura di rete. Per gestire in maniera opportuna questa situazione è sufficiente inserire all'interno del progetto alcune pagine:

• msapp-error.html
• default.html
• default.js

In questo modo la nostra Hosted Web App si trasforma in una Hybrid App, dal momento che possiede anche alcune componenti locali. La Start Page nel file manifest dovrà essere default.html, mentre all'interno del file javascript default.js al lancio dell'applicazione si dovrà inserire l'istruzione per accedere al sito:

//App Activation

if (args.detail.kind === activation.ActivationKind.launch) {

     windows.location.href = "http://contosotravel.azurewebsites.net";

}

Inoltre, è importante verificare lo stato della connessione e mostrare, in caso di necessità, la pagina di errore:

//verify internet connection changes

Windows.Networking.Connectivity.NetworkInformation.onnetworkstatuschanged = function (args) {

var internetconnection = new Windows.Networking.Connectivity.NetworkInformation.getInternetConnectionProfile();

          if ((!('getNetworkConnectivityLevel'in internetconnection)) || ((internetconnection.getNetworkConnectivityLevel()) < 3)) {

          window.location.href = "msapp-error.html"; //local error page

          }

}

Navigazione

Un altro elemento che è fondamentale gestire è la navigazione all’interno della Hosted Web App. Pensando soprattutto all’utilizzo dell’hardware back button nei dispositivi mobile, si capisce quanto sia importante in termini di User eXperience gestire la pressione del tasto permettendo all’utente di tornare alla pagina precedente, e sostituendo così il comportamento di default che prevede l’uscita dall’applicazione.

A questo punto avete tutti gli elementi necessari per realizzare la vostra prima Hosted Web App, in pochi click e pochissimi minuti!

Enjoy