Hur man använder AJAX för att göra en app för HTML5 och CSS3 programmering - dummies

Alla vill skapa mobilappar dessa dagar. Här är den stora hemligheten. Många appar skrivs verkligen i HTML5, CSS och JavaScript. Du vet redan allt du behöver för att göra appar som fungerar på mobila enheter. Ännu bättre behöver du inte lära dig ett nytt språk eller få tillstånd från appbutiken eller köpa en licens, som du gör för inhemska appar.

Det finns ett par underbara knep du kan göra för iOS-användare. Du kan designa ditt program så att användaren kan lägga till en ikon direkt på skrivbordet. Användaren kan sedan starta programmet som alla andra appar. Du kan också göra webbläsaren gömma de vanliga webbläsarens accoutrements så att ditt program inte ser ut som om det körs i en webbläsare!

Det visar sig att dessa effekter är ganska lätta att göra.

Lägg till en ikon till ditt program

Moderna versioner av iOS (operativsystemet iPhone / iPad) har redan möjlighet att lagra alla webbsidor på skrivbordet. Visa bara webbsidan i Safari och klicka på Dela-knappen. Du hittar ett alternativ för att spara webbsidan till skrivbordet. Du kan instruera dina användare att göra detta, och de kommer att kunna starta ditt program som en vanlig app.

Men standardikonen för en sparad app är ganska ful. Om du vill ha en snygg ikon kan du spara en liten bild som en. png-fil och lägg den i samma katalog som ditt program. Sedan kan du lägga till den här raden på din sida (i rubriken) och den bilden kommer att visas på skrivbordet när användaren sparar ditt program:

Som en extra bonus justerar iPhone eller iPad automatiskt bilden så att den ser ut som en Apple-ikonen, lägger till effekterna som är lämpliga för den installerade versionen av iOS (rundad och glasig i iOS6, platt i iOS7.)

Självklart är detta ikontrick en Apple-enda mekanism. Med de flesta versioner av Android kan alla bokmärken som du har angett med din huvudbläddrare läggas till på skrivbordet, men det finns inget anpassat ikonalternativ. Direktet för apple-touch-icon kommer helt enkelt att ignoreras om du använder något annat operativsystem.

Ta bort verktygsfältet Safari

Även om ditt program ser bra ut från huvudskärmen, när användaren aktiverar programmet är det fortfarande uppenbart att programmet ingår i webbläsaren. Du kan enkelt dölja webbläsarverktygsfältet med en annan rad i rubriken:

Den här koden kommer inte att göra något annat om programmet inte kallas från skrivbordet. Men i det fallet döljer det verktygsfältet, vilket gör att programmet ser ut som en fullblåst app. Som en extra bonus kör programmet programmet i helskärmsläge, vilket ger dig lite mer utrymme för spel.

Återigen är det en Apple-specifik lösning. Det finns inte ett enkelt sätt att uppnå samma effekt på Android-enheterna.

Spara ditt program offline

Nu ser programmet mycket ut som en app, förutom att den bara körs när du är ansluten till Internet. HTML5 har en underbar funktion som låter dig lagra en hel webbsida lokalt första gången den körs.

Om användaren försöker komma åt programmet och systemet inte kan komma online körs den lokala kopian av spelet istället. I huvudsak laddas programmet ner första gången det aktiveras och stannar kvar på den lokala enheten.

Det här är en relativt lätt effekt att uppnå:

• Gör ditt program stabilt: Innan du kan använda offline lagringsmekanismen, vill du se till att ditt program ligger nära släppt färdigt. Du måste åtminstone se till att du känner till alla externa filer som behövs av spelet.

• Använd endast lokala resurser: För den här typen av projekt kan du inte lita på det externa Internetet, så du måste ha alla dina filer lokalt. Det betyder att du inte kan använda PHP eller externa filer. Du måste ha en lokal kopia av allt på servern.

• Bygg en cahce. manifest fil: Titta på katalogen som innehåller ditt spel och skapa en ny textfil som heter.

• Skriv första raden: Cachens första rad. manifest fil ska bara innehålla texten CACHE MANIFEST (alla med stora bokstäver).

• Gör en lista över alla filer i katalogen: Skriv namnet på varje fil i katalogen, en fil per rad. Var försiktig med din kapitalisering och stavning.

• Lägg till manifestattributet: Taggen har ett nytt attribut kallat manifest. Använd det här för att beskriva för servern där cacheminnet kan hittas:

• Ladda sidan normalt: Du måste ladda webbsidan en gång på normalt sätt. Om allt är korrekt konfigurerat gör webbläsaren tyst en kopia av filen.

• Test offline: Det bästa sättet att testa offline lagring är att tillfälligt stänga av trådlös åtkomst på din maskin och försök sedan komma åt filen. Om sakerna fungerade, borde du kunna se din sida som om du fortfarande var online.

• Kontrollera serverns inställningar: Om offlinelagring inte fungerar kan du behöva kontrollera med din serveradministration. Text / manifest MIME-typen måste konfigureras på servern. Du kan behöva be din serveradministratör att ställa in det här alternativet i. htaccess-fil för ditt konto:

  addtype text / cache-manifest. manifest
  

Observera att det kan ta cache-manifest mekanismen flera timmar för att känna igen ändringar, så när du ändrar din sida uppdateras dessa ändringar inte automatiskt till den lokala webbläsaren. Därför är det bäst att spara off-line arkivering för nära slutet av din projektutvecklingscykel.