Hvordan man bruger AJAX til at lave en app til HTML5 og CSS3 programmering - dummies

Alle vil lave mobile apps i disse dage. Her er den store hemmelighed. Mange apps er virkelig skrevet i HTML5, CSS og JavaScript. Du ved allerede alt, hvad du har brug for til at lave apps, der arbejder på mobile enheder. Endnu bedre behøver du ikke at lære et nyt sprog eller få tilladelse fra appbutikken eller købe en licens, som du gør for indbyggede apps.

Der er et par fantastiske tricks, du kan gøre for iOS-brugere. Du kan designe dit program, så brugeren kan tilføje et ikon direkte til skrivebordet. Brugeren kan derefter starte programmet som enhver anden app. Du kan også gøre browseren til at gemme de normale browseraccoutrements, så dit program ikke ser ud som om det kører i en browser!

Det viser sig, at disse effekter er ret nemme at gøre.

Tilføj et ikon til dit program

Moderne versioner af iOS (operativsystemet iPhone / iPad) har allerede evnen til at gemme enhver webside på skrivebordet. Bare se websiden i Safari og klik på knappen Share. Du finder en mulighed for at gemme websiden til skrivebordet. Du kan instruere dine brugere om at gøre dette, og de vil kunne starte dit program som en normal app.

Standardikonet for en gemt app er dog ret grimt. Hvis du vil have et smukt ikon, kan du gemme et lille billede som en. png fil og sæt det i samme mappe som dit program. Derefter kan du tilføje denne linje til din side (i overskriften), og billedet vises på skrivebordet, når brugeren gemmer dit program:

Som en ekstra bonus justerer iPhone eller iPad automatisk billedet til at ligne en Apple-ikonet, tilføjer de effekter, der passer til den installerede version af iOS (afrundet og glasagtig i iOS6, flade i iOS7.)

Selvfølgelig er dette ikontrick en Apple-only-mekanisme. Med de fleste versioner af Android kan ethvert bogmærke, du har angivet med din hovedbrowser, tilføjes til skrivebordet, men der er ikke nogen brugerdefineret ikonindstilling. Direktivet om apple-touch-icon bliver simpelthen ignoreret, hvis du bruger et andet OS.

Fjern Safari-værktøjslinjen

Selvom dit program ser godt ud fra hovedskærmen, når brugeren aktiverer programmet, er det stadig tydeligt, at programmet er en del af webbrowseren. Du kan nemt skjule browserens værktøjslinje med en anden linje i overskriften:

Denne kode vil ikke gøre noget andet, medmindre programmet kaldes fra skrivebordet. Men i så fald skjuler værktøjslinjen, hvilket gør programmet til at føle sig som en fuldblæst app. Som en ekstra bonus kører dette programmet i fuldskærmstilstand, hvilket giver dig lidt mere plads til spil.

Igen er det en Apple-specifik løsning. Der er ikke en nem måde at opnå samme effekt på Android-enhederne på.

Gem dit program offline

Nu ser dit program meget ud som en app, medmindre den kun kører, når du har forbindelse til internettet. HTML5 har en vidunderlig funktion, der giver dig mulighed for at gemme en hel webside lokalt første gang det kører.

Så hvis brugeren prøver at få adgang til programmet, og systemet ikke kan komme online, køres den lokale kopi af spillet i stedet. I det væsentlige downloades programmet første gang det aktiveres og forbliver på den lokale enhed.

Dette er en relativt let effekt at opnå:

• Gør dit program stabilt: Før du kan bruge offline lagringsmekanismen, vil du sørge for, at dit program er tæt på frigivelse. I hvert fald skal du sikre dig, at du kender alle de eksterne filer, der er nødvendige af spillet.

• Brug kun lokale ressourcer: For denne type projekt kan du ikke stole på det eksterne internet, så du skal have alle dine filer lokalt. Det betyder at du ikke rigtig kan bruge PHP eller eksterne filer. Du skal have en lokal kopi af alt på serveren.

• Byg en cahce. manifest fil: Se på den mappe, der indeholder dit spil, og opret en ny tekstfil, der hedder.

• Skriv den første linje: Cacheens første linje. manifest fil skal kun indeholde teksten CACHE MANIFEST (alt med store bogstaver).

• Lav en liste over hver fil i mappen: Skriv navnet på hver fil i mappen, en fil pr. Linje. Pas på med din kapitalisering og stavning.

• Tilføj manifestattributten: Et tag har en ny attribut kaldet manifest. Brug dette til at beskrive til serveren, hvor cache manifestet kan findes:

• Læg siden normalt: Du skal indlæse websiden en gang på den normale måde. Hvis alt er korrekt konfigureret, vil browseren stille en kopi af filen.

• Test offline: Den bedste måde at teste offline lagring på er midlertidigt at slukke for trådløs adgang på din maskine og derefter prøve at få adgang til filen. Hvis tingene er udarbejdet, skal du kunne se din side som om du stadig var online.

• Kontroller serverindstillinger: Hvis offline-opbevaring ikke virker, skal du muligvis kontrollere din serveradministration. Teksten / manifest MIME-typen skal konfigureres på serveren. Du skal måske bede din serveradministrator om at angive denne indstilling i. htaccess-fil til din konto:

  addtype text / cache-manifest. manifesterer
  

Bemærk, at det kan tage cache-manifest mekanismen flere timer for at genkende ændringer, så når du foretager ændringer på din side, opdateres disse ændringer ikke automatisk til den lokale browser. Derfor er det bedst at gemme off-line arkivering i nærheden af ​​din projektudviklingscyklus.