Creare un'app Web ospitata su Android, iOS e Windows utilizzando ManifoldJS

Recentemente a // BUILD / 2015, Microsoft ha annunciato il collectorJS, il modo più semplice per creare app ospitate su piattaforme diverse. Mentre John Shewchuk, Technical Fellow e CTO per la Microsoft Developer Platform, hanno fatto un ottimo lavoro nella realizzazione di un'applicazione web ospitata direttamente sul palco (puoi vedere il riepilogo qui), mi piacerebbe entrare un po 'più in dettaglio, spiegando Perché dovresti usare le app Web ospitate e come costruirne una per te usando colloldJS.

Perché Hosted e ManifoldJS?

Le app Web ospitate offrono il meglio del Web per archiviare le app con il minimo sforzo. Sono un ottimo modo per aumentare la portata dell'utente con l'esperienza che hai già realizzato. E quando aggiorni la tua esperienza web, i tuoi utenti ottengono lo stesso aggiornamento anche nelle app Web ospitate! 

Il problema è che fino ad ora, la cosa difficile delle app in hosting era quanto fosse diverso il processo su ogni piattaforma. ManifoldJS cambia questo mettendo l'attenzione sul W3C Manifest per Web Apps, un approccio open source basato su standard per la creazione di app, e quindi utilizza i metadati per creare un'app nativa ospitata su Android, iOS e Windows. 

Quando una piattaforma supporta le app ospitate, la costruiamo in modo nativo e quindi usiamo Cordova per il polyfill delle piattaforme che non hanno supporto nativo.

Iniziare con ManifoldJS

Ci sono fondamentalmente due modi per andare avanti. Se sei uno sviluppatore web che vive nella riga di comando, inizia con l'interfaccia CLI. Per gli sviluppatori che desiderano eseguire manifoldJS nel cloud, abbiamo gli stessi strumenti sul sito web.

La prima cosa che vuoi fare è creare un manifest per il tuo sito web. Questo dovrebbe essere abbastanza familiare agli sviluppatori web, in quanto è un oggetto JSON abbastanza semplice. Ecco un esempio dal mio sito:

"name": "This Here Web", "short_name": "THW", "icons": ["src": "images / tiny.png", "sizes": "70x70", "type": " image / png "]," start_url ":" index.html "," scope ":" http: //*.thishereweb.com "," display ":" standalone "," orientation ":" landscape "

Per maggiori dettagli sulla creazione di un file manifest, incluso come servirlo dal tuo webserver, controlla questo post sul manifest. Se vuoi un po 'di aiuto nella creazione di quel manifest, prova il generatore di codice sul sito manifoldjs.com. Ti guideremo attraverso i valori necessari con la procedura guidata e ti forniremo un manifest completo per il tuo sito web alla fine.

Utilizzo dello strumento CLI

ManifoldJS funziona con tecnologia familiare. L'unico requisito è che hai installato Node.js. ManifoldJS funzionerà su qualsiasi sistema (Mac, Linux, Windows) ma può solo creare app per piattaforme supportate su quel sistema.

Installazione dello strumento:

npm install manifoldjs grunt manifoldjs

ManifoldJS gestirà l'installazione per tutte le sue dipendenze tramite NPM. Da lì, devi semplicemente passare nel tuo sito web:

ManifoldJS http://www.thishereweb.com

Da lì, una delle due cose succederà:

  1. Se hai un manifest sul tuo sito, lo tirerà verso il basso, insieme alle immagini corrispondenti, e costruirà le app da esso.
  2. Se non si dispone di un manifest sul sito, assumeremo semplicemente alcuni dati predefiniti e genereremo le tue app insieme a un manifest per te. Useremo anche immagini segnaposto per poter costruire ancora gli strumenti.

Se vuoi vedere cosa sta succedendo, attiva semplicemente la registrazione e tieni d'occhio la console. Insieme alla registrazione, abbiamo una serie di altre opzioni che puoi impostare per controllare l'output dello strumento.

parametri

Parametro Descrizione
(necessario) URL del sito web ospitato
-m | -manifest (opzionale) Posizione del file manifest dell'applicazione Web W3C (URL o percorso locale). Se non specificato, lo strumento cerca un manifest nell'URL del sito. In caso contrario, verrà creato un nuovo manifest che punta all'URL del sito.
-d | -directory (opzionale) Percorso dei file di progetto generati (valore predefinito: directory corrente)
-s | -shortname (opzionale) Nome breve dell'applicazione. Se specificato, sovrascrive il valore short_name del manifest
-l | -loglevel (opzionale) Opzioni del livello del registro di traccia; Livelli di registro disponibili: debug, trace, info, warn, error (valore predefinito: avvisare)
-P | -piattaforme (opzionale) Piattaforme da generare. Piattaforme supportate: windows, android, ios, chrome (valore predefinito: tutte le piattaforme)
-B | -Costruire (opzionale) Forza il processo di costruzione

Utilizzo del generatore manifest basato sul Web

Tutta la stessa grande funzionalità è disponibile anche nel nostro strumento web. Visita il web generator e inizia.

Una volta completati i passaggi, dovrai solo fare clic sul download alla fine e verrà inviato un zip con tutti i tuoi pacchetti.

La tua app "Scope"

Il manifesto per le app Web ti consente di specificare lo "scope" della tua app. Questo aiuta a determinare dove si ferma la tua app e inizia il web aperto. Solo gli URL all'interno del tuo ambito verranno visualizzati nell'app. Se stai utilizzando più di un dominio o stai chiamando contenuti dai nostri domini, aggiungi semplicemente i valori di accesso URI al tuo manifest.

Un'esperienza Web ancora più potente con le API native

Come sviluppatori web, chiediamo sempre API che ci aiutino a sfocare le linee tra il set di funzionalità delle app native e quello del web. Le app Web ospitate sono un ambiente affidabile sulla maggior parte delle piattaforme, in cui il codice è collegato direttamente a uno sviluppatore. Per questo motivo, alcune piattaforme ti consentono di accedere alle API native che non puoi raggiungere nel browser.

Su Android, iOS e Windows, usiamo Cordova per il polyfill per le app ospitate. L'ulteriore vantaggio di questo è che puoi aggiungere i file Cordova js al tuo sito web e utilizzare tali API nella tua app in hosting. Tuttavia, in Windows 10 è effettivamente possibile accedere all'intera superficie dell'API di Windows Universal Apps, ovvero dal Bluetooth all'interfaccia umana di basso livello. Per consentire queste API per la tua app, è sufficiente aggiungerla al manifest:

"mjs_urlAccess": ["url": "http://manupjs.azurewebsites.net/", "url": "http://www.manifoldjs.com/"],

Con le regole di accesso in vigore, accenderemo le API per consentirti di chiamare direttamente o chiamare tramite le API Cordova.

Prossimi passi

Stiamo lavorando per rendere ancora più semplice il processo di creazione di app Web ospitate, ma per ora ci sono ancora alcuni passaggi finali che saranno nelle mani degli sviluppatori per completare. 

Per ogni piattaforma, forniamo indicazioni su come distribuire su ogni App Store. I test sono una parte importante dello sviluppo delle app e abbiamo anche suggerimenti e suggerimenti per ottenere il massimo dalla tua app web ospitata. Inoltre, tutte le app devono essere inviate agli app store appropriati e noi ti indirizzeremo nella giusta direzione anche per questo.

Le app Web ospitate consentono di sviluppare app per negozi mantenendo l'integrità e l'unicità del Web. Ora lo sviluppo di queste app è diventato un po 'più semplice con ManifoldJS. Ti concentri sugli standard web, faremo il resto.

Più mani con JavaScript

Potrebbe sorprendervi un po ', ma Microsoft ha un sacco di apprendimento gratuito su molti argomenti JavaScript open source, e siamo in missione per creare molto di più con Microsoft Edge. Dai un'occhiata alle serie di apprendimento del nostro team:

  • Suggerimenti pratici sulle prestazioni per rendere il tuo HTML / JavaScript più veloce (una serie in sette parti dal design reattivo ai giochi casuali all'ottimizzazione delle prestazioni)
  • La piattaforma Web moderna Jump Start (i fondamenti di HTML, CSS e JavaScript)
  • Sviluppo di app di Windows universali con HTML e JavaScript JumpStart (utilizza il JS che hai già creato per creare un'app)

E alcuni strumenti gratuiti: Visual Studio Community, Azure Trial e strumenti di test cross-browser per Mac, Linux o Windows.

Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.