Slik bruker du AJAX til å lage en app for HTML5 og CSS3 programmering - dummies

Alle vil lage mobilapper i disse dager. Her er den store hemmeligheten. Mange apps er virkelig skrevet i HTML5, CSS og JavaScript. Du vet allerede alt du trenger for å lage programmer som fungerer på mobile enheter. Bedre ennå, du trenger ikke å lære et nytt språk eller få tillatelse fra appbutikken eller kjøpe en lisens, som du gjør for innfødte apps.

Det er et par fantastiske triks du kan gjøre for iOS-brukere. Du kan designe programmet slik at brukeren kan legge til et ikon direkte på skrivebordet. Brukeren kan da starte programmet som alle andre apper. Du kan også gjøre nettleseren gjemme de vanlige nettleseraccoutrements slik at programmet ikke ser ut som det kjører i en nettleser!

Det viser seg at disse effektene er ganske enkle å gjøre.

Legg til et ikon for programmet ditt

Moderne versjoner av iOS (operativsystemet iPhone / iPad) har allerede muligheten til å lagre en hvilken som helst nettside på skrivebordet. Bare se nettsiden i Safari og klikk på Del-knappen. Du finner et alternativ for å lagre nettsiden til skrivebordet. Du kan instruere brukerne å gjøre dette, og de vil kunne starte programmet som en vanlig app.

Standardikonet for en lagret app er imidlertid ganske stygg. Hvis du vil ha et flott ikon, kan du lagre et lite bilde som en. png-fil og sett den i samme katalog som programmet ditt. Deretter kan du legge til denne linjen på siden din (i overskriften), og bildet vil vises på skrivebordet når brukeren lagrer programmet:

Som en tilleggsbonus justerer iPhone eller iPad automatisk bildet slik at det ser ut som en Apple-ikonet, legger til effektene som passer til den installerte versjonen av iOS (avrundet og glassaktig i iOS6, flat i iOS7.)

Selvfølgelig er dette ikonet triks en Apple-eneste mekanisme. Med de fleste versjoner av Android, kan et hvilket som helst bokmerke du har angitt med nettleseren din, legges til skrivebordet, men det finnes ikke et tilpasset ikonvalg. Apple-touch-ikonet direktivet vil ganske enkelt bli ignorert hvis du bruker noen andre OS.

Fjern Safari-verktøylinjen

Selv om programmet ser bra ut fra hovedskjermbildet, når brukeren aktiverer programmet, er det fortsatt åpenbart at programmet er en del av nettleseren. Du kan enkelt skjule nettleserens verktøylinje med en annen linje i overskriften:

Denne koden vil ikke gjøre noe annet, med mindre programmet kalles fra skrivebordet. Men i så fall skjuler det verktøylinjen, slik at programmet ser ut som en fullblåst app. Som en ekstra bonus kjører programmet programmet i fullskjermmodus, noe som gir deg litt mer plass til spill.

Igjen, dette er en Apple-spesifikk løsning. Det er ikke en enkel måte å oppnå samme effekt på Android-enhetene på.

Lag programmet ditt offline

Nå ser programmet ditt ut som en app, bortsett fra at den bare kjører når du er koblet til Internett. HTML5 har en fantastisk funksjon som lar deg lagre en hel nettside lokalt første gang den kjøres.

Så hvis brukeren prøver å få tilgang til programmet, og systemet ikke kan komme seg online, kjøres den lokale kopien av spillet i stedet. I hovedsak er programmet lastet ned første gang det er aktivert og forblir på den lokale enheten.

Dette er en relativt enkel effekt å oppnå:

• Gjør programmet stabilt: Før du kan bruke offline lagringsmekanismen, vil du sørge for at programmet er nær utløserklar. I det minste må du sikre at du kjenner alle eksterne filene som trengs av spillet.

• Bruk bare lokale ressurser: For denne typen prosjekt kan du ikke stole på det eksterne Internett, så du må ha alle filene dine lokale. Dette betyr at du ikke kan bruke PHP eller eksterne filer. Du må ha en lokal kopi av alt på serveren.

• Bygg en cahce. manifest fil: Se på katalogen som inneholder spillet ditt, og opprett en ny tekstfil som heter.

• Skriv den første linjen: Den første linjen i hurtigbufferen. manifest fil skal bare inneholde teksten CACHE MANIFEST (alt i store bokstaver).

• Lag en liste over alle filer i katalogen: Skriv navnet på hver fil i katalogen, en fil per linje. Vær forsiktig med kapitalisering og staving.

• Legg til manifestattributtet: Koden har et nytt attributt som kalles manifest. Bruk dette til å beskrive til serveren der hurtigbuffer manifestet kan bli funnet:

• Last siden normalt: Du må laste inn nettsiden en gang på vanlig måte. Hvis alt er satt opp riktig, vil nettleseren stille en kopi av filen.

• Test offline: Den beste måten å teste frakoblet lagring på, er å midlertidig deaktivere trådløs tilgang på maskinen din, og deretter prøve å få tilgang til filen. Hvis ting trente, bør du kunne se siden din som om du fortsatt var online.

• Kontroller serverinnstillinger: Hvis offline lagring ikke fungerer, må du kanskje sjekke med serveradministrasjonen. Tekst / manifest MIME-typen må konfigureres på serveren. Du må kanskje spørre serveradministratoren om å angi dette alternativet i. htaccess-fil for kontoen din:

  addtype text / cache-manifest. manifestere
  

Vær oppmerksom på at det kan ta hurtigbuffer manifest mekanismen flere timer for å gjenkjenne endringer, så når du gjør endringer på siden din, oppdateres disse endringene ikke automatisk til den lokale nettleseren. Derfor er det best å lagre off-line arkivering for nær slutten av prosjektutviklingssyklusen.