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.
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.
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.
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à:
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.
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 |
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.
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.
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.
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.
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:
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/.