Utilizziamo i cookie per analisi, contenuti personalizzati e pubblicità.

Queste informazioni possono essere condivise con i nostri partner per fornire i servizi necessari.

Approfondisci

AccettoRifiuto

Dall'archivio articoli > HTML5

Mobile Web Applications: come ottenere un'esperienza native-like gestendo l'offline

di Andrea ColaciAndrea Colaci, in HTML5,

Le applicazioni web mobile (mobile web apps) possono essere una valida alternativa a quelle native in molti scenari ma presentano alcune limitazioni, come ad esempio la dipendenza verso un web server o la necessità di essere connesse ad Internet durante l'utilizzo.

Le API di HTML5 e i recenti browser mobile consentono di aggirare questi limiti fornendo nell'insieme un esperienza utente simile a quella offerta dalle applicazioni native e in particolare:

  • la possibilità di "installare" l'app con la relativa icona sul device;
  • garantire il funzionamento dell'app in assenza di connettività (offline);
  • aggiornare i contenuti e i dati quando si ritorna online;
  • rilevare una nuova versione dell'app stessa, scaricarlo e "installarlo".

App Metadata

La maggior parte dei browser mobile riconosce alcuni particolari meta-tag che specificano, ad esempio, quali sono il titolo e l'icona dell'applicazione, l'immagine di startup da visualizzare e da quale URL sottoscrivere eventuali notifiche (badge notifications di Windows 8). Di seguito alcuni esempi:

<!-- web app settings -->
<link rel="shortcut icon" href="appIcon.png"/> 
<meta name="application-name" content="Euro 2012 fake" />

<!-- Apple devices settings (works also for Android) -->
<link rel="apple-touch-icon" href="@Url.Content("~/AppIcon.png")" />
<link rel="apple-touch-startup-image" href="@Url.Content("~/AppStartupImage.png")" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- Microsoft pinned site metadata IE9+ -->
<meta name="application-name" content="Euro 2012 (fake)" />
<meta name="msapplication-tooltip" content="Follow matches and updates from Euro 2012" />
<meta name="msapplication-starturl" content="http://localhost:8081/" />
<meta name="msapplication-navbutton-color" content="#5f6dbd" />
<meta name="msapplication-window" content="width=320;height=460" />

<!-- Microsoft Windows 8 notifications -->
<meta name="msapplication-badge" content="frequency=30;polling-uri=http://myWebServer.com/notifications/latestItems/ITA" />

Le figure seguenti mostrano alcuni dei risultati che si possono ottenere con l'aggiunta dei metadati presentati nell'esempio precedente.

Figura 1
Figura 1 – l'applicazione installata nella home screen di iOS, la startup image e l'interfaccia senza il "contorno" del browser (chrome-less).

Figura 2
Figura 2 – il badge dell'app nel menu Start di Windows 8 che visualizza un'icona di notifica (meta-tag msapplication-badge).

3 pagine in totale: 1 2 3
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

.NET Conference Italia 2024 - Milano

.NET Conference Italia 2023 - Milano e Online

Le novità di .NET 7 e C# 11

Le novità in ASP.NET Core e Blazor con .NET 7

I più letti di oggi

In evidenza

Misc