Bygg en Hosted Web App på Android, iOS og Windows ved hjelp av ManifoldJS

Nylig på // BUILD / 2015 annonserte Microsoft manifoldJS-den enkleste måten å bygge vertsbaserte applikasjoner på tvers av plattformer. Mens John Shewchuk, Teknisk Fellow og CTO for Microsoft Developer Platform, gjorde en flott jobb å bygge en hosted web-app på scenen (du kan se omtalen her), vil jeg gjerne gå litt mer detaljert og forklare hvorfor du bør bruke vertsbaserte webapps og hvordan du bygger en til deg selv ved hjelp av manifoldJS.

Hvorfor Hosted og ManifoldJS?

Vertsbaserte webapps gir det beste fra nettet for å lagre apper med minimal innsats. De er en fin måte å få flere brukere til å nå med den erfaringen du allerede har bygget. Og når du oppdaterer webopplevelsen din, får brukerne samme oppdatering i vertsbaserte webapper også! 

Problemet er, til nå var den harde tingen om vertsprogrammer hvor forskjellig prosessen er på hver plattform. ManifoldJS endrer det ved å fokusere på W3C Manifest for Web Apps - en standarddrevet åpen kildekode tilnærming for å lage apps - og bruker deretter metadataene til å opprette en hosted innfødt app på Android, iOS og Windows. 

Når en plattform støtter vertsbaserte apper, bygger vi den innfødt, og deretter bruker vi Cordova til å polyfillere plattformene som ikke har opprinnelig støtte.

Komme i gang med ManifoldJS

Det er i utgangspunktet to måter å komme på. Hvis du er en webutvikler som bor i kommandolinjen, starter du med CLI-grensesnittet. For devs som ønsker å kjøre manifoldJS i skyen, har vi de samme verktøyene på nettstedet.

Det første du vil gjøre er å lage et manifest for nettstedet ditt. Dette bør være ganske kjent for webutviklere, da det er et ganske enkelt JSON-objekt. Her er et eksempel fra mitt eget nettsted:

"name": "This Here Web", "short_name": "THW", "ikoner": ["src": "images / tiny.png", "sizes": "70x70", "type" image / png "]," start_url ":" index.html "," scope ":" http: //*.thishereweb.com "," skjerm ":" frittstående "," orientering ":" landskap "

For mer informasjon om å bygge en manifestfil, inkludert hvordan du serverer den fra webserveren, sjekk ut dette innlegget på manifestet. Hvis du vil ha litt hjelp med å bygge det manifestet, kan du prøve kodegeneratoren på manifoldjs.com-siden. Vi går deg gjennom verdiene du trenger med veiviseren, og gir deg et ferdig manifest for nettstedet ditt på slutten.

Bruk CLI-verktøyet

ManifoldJS kjører på kjent teknologi. Det eneste kravet er at du har Node.js installert. ManifoldJS vil kjøre på et hvilket som helst system (Mac, Linux, Windows), men kan bare bygge programmer for plattformer som støttes på det systemet.

Installere verktøyet:

npm installere manifolds grunt manifoldjs

ManifoldJS vil takle installasjonen for alle sine avhengigheter gjennom NPM. Derfra passerer du bare på nettstedet ditt:

ManifoldJS http://www.thishereweb.com

Derfra vil en av to ting skje:

  1. Hvis du har et manifest på nettstedet ditt, vil det trekke det ned, sammen med de tilsvarende bildene, og bygge appene fra det.
  2. Hvis du ikke har et manifest på nettstedet, vil vi ganske enkelt anta noen standarddata, og generere appene dine, sammen med et manifest for deg. Vi bruker også plassholderbilder slik at vi fortsatt kan bygge verktøyene.

Hvis du vil se hva som skjer, kan du bare slå på noen logging og holde øye med konsollen. Sammen med logging har vi en rekke andre alternativer du kan angi for å kontrollere utgangen av verktøyet.

parametere

Parameter Beskrivelse
(Obligatorisk) URL til den vertsbaserte nettsiden
-m | -manifest (valgfri) Plassering av W3C Web App manifestfilen (URL eller lokal bane). Hvis ikke spesifisert, ser verktøyet etter et manifest i nettstedets nettadresse. Ellers vil det opprettes et nytt manifest som peker til nettstedets URL.
-d | -directory (valgfri) Sti til de genererte prosjektfilene (standardverdien: nåværende katalog)
-s | -shortname (valgfri) Søknad kort navn. Når den er angitt, overstyrer den kortnavnnavnet til manifestet
-l | -loglevel (valgfri) Sporing av loggnivåalternativer; Tilgjengelige loggnivåer: feilsøking, spor, info, advarsel, feil (standardverdi: varsle)
-p | -platforms (valgfri) Plattformer å generere. Støttede plattformer: windows, android, ios, krom (standardverdien: alle plattformer)
-b | -Bygg (valgfri) Forces byggeprosessen

Bruke den webbaserte manifest generatoren

Denne samme flotte funksjonaliteten er også tilgjengelig i vårt nettbaserte verktøy. Besøk webgeneratoren og kom i gang.

Når du har fullført trinnene, klikker du bare på nedlastingen på slutten, og en postadresse med alle pakkene dine vil bli sendt til deg.

Appen din "Omfang"

Manifest for Web Apps lar deg spesifisere "omfanget" av appen din. Dette hjelper deg med å avgjøre hvor appen din stopper og den åpne weben begynner. Bare webadresser innenfor ditt omfang vises i appen. Hvis du bruker mer enn ett domene, eller ringer innhold fra våre domener, legger du bare til URI-tilgangsverdier til manifestet ditt.

En enda mer kraftfull nettopplevelse med innfødte APIer

Som webutviklere spør vi alltid om APIer som hjelper oss å sløre linjene mellom funksjonssettet med innfødte apper og det på nettet. Hosted web apps er et pålitelig miljø på de fleste plattformer, hvor koden er bundet direkte tilbake til en utvikler. På grunn av dette, gir noen plattformer deg tilgang til innfødte APIer som du ikke kan nå i nettleseren.

På Android, iOS og Windows bruker vi Cordova til polyfil for de vertene. Den ekstra fordelen ved dette er at du kan legge til Cordova js-filene på nettstedet ditt og bruke disse APIene i din hosted app. Men i Windows 10 har du faktisk tilgang til hele API-overflaten av Windows Universal Apps-det er alt fra Bluetooth til lavt nivå menneskelig grensesnitt. For å tillate disse APIene for appen din, legg du bare til dette i manifestet ditt:

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

Med tilgangsregler på plass, slår vi på APIene for at du skal ringe direkte, eller ringe gjennom Cordova-APIene.

Neste skritt

Vi jobber for å gjøre prosessen med å bygge vertsbaserte webprogram enda enklere, men for nå er det fortsatt noen få siste skritt som vil være i utviklernes hender å fullføre. 

For hver plattform gir vi veiledning om hvordan du distribuerer til hver App Store. Testing er en viktig del av apputviklingen, og vi har også tips og forslag for å få mest mulig ut av din hostede webapp. Også, appene må alle sendes til de aktuelle appbutikkene, og vi vil vise deg i riktig retning for det også.

Vertsbaserte webapps lar deg utvikle butikkapper samtidig som du opprettholder integriteten og uniktheten på nettet. Nå utviklet disse appene bare litt enklere med ManifoldJS. Du fokuserer på webstandarder, vi skal gjøre resten.

Flere hands-on med JavaScript

Det kan kanskje overraske deg litt, men Microsoft har en mengde gratis læring på mange open source JavaScript-emner, og vi har et oppdrag å skape mye mer med Microsoft Edge. Ta en titt på lagets læringsserie:

  • Praktiske ytelsestips for å gjøre HTML / JavaScript raskere (en syvdelte serie fra lydhør design til uformelle spill til ytelsesoptimalisering)
  • Den moderne webplattformen Jump Start (grunnleggende for HTML, CSS og JavaScript)
  • Utvikle Universal Windows Apps med HTML og JavaScript JumpStart (bruk JS du allerede har opprettet for å bygge en app)

Og noen gratis verktøy: Visual Studio Community, Azure Trial, og tverrbrowser testing verktøy for Mac, Linux eller Windows.

Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.