• Articolo

Aprile 2017

Volume 32 Numero 4

Il presente articolo è stato tradotto automaticamente.

App UWP - Sviluppare app Web ospitate per UWP

Da Sagar Bhanudas Bhanudas

Molti sviluppatori e le aziende creano interfacce Web per i propri prodotti e servizi per l'accesso e di facile individuabilità. Un'altra piattaforma è la piattaforma di applicazioni. App native offrono una migliore esperienza utente e funzionalità rispetto alle applicazioni Web. A questo punto, sesto San Giovanni progetto fornisce agli sviluppatori un modo per convertire applicazioni native di siti Web moderni.

Il bridge Sesto San Giovanni progetto consente agli sviluppatori Web visualizzare le applicazioni Web reattive per Universal Windows Platform (UWP) sfruttando il codice esistente (vedere il blog per sviluppatori di Windows "Progetto Sesto San Giovanni in a Nutshell" registrare bit.ly/2jyhVQo). Il concetto di "bridge" è per riutilizzare il codice del sito Web esistente e aggiungere un livello di codice specifico della piattaforma UWP formare i punti di integrazione dell'applicazione Web con una piattaforma Windows sottostante. Il post di blog vengono illustrate alcune codifica consigliate per garantire l'esperienza utente coerente.

Come gli sviluppatori Web possono integrare un'applicazione Web moderna per lavorare con, ad esempio, Cortana? La risposta è tramite il comune denominatore, JavaScript. Windows espone la funzionalità di framework applicazione (Windows Runtime APIs) tramite JavaScript e lo spazio dei nomi Windows. Le applicazioni risultante vengono definite come App Web ospitate.

In questo articolo verrà condividere ciò che ho imparato nell'utilizzo di fornitori di Software indipendenti (ISV) e i partner per le proprie App per la piattaforma UWP tramite lo strumento Sesto San Giovanni progetto. Lo scopo è quello di condividere informazioni dettagliate su come si adattano meglio le applicazioni Web per offrire l'esperienza utente migliore durante l'esecuzione di un'applicazione di piattaforma.

Per iniziare

Per iniziare a utilizzare lo strumento Sesto San Giovanni progetto, è innanzitutto necessario convertire il sito Web per la piattaforma UWP (vedere il video di Channel 9, "Creazione di contenuto Web App con progetto Sesto San Giovanni," all'indirizzo bit.ly/2jp4srs).

Come test preliminari, per assicurarsi che il sito Web viene eseguito il rendering come previsto e la presentazione di un aspetto coerenza, è necessario eseguirne il test nel browser Microsoft Edge. Ciò consentirà di identificare e risolvere eventuali problemi di rendering prima della codifica integrazioni per iniziare a funzionalità di Windows.

La maggior parte dei siti Web hanno alcune funzioni comuni, che consentono agli utenti di completare un'attività specifica (ad esempio, la compilazione di moduli) o sottrarre informazioni per il riferimento (ad esempio scaricando un manuale). In questi scenari, è fondamentale che tali funzionalità rimangono invariate ed esperienza appena generato ospitato dell'app Web è coerenza con il sito Web originale. Alcuni di questi scenari potrebbe essere necessario da testare, esaminato e nuovamente inseriti tramite il codice per l'allineamento con le aspettative degli utenti. Alcuni scenari chiave sono considerati nelle sezioni successive illustrano le diverse classi o gli oggetti disponibili per gli sviluppatori durante l'utilizzo di strumento Sesto San Giovanni progetto e i flussi di lavoro di codice correlate. Durante il porting dell'applicazione per la piattaforma UWP, è consigliabile provare a integrare alcune funzionalità nativa della piattaforma per un'esperienza utente più ricca e un'esperienza di app avanzate. Ecco alcune delle funzionalità in genere implementate dagli sviluppatori di app:

  • Contatti
  • Integrazione di Cortana
  • Riquadri animati
  • Notifiche di tipo avviso popup
  • Fotocamera e microfono
  • Raccolta foto
  • Grafica e Stack di Runtime di Windows Media
  • La condivisione del contenuto con altre applicazioni

In questo articolo, lo stato attivo è sull'integrazione della piattaforma UWP funzionalità, ad esempio Cortana e riquadri animati, ad esempio, che Guida in linea con l'attivazione delle applicazioni tramite comandi basati su vocali e il recapito di informazioni all'utente. In questo modo, migliora l'esperienza utente complessiva con supporto dell'infrastruttura di App UWP. Le funzionalità più recenti di Windows 10 per gli sviluppatori Web pagina (bit.ly/2iKufs6) fornisce una rapida panoramica delle altre opportunità di integrazione. La pagina Web, che viene convertito in un'applicazione, vengono fornite informazioni sui seguenti elementi:

  1. Funzionalità dell'applicazione Web
    1. Download di file
    2. Gestione delle sessioni o single sign-on
    3. Passare alla pagina precedente tramite pulsante Indietro in modo stately
  2. Funzionalità di integrazione UWP
    1. Riquadri animati
    2. Cortana

Queste funzionalità dovranno essere considerati durante il trasferimento e il refactoring per offrire un'esperienza prevedibile per l'applicazione.

Scenario di Download di file

La maggior parte delle applicazioni Web oggi consentono i download di file per un'ampia gamma di contenuti. Come illustrato nella figura 1, l'utilizzo predefinito di download del file nel browser è simile a un pulsante o collegamento ipertestuale, il browser inizia a scaricarlo e salva anche il file rootdir:\users\username\Downloads (principalmente).

Download dell'esperienza utente.

Figura 1 dell'esperienza utente di Download

Questo si verifica in parte perché il browser è un'applicazione Win32 nativa in esecuzione con privilegi di attendibilità e scrive il file direttamente nella cartella di download.

Si consideri ora lo stesso scenario quando il sito Web è in esecuzione nel contesto di un'applicazione (WWAHost.exe, essere specifici) e si fa clic sul pulsante download. Come procedere? Molto probabilmente, non accade nulla e sembrerà che il codice semplicemente non funziona. Potrebbe sembrare che il pulsante non risponde o, ad esempio, è stato avviato il download del file, ma in cui salvataggio?

WWAHost.exe è un contenitore di app per i siti Web che ha un sottoinsieme di funzionalità, rispetto al browser. Questo subset di funzionalità include la funzionalità di rendering (principalmente presentation tramite HTML) e l'esecuzione di script Standard.

Cosa si sta lavorando a questo punto è un'applicazione. Nel mondo, le applicazioni per gli sviluppatori, il download del file deve essere esplicitamente codificato per, in caso contrario, il file remoto è solo un URL e risulta poco chiaro cosa sarebbe/contenitore delle app con un URL di file remoto (è possibile illustrare ciò che potrebbe essere avviene dietro le quinte tramite specializzati strumenti di debug, tuttavia, non andrò che per ora).

Per gestire questi tipi di scenari, è necessario richiamare le API UWP appropriate. Queste API possono coesistere con il codice che li rende il funzionamento delle funzionalità quando si esegue il sito Web utilizzando un browser. Figura 2 Mostra il codice.

Download di File nella figura 2, codice JavaScript (file di dimensioni maggiori)

(function() {
  if (typeof Windows !== 'undefined' &&
    typeof Windows.UI !== 'undefined' &&
    typeof Windows.ApplicationModel !== 'undefined') {
  function WinAppSaveFileBGDownloader() {
    // This condition is only true when running inside an app.
    // The else condition is effective when running inside browsers.
    // This function uses the Background Downloader class to download a file.
    // This is useful when downloading a file more than 50MB. 
    // Downloads continue even after the app is suspended/closed.
    if (typeof Windows !== 'undefined' &&
      typeof Windows.UI !== 'undefined' &&
      typeof Windows.ApplicationModel !== 'undefined') {
        var fileSavePicker = new Windows.Storage.Pickers.FileSavePicker();
        // Example: You can replace the words EXTENSION and ext with the word PNG. 
        fileSavePicker.fileTypeChoices.insert(
          "EXTENSION file", [".ext"]);
            // Insert appropriate file format through code.
        fileSavePicker.defaultFileExtension = ".ext";
          // Extension of the file being saved.
        fileSavePicker.suggestedFileName = "file.ext";
          // Name of the file to be downloaded.
        fileSavePicker.settingsIdentifier = "fileSavePicker1";
        var fileUri =
          new Windows.Foundation.Uri("<URL of the file being downloaded>");
        fileSavePicker.pickSaveFileAsync().then(function (fileToSave) {
          var downloader =
            new Windows.Networking.BackgroundTransfer.BackgroundDownloader();
          var download = downloader.createDownload(
            fileUri,
            fileToSave);
          download.startAsync().then(function (download) {
            // Any post processing.
            console.log("Done");
          });
        });
      }
      else {
        // Use the normal download functionality already implemented for browsers,
        // something like <a href="<URL>" />.
      }
    }
}
})();

È possibile scrivere il codice in figura 2 sul clic sul pulsante o nel punto in cui si prevede che la funzionalità di download di file. Il frammento di codice

utilizza la classe BackgroundDownloader (bit.ly/2jQeuBw), che dispone di molti vantaggi, ad esempio download persistenti in background post-app sospensione e la possibilità di scaricare i file di grandi dimensioni.

Il codice in figura 2 crea effettivamente la stessa esperienza come un browser, ad esempio necessario, chiedere all'utente di selezionare un percorso di file (fileSavePicker variabile), avviare il download (variabile downloader) e scriverlo nella posizione selezionata.

In alternativa, è possibile utilizzare il codice in figura 3 per i download di file più piccoli, che consente di eseguire fino a quando l'applicazione è in esecuzione:

Figura 3 File da scaricare codice JavaScript (file più piccoli)

// Use the Windows.Web.Http.HttpClient to download smaller files and
// files are needed to download when the app is running in foreground.
(function() {
  if (typeof Windows !== 'undefined' &&
    typeof Windows.UI !== 'undefined' &&
    typeof Windows.ApplicationModel !== 'undefined') {
  function WinAppSaveFileWinHTTP() {
    var uri = new Windows.Foundation.Uri("<URL of the file being downloaded>");
    var fileSavePicker = new Windows.Storage.Pickers.FileSavePicker();
    fileSavePicker.fileTypeChoices.insert("EXT file",
      [".ext"]); //insert appropriate file format through code.
    fileSavePicker.defaultFileExtension = ".ext";
      // Extension of the file being saved.
    fileSavePicker.suggestedFileName = "file.ext";
      // Name of the file to be downloaded. Needs to be replaced programmatically.
    fileSavePicker.settingsIdentifier = "fileSavePicker1";
    fileSavePicker.pickSaveFileAsync().then(function (fileToSave) {
      console.log(fileToSave);
      var httpClient = new Windows.Web.Http.HttpClient();
      httpClient.getAsync(uri).then(function (remoteFile) {
        remoteFile.content.readAsInputStreamAsync().then(
           function (stream) {
          fileToSave.openAsync(
            Windows.Storage.FileAccessMode.readWrite).then(
            function (outputStream) {
            Windows.Storage.Streams.RandomAccessStream.copyAndCloseAsync(
              stream, outputStream).then(function (progress, progress2) {
          // Monitor file download progress.
            console.log(progress);
            var temp = progress2;
          });
        });
        });
      });
    });
  }
}
})();

Il codice in figura 3 utilizza il Windows.Web.Http.HttpClient per gestire l'operazione di download di file (bit.ly/2k5iX2E). Se si confrontano i frammenti di codice in figura 2 e figura 3, si noterà che quest'ultimo richiede un po' di codifica avanzata, che offre maggiore controllo sul download del file. In questo modo, è infatti in grado di esplorare i diversi modi per salvare un flusso in un file tramite un'app UWP.

Inoltre, nel caso in cui l'applicazione elabora inoltre i file che sono stati scaricati, è consigliabile utilizzare la proprietà FutureAccessList da memorizzare nella cache e accedere al percorso in cui è stato salvato il file (bit.ly/2k5fXn6). Questo è importante perché l'utente può scegliere di salvare i file scaricati in un punto qualsiasi del sistema (ad esempio D:\files\ o in C:\users\myuser\myfiles\) e il contenitore di app, da un processo sandbox, potrebbe non essere in grado di accedere direttamente al sistema di file senza azioni avviate dall'utente. Questa classe può essere utile per evitare ulteriori passaggi per l'utente nuovamente ad aprire il file stesso. Per utilizzare questa classe, è necessario per aprire il file utilizzando il FileOpenPicker almeno una volta.

Questo dovrebbe consentire di ottimizzare la funzionalità di download di file in applicazioni Web ospitate e offrire un'esperienza utente di intuitivo. (Suggerimento: Assicurarsi di aggiungere il dominio di URL di file ApplicationContentURI in bit.ly/2jsN1WS per evitare eccezioni di runtime.)

Gestione delle sessioni

È comune per le applicazioni più moderne oggi rendere persistenti i dati tra più sessioni degli utenti. Ad esempio, si supponga di dover accedere a un'app utilizzata ogni volta che viene avviata l'app. Sarebbe molto tempo se l'applicazione viene avviata più volte in un giorno. Sono disponibili classi all'interno del framework di Windows Runtime per le applicazioni Web, che vengono convertite in App UWP.

Si consideri uno scenario in cui alcuni parametri devono essere mantenute tra le sessioni dallo stesso utente. Si consideri ad esempio una stringa che identifica l'utente e altre informazioni di vario tipo, ad esempio l'ultima sessione e altri elementi memorizzati nella cache.

La classe corretta da utilizzare in questo scenario è la classe Windows.Storage.ApplicationData. Questa classe dispone di molte proprietà e metodi, è consigliabile, tuttavia, la proprietà localSettings per questo scenario.

Le impostazioni vengono archiviate in un sistema di coppia chiave-valore. Esaminare il codice di esempio per l'implementazione seguente:

function getSessionData()
{
var applicationData = Windows.Storage.ApplicationData.current;
var localSettings = applicationData.localSettings;
// Create a simple setting.
localSettings.values["userID"] = "user998-i889-27";
// Read data from a simple setting.
var value = localSettings.values["userID"];
}

In teoria, il codice per scrivere dati nelle impostazioni può essere scritte in Checkpoint all'interno dell'app in cui è necessario acquisire alcune informazioni e quindi essere inviata a un'API Web remoto o un servizio. Il codice per leggere che l'impostazione può essere scritto in genere nel gestore eventi App_activated in cui l'app in corso l'avvio e le informazioni persistenti della sessione precedente di app è accessibile. Si noti che il nome di ciascuna impostazione ha un limite di 255 caratteri e ogni impostazione ha un limite di 8 KB di dimensioni.

Scenario di integrazione vocale (Cortana)

Uno degli scenari che possono implementare il sito Web (ora un'app), post porting il UWP — è l'integrazione di Cortana, un basato su vocale interattivo digitale assistente nei dispositivi Windows.

Considerare che il sito Web è un portale basato sul viaggio e a questo punto, il porting di un'app di Windows 10, uno dei casi di utilizzo in cui può essere integrato Cortana per visualizzare i dettagli di andata e ritorno di una persona. L'utente può quindi inviare comandi, ad esempio, "mostrano di andata e ritorno a Londra" (o qualsiasi destinazione), che deve essere configurato per gli sviluppatori di applicazioni, come illustrato nella figura 4.

Figura 4 Cortana comandi XML

<?xml version="1.0" encoding="utf-8"?>
<VoiceCommands xmlns="https://schemas.microsoft.com/voicecommands/1.1">
  <CommandSet xml:lang="en-us" Name="AdventureWorksCommandSet_en-us">
    <CommandPrefix> Adventure Works, </CommandPrefix>
    <Example> Show trip to London </Example>
    <Command Name="showTripToDestination">
      <Example> Show trip to London </Example>
      <ListenFor RequireAppName=
        "BeforeOrAfterPhrase"> show trip to {destination} </ListenFor>
      <Feedback> Showing trip to {destination} </Feedback>
      <Navigate/>
    </Command>
    <PhraseList Label="destination">
      <Item> London </Item>
      <Item> Dallas </Item>
    </PhraseList>
  </CommandSet>
<!-- Other CommandSets for other languages -->
</VoiceCommands>

Cortana consente di eseguire le attività con molte applicazioni prima parte (ad esempio calendario) ed esporre le API per l'interazione con le applicazioni personalizzate. In sostanza, qui è sostanzialmente il funzionamento di Cortana con le applicazioni:

  1. È in ascolto per i comandi come registrato nel file voicecommands.xml.
  2. Attiva l'applicazione desiderata, corrispondenza i comandi parlata/digitato nella barra di ricerca di Windows.
  3. Passa la sintesi vocale / testo comandi App come variabili per consentire al processo di app per l'input dall'utente.

Nota: Il nome del file è indicativo. Possono essere denominata come desiderato con estensione XML. L'articolo per sviluppatori di Windows, "Using Cortana di interagire con i clienti (10 di 10)," in bit.ly/2iGymdE fornisce una panoramica dei comandi di configurazione nel file XML e il relativo schema.

Il codice XML in figura 4 help Cortana identificherà le esigenze di Adventure Works app da avviare quando generate comandi, ad esempio le operazioni seguenti:

'Adventure Works, Show trip to London'
'Adventure Works, Show trip to Dallas'

A questo punto, diamo un'occhiata a come il codice Web gestisce l'attivazione e la navigazione alla pagina pertinente nell'app (o nel sito Web) in base all'input. Creare un file JavaScript separato per la codifica di questo scenario.

Il codice in figura 5 deve essere definito nel<body>sezione della pagina o di riferimento pagina chiamante prima i trigger di evento DOMContentLoaded.</body> Di conseguenza, è consigliabile aggiungere<script src=""></script>

Figura 5 codice del gestore comandi vocali

<!-- In HTML page :
<meta name="msapplication-cortanavcd" content="http://<URL>/vcd.xml" />
-->
(function () {
  if (typeof Windows !== 'undefined' &&
    typeof Windows.UI !== 'undefined' &&
    typeof Windows.ApplicationModel !== 'undefined') {
    Windows.UI.WebUI.WebUIApplication.addEventListener("activated", activatedEvent);
  }
  function activatedEvent (args) {
    var activation = Windows.ApplicationModel.Activation;
    // Check to see if the app was activated by a voice command.
    if (args.kind === activation.ActivationKind.voiceCommand) {
      // Get the speech recognition.
      var speechRecognitionResult = args.result;
      var textSpoken = speechRecognitionResult.text;
      // Determine the command type {search} defined in vcd.
      switch (textSpoken) {
         case "London":
           window.location.href =
             'https://<mywebsite.webapp.net>/Pages/Cities.html?value=London';
        break;
      case "Dallas":
        window.location.href =
          'https://<mywebsite.webapp.net>/Pages/Cities.html?value=Dallas';
        break;
                              ...                                   
        <other cases>
                              ...               
      }
    }
  }
})();

 (Nota: Poiché l'applicazione è "attivato" da Cortana utilizzando "activationKind" come "voiceCommand", è importante registrare il gestore eventi per l'attivazione. Per registrare gli eventi del ciclo di vita dell'app in cui l'app non è un WinJS nativo o c# uno, lo spazio dei nomi Windows.UI.WebUI.WebUIApplication viene fornito per sottoscrivere e gestire eventi specifici.)

Nel codice in figura 5, Cortana APIs riceve l'input vocale dell'utente e popolare la proprietà discorso delle classi di attivazione. Questo dovrebbe consentire di recuperare il testo convertito nel codice e consentono l'applicazione di eseguire le azioni rilevanti. In questo frammento, utilizzare un'istruzione switch case per valutare la variabile textSpoken e indirizzare l'utente alla pagina Cities.html con il valore di città aggiunta come stringa di query.

Ovviamente, questo è solo uno degli scenari e, dato che la configurazione di routing di ogni sito Web (MVC, REST e così via), i casi verranno modificata di conseguenza. L'applicazione è pronta per comunicare con Cortana.

Pulsante Indietro del (mancante)

Dopo aver illustrato alcune delle funzionalità più avanzata, verrà esaminato un di base, ma importante, aspetti dell'esperienza di app: navigazione. Semplicità di esplorare l'applicazione e la gerarchia di esplorazione intuitiva consente agli utenti di un'applicazione predictively.

Questo scenario è speciale perché quando si trasferiscono il sito Web reattivo a un'app UWP, l'interfaccia utente si comporti come previsto. Tuttavia, è necessario specificare il contenitore di app con i puntatori a ulteriori informazioni sulla gestione di spostamento all'interno dell'app. Il valore predefinito UX procede come segue:

  1. Utente avvia l'app.
  2. L'utente Sfoglia diverse sezioni dell'applicazione facendo clic su collegamenti ipertestuali o menu nelle pagine.
  3. In un punto, l'utente desidera passare alla pagina precedente e fa clic sul pulsante Indietro hardware o software fornito dal sistema operativo Windows (non esiste alcun pulsante Indietro nell'app ancora).
  4. L'app si chiude.

Punto n. 4 è un risultato imprevisto e deve essere corretto. La soluzione è semplice, che include istruzioni finestra contenitore di app per tornare indietro attraverso regolare APIs JavaScript. Figura 6 Mostra il codice per questo scenario.

Figura 6 pulsante Indietro codice

(function() {
  if (typeof Windows !== 'undefined' &&
    typeof Windows.UI !== 'undefined' &&
    typeof Windows.ApplicationModel !== 'undefined') {
   Windows.UI.Core.SystemNavigationManager.getForCurrentView().
     appViewBackButtonVisibility =
     Windows.UI.Core.AppViewBackButtonVisibility.visible;
        Windows.UI.Core.SystemNavigationManager.getForCurrentView().
        addEventListener("backrequested", onBackRequested);
function onBackRequested(eventArgs) {
      window.history.back();
      eventArgs.handled = true;
    }
  }
  })();

Iniziale alcune righe di abilitare il pulsante Indietro forniti dal framework, che viene visualizzata nella parte superiore dell'app e quindi Registra un gestore eventi per l'evento toccare o fare clic su. Tutto ciò che avviene nel codice è l'accesso dell'oggetto DOM "finestra" e fare in modo che per tornare a una pagina. È importante tenere presente: Quando l'applicazione è nella parte inferiore dello stack di navigazione, è disponibile alcuna ulteriore pagine della cronologia e l'applicazione viene chiusa a questo punto. Codice aggiuntivo deve essere scritto se è necessario integrare nell'applicazione personalizzata.

Riquadri animati

Riquadri animati è una funzionalità delle App UWP che visualizza informazioni nitide sugli aggiornamenti nell'applicazione o qualsiasi elemento che potrebbe essere di interesse per l'utente senza la necessità di avviare l'app. Un rapido esempio può essere visualizzato premendo il menu di avvio su un dispositivo Windows. Alcuni riquadri animati sarà evidente per le applicazioni, ad esempio notizie, Money e sportivi.

Ecco alcuni esempi di casi di utilizzo:

  • Per un'applicazione di e-commerce, è possibile visualizzare un riquadro raccomandazioni o lo stato dell'ordine.
  • In un'applicazione line-of-business, un riquadro può visualizzare un'immagine mini dei report dell'organizzazione.
  • In un'applicazione di gioco, riquadri animati visualizzare offerte, obiettivi, nuove sfide e così via.

Figura 7 sono riportati due esempi di sezioni da alcune delle App prima parte di Microsoft.

Esempi di riquadri animati
Figura 7 riquadri animati esempi

Uno dei modi più semplici per integrare riquadri animati in un'applicazione Web ospitata consiste nel creare un'API Web e impostare il codice dell'applicazione (illustrato nella figura 8) eseguire il polling di ogni pochi minuti. Il processo dell'API Web consiste nell'inviare eseguire il codice XML che verrà utilizzato per creare il contenuto del riquadro per l'app di Windows. (Nota: È importante che l'utente finale blocca l'app al menu Start per sfruttare riquadri animati).

Figura 8 riquadri animati semplice codice

function enableLiveTile()
  {
    if (typeof Windows !== 'undefined' &&
      typeof Windows.UI !== 'undefined' &&
      typeof Windows.ApplicationModel !== 'undefined') {
      {
        var notification = Windows.UI.Notifications;
        var tileUpdater =
          notification.TileUpdateManager.createTileUpdaterForApplication();
        var recurrence = notification.PeriodicUpdateRecurrence.halfHour;
        var url = new Windows.Foundation.Uri("<URL to receieve the XML for tile>");
        tileUpdater.startPeriodicUpdate(url, recurrence);
      }
      }       
  }

In questo caso la classe più importante è TileUpdateManager dallo spazio dei nomi Windows.UI.Notifications. Questa classe non solo crea un modello internamente da inviare al riquadro, ma esegue inoltre il polling all'URL specificato per la sezione contenuto XML tramite il metodo startPeriodicUpdate. La durata del polling può essere impostata utilizzando l'enumerazione PeriodicUpdateRecurrence per periodo inserire il codice XML contenuto per i riquadri. Questo approccio è più basata sul server in cui l'API Web invia il modello di codice e riquadro XML al client. Ciò è fattibile quando lo sviluppatore può controllare l'app e i livelli di servizio.

Ora si consideri uno scenario in cui l'applicazione riceve informazioni dalle API Web di terze parti, ad esempio dati meteorologici o ricerche di mercato. In tali scenari, soprattutto le API Web invierebbe le risposte HTTP standard in termini di corpo, le intestazioni e così via. In questo caso, è possibile analizzare la risposta dell'API Web e quindi creato un XML riquadro del contenuto nel codice lato client UWP app in JavaScript. In questo modo lo sviluppatore di app più preciso i tipi di modello per visualizzare i dati. È inoltre possibile segnalare l'ora di scadenza per il riquadro tramite la classe TileNotification. Il codice per questo è illustrato figura 9.

Figura 9: Un'altra opzione per le operazioni di creazione di riquadri animati

function createLiveTile() /* can contain parameters */
{
  var notifications = Windows.UI.Notifications,
  tile = notifications.TileTemplateType.tileSquare310x310ImageAndText01,
  tileContent = notifications.TileUpdateManager.getTemplateContent(tile),
  tileText = tileContent.getElementsByTagName('text'),
  tileImage = tileContent.getElementsByTagName('image');
  // Get the text for live tile here [possibly] from a remote service through xhr.
  tileText[0].appendChild(tileContent.createTextNode('Demo Message')); // Text here.
  tileImage[0].setAttribute('src','<URL of image>');
  var tileNotification = new notifications.TileNotification(tileContent);
  var currentTime = new Date();
  tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);
    notifications.TileUpdateManager.createTileUpdaterForApplication().
    update(tileNotification);
}

Si noti che la classe TileTemplateType fornisce la funzionalità di creazione di un modello di riquadro quadrato 310 x 310 pixel le dimensioni con un'immagine e testo. Inoltre, l'ora di scadenza per il riquadro è impostato su 10 minuti tramite codice, il che significa che dopo la scadenza, il riquadro Live torna al riquadro dell'app predefinito fornito nel pacchetto dell'app, a meno che non arriva una nuova notifica nell'app sotto forma di notifiche push. Ulteriori informazioni sui modelli disponibili tessera sono reperibile in bit.ly/2k5PDJj.

Conclusioni

Esistono alcuni aspetti da considerare durante la pianificazione della migrazione da un'app Web a un'app UWP:

  1. Testare l'app per il layout e rendering con browser moderni (Microsoft Edge è riportato un esempio).
  2. Se l'applicazione Web è dipendente da un controllo ActiveX o plug-in, assicurarsi un modo alternativo per l'utilizzo di funzionalità quando in esecuzione nel browser moderni o come un'app UWP.
  3. Utilizzare lo strumento SiteScan bit.ly/1PJBcpi per area indicazioni relative alle librerie e funzionalità.
  4. Identificare gli URL delle risorse esterne che fa riferimento al sito Web. Queste informazioni sono richieste da aggiungere alla sezione del file Appx.manifest ApplicationContentUriRules.

Inoltre, esistono molti integrazioni più approfondite che possono essere ottenute tramite la Guida evidenziate le funzionalità di app tramite più ricche e un oggetto JavaScript Windows. Contatti, fotocamera, microfono, le notifiche di tipo avviso popup e molte funzionalità di aprire una finestra di opportunità per la sfumatura del sito Web con il tipo di app. Il codice in questo articolo è stato convertito in un modello di progetto e reso disponibile per gli sviluppatori attraverso GitHub all'indirizzo bit.ly/2k5FlJh.

Sagar Bhanudas Joshiha lavorato con gli sviluppatori e gli sviluppatori su piattaforma universale di Windows e Microsoft Azure per oltre sei anni.  Il suo ruolo incluso l'utilizzo di Startup per aiutarli a progettare, progettare e fornire soluzioni integrate e alle applicazioni di Azure, Windows e la piattaforma Office 365. Joshi attiva e opera Mumbai, India. Trovarlo su Twitter: @sagarjms.

Grazie per i seguenti esperti tecnici Microsoft che ha esaminato in questo articolo: Sandeep Alur e Sahu Ashish