Hoe AJAX te gebruiken om een ​​app te maken voor HTML5 en CSS3 Programmering - dummies

Iedereen wil tegenwoordig mobiele apps maken. Hier is het grote geheim. Veel apps zijn echt geschreven in HTML5, CSS en JavaScript. U weet al alles wat u nodig hebt om apps te maken die op mobiele apparaten werken. Beter nog, u hoeft geen nieuwe taal te leren of toestemming te krijgen van de app store of een licentie aan te schaffen, net als voor native apps.

Er zijn een paar fantastische trucs die je kunt doen voor iOS-gebruikers. U kunt uw programma zo ontwerpen dat de gebruiker een pictogram rechtstreeks op het bureaublad kan toevoegen. De gebruiker kan het programma dan zoals elke andere app starten. U kunt de browser ook de normale browseraccessoires verbergen, zodat uw programma er niet uitziet alsof het in een browser wordt uitgevoerd!

Het blijkt dat deze effecten vrij gemakkelijk te doen zijn.

Voeg een pictogram toe aan uw programma

Moderne versies van iOS (het iPhone / iPad-besturingssysteem) hebben al de mogelijkheid om elke webpagina op het bureaublad op te slaan. Bekijk de webpagina in Safari en klik op de knop Delen. U zult een optie vinden om de webpagina op te slaan op het bureaublad. U kunt uw gebruikers opdracht geven om dit te doen en zij zullen uw programma kunnen opstarten als een normale app.

Het standaardpictogram voor een opgeslagen app is echter nogal lelijk. Als u een mooi pictogram wilt, kunt u een kleine afbeelding opslaan als een. png-bestand en plaats het in dezelfde map als uw programma. Vervolgens kunt u deze regel toevoegen aan uw pagina (in de koptekst) en die afbeelding verschijnt op het bureaublad wanneer de gebruiker uw programma opslaat:

Als extra bonus past de iPhone of iPad de afbeelding automatisch aan om er als volgt uit te zien: Apple-pictogram, de effecten toe te voegen die geschikt zijn voor de geïnstalleerde versie van iOS (afgerond en glasachtig in iOS6, plat in iOS7.)

Natuurlijk is deze pictogramtruc een mechanisme dat alleen door Apple wordt gebruikt. Bij de meeste Android-versies kan elke bladwijzer die u hebt opgegeven met uw hoofdbrowser worden toegevoegd aan het bureaublad, maar er is geen aangepaste pictogramoptie. De Apple-touch-icon-richtlijn wordt eenvoudig genegeerd als u een ander besturingssysteem gebruikt.

De Safari-werkbalk verwijderen

Hoewel uw programma er goed uitziet vanuit het hoofdscherm, is het nog steeds duidelijk dat het programma deel uitmaakt van de webbrowser wanneer de gebruiker het programma activeert. U kunt de browserwerkbalk gemakkelijk verbergen met een andere regel in de kop:

Deze code doet niets anders tenzij het programma vanaf het bureaublad wordt aangeroepen. In dat geval verbergt het echter de werkbalk, waardoor het programma eruit ziet en aanvoelt als een complete app. Als een toegevoegde bonus, draait dit het programma in een volledig scherm-modus, waardoor je wat meer ruimte hebt voor het spelen van het spel.

Nogmaals, dit is een Apple-specifieke oplossing. Er is geen eenvoudige manier om hetzelfde effect te bereiken op Android-apparaten.

Sla je programma offline op

Je programma lijkt nu veel op een app, maar werkt alleen als je verbinding hebt met internet. HTML5 heeft een geweldige functie waarmee je een hele webpagina lokaal kunt opslaan wanneer deze voor het eerst wordt uitgevoerd.

Als de gebruiker vervolgens probeert toegang te krijgen tot het programma en het systeem niet online kan gaan, wordt in plaats daarvan het lokale exemplaar van het spel uitgevoerd. In essentie wordt het programma gedownload de eerste keer dat het wordt geactiveerd en op het lokale apparaat blijft.

Dit is een relatief eenvoudig te bereiken effect:

• Maak uw programma stabiel: Voordat u het offline opslagmechanisme kunt gebruiken, moet u ervoor zorgen dat uw programma bijna klaar is om te worden uitgebracht. Minimaal moet je ervoor zorgen dat je alle externe bestanden kent die het spel nodig heeft.

• Gebruik alleen lokale bronnen: Voor dit soort projecten kunt u niet vertrouwen op het externe internet, dus u moet al uw bestanden lokaal hebben. Dit betekent dat je PHP of externe bestanden niet echt kunt gebruiken. U moet een lokale kopie van alles op de server hebben.

• Bouw een cahce. manifestbestand: Kijk naar de map met je game en maak een nieuw tekstbestand met de naam.

• Schrijf de eerste regel: De eerste regel van de cache. manifestbestand mag alleen de tekst CACHE MANIFEST bevatten (alles in hoofdletters).

• Maak een lijst van elk bestand in de map: Schrijf de naam van elk bestand in de map, één bestand per regel. Wees voorzichtig met je hoofdletters en spelling.

• Het manifestattribuut toevoegen: de tag heeft een nieuw kenmerk met de naam manifest. Gebruik dit om aan de server te beschrijven waar het cachemanifest te vinden is:

• Laad de pagina normaal: U moet de webpagina één keer op de normale manier laden. Als alles correct is ingesteld, maakt de browser stilletjes een kopie van het bestand.

• Test offline: De beste manier om offline opslag te testen, is door de draadloze toegang op uw machine tijdelijk uit te schakelen en vervolgens toegang te krijgen tot het bestand. Als het goed is, zou je je pagina moeten zien alsof je nog online bent.

• Controleer de serverinstellingen: Als de offline opslag niet werkt, moet u mogelijk contact opnemen met uw serverbeheer. Het tekst / manifest MIME-type moet op de server worden geconfigureerd. Mogelijk moet u uw serverbeheerder vragen om deze optie in te stellen in de. htaccess-bestand voor uw account:

  addtype text / cache-manifest. manifest
  

Merk op dat het het cache-manifest mechanisme enkele uren kan duren om veranderingen te herkennen, dus wanneer u wijzigingen in uw pagina aanbrengt, worden deze wijzigingen niet automatisch bijgewerkt naar de lokale browser. Daarom kun je het beste off-line archivering opslaan tegen het einde van de ontwikkelingscyclus van je project.