Wie AJAX verwenden, um eine App für HTML5 und CSS3 Programmierung zu machen

Jeder will mobile Anwendungen in diesen Tagen zu machen. Hier ist das große Geheimnis. Viele Apps sind in HTML5, CSS und javascript wirklich geschrieben. Sie wissen bereits alles, was Sie brauchen, Anwendungen zu machen, die auf mobilen Geräten. Noch besser wäre es, brauchen Sie nicht eine neue Sprache oder die Erlaubnis erhalten, aus dem App Store oder eine Lizenz erwerben, um zu erfahren, wie Sie für native Anwendungen zu tun.

Es gibt ein paar wunderbare Tricks, die Sie für iOS Nutzer tun können. Sie können Ihr Programm entwerfen, damit der Benutzer auf ein Symbol auf dem Desktop direkt hinzufügen können. Der Benutzer kann dann das Programm wie jede andere App zu starten. Sie können auch den Browser machen den normalen Browser verstecken Accoutrements so Ihr Programm sieht nicht, wie es in einem Browser ausgeführt wird!

Es stellt sich heraus, diese Effekte ganz einfach zu tun.

Hinzufügen eines Symbols auf dem Programm

Moderne Versionen von iOS (iPhone / iPad-Betriebssystem) haben bereits die Möglichkeit, jede Web-Seite auf dem Desktop zu speichern. sehen Sie einfach die Webseite in Safari und klicken Sie auf die Share-Taste. Sie erhalten eine Option finden Sie die Webseite auf dem Desktop zu speichern. Sie können Ihre Benutzer, dies zu tun, und sie werden in der Lage zu starten Sie Ihr Programm wie eine normale App anweisen.

Allerdings ist das Standardsymbol für eine gespeicherte App ziemlich hässlich. Wenn Sie eine gut aussehende Symbol möchten, können Sie ein kleines Bild als PNG-Datei speichern und in das gleiche Verzeichnis wie das Programm gesetzt. Dann können Sie diese Zeile auf Ihrer Seite (im Header) hinzufügen und das Bild wird auf dem Desktop angezeigt, wenn der Benutzer das Programm speichert:

Als zusätzlichen Bonus, das iPhone oder iPad automatisch das Bild an wie ein Apple-Symbol zu sehen, die Auswirkungen angemessen auf die installierte Version von iOS Zugabe von (gerundet und glasig in iOS6, flach in iOS7.)

Natürlich ist dieses Symbol Trick ein Apple-only-Mechanismus. Bei den meisten Versionen von Android, jede Lesezeichen, das Sie mit Ihrem Haupt-Browser bezeichnet haben, können auf dem Desktop hinzugefügt werden, aber es gibt keine benutzerdefinierte Symbol Option. Das apple-touch-icon Richtlinie wird einfach ignoriert werden, wenn Sie ein anderes Betriebssystem verwenden.

Entfernen Sie die Symbolleiste von Safari

Obwohl das Programm aus dem Hauptbildschirm sieht gut aus, wenn der Benutzer das Programm aktiviert ist es immer noch offensichtlich, dass das Programm Teil des Web-Browsers ist. Sie können leicht die Browser-Symbolleiste mit einer anderen Zeile im Header verstecken:

 

Dieser Code wird nichts tun, es sei denn anders das Programm vom Desktop aus aufgerufen wird. Doch in diesem Fall versteckt es die Symbolleiste, um das Programm aussehen zu lassen und fühlen sich wie eine ausgewachsene App. Als zusätzlichen Bonus, läuft dies das Programm in einem Vollbild-Modus, können Sie ein wenig mehr Platz für Spiel zu geben.

Auch dies ist ein Apple-spezifische Lösung. Es gibt keine einfache Möglichkeit, die gleiche Wirkung auf die Android Geräte zu erreichen.

Speichern Sie Ihr Programm offline

Jetzt ist Ihr Programm sucht viel wie eine App, mit der Ausnahme es nur läuft, wenn Sie mit dem Internet verbunden sind. HTML5 hat eine wunderbare Eigenschaft, die Ihnen eine komplette Webseite lokal zum ersten Mal zu speichern, ermöglicht es laufen.

Dann, wenn der Benutzer das Programm zuzugreifen versucht, und das System kann nicht online gehen, die lokale Kopie des Spiels ist es, statt laufen. Im Wesentlichen ist das Programm das erste Mal heruntergeladen er aktiviert wird und bleibt auf dem lokalen Gerät.

Dies ist eine relativ einfache Wirkung zu erzielen:

  • Machen Sie Ihr Programm stabil: Bevor Sie den Offline-Speicher-Mechanismus verwenden können, sollten Sie sicherstellen, dass Ihr Programm nahe ist bereit release. Zumindest müssen Sie Sie alle externen Dateien durch das Spiel benötigt gewährleisten wissen.

  • Verwenden Sie nur lokale Ressourcen: Für diese Art von Projekt können Sie nicht auf dem externen Internet verlassen, so dass Sie vor Ort alle Ihre Dateien zu haben brauchen. Dies bedeutet, dass Sie nicht wirklich PHP oder externe Dateien verwenden können. Sie werden über eine lokale Kopie von allem auf dem Server haben müssen.

  • Erstellen Sie eine cahce.manifest-Datei: Schauen Sie sich das Verzeichnis, das Spiel enthält, und erstellen Sie eine neue Textdatei mit dem Namen.

  • Schreiben Sie die erste Zeile: Die erste Zeile der cache.manifest Datei sollten nur den Text enthalten CACHE MANIFEST (Alle in Großbuchstaben).

  • Machen Sie eine Liste aller Dateien im Verzeichnis: Schreiben Sie den Namen jeder Datei im Verzeichnis, eine Datei pro Zeile. Seien Sie vorsichtig mit Ihren Kapitalisierung und Rechtschreibung.

  • Fügen Sie das Manifest Attribut: Der Tag hat ein neues Attribut namens Manifest. Wird verwendet, um den Server zu beschreiben, wo der Cache manifest zu finden ist:

  • Laden Sie die Seite normal: Sie werden auf die Webseite einmal in der normalen Art und Weise laden müssen. Wenn alles richtig eingestellt ist, wird der Browser ruhig eine Kopie der Datei.

  • Test offline: Der beste Weg, Offline-Speicher zu testen, ist vorübergehend drahtlosen Zugriff auf das Gerät auszuschalten, und dann versuchen, die Datei zuzugreifen. Wenn alles funktioniert, sollten Sie in der Lage sein, um Ihre Seite zu sehen, als ob Sie noch online waren.

  • Überprüfen Sie Server-Einstellungen: Wenn die Offline-Speicherung nicht funktioniert, müssen Sie mit Ihrem Server-Administration zu überprüfen. Der Text / Manifest MIME-Typ muss auf dem Server konfiguriert werden. Möglicherweise müssen Sie Ihren Server-Administrator bitten, diese Option in der .htaccess-Datei für Ihr Konto eingerichtet werden soll:

    AddType text / cache-manifest manifest

Beachten Sie, dass es den Cache-Manifest Mechanismus mehrere Stunden Veränderungen zu erkennen, zu nehmen, so dass, wenn Sie Änderungen an Ihrer Seite vornehmen, werden diese Änderungen nicht automatisch auf den lokalen Browser aktualisiert. Deshalb ist es am besten off-line für Ihre Projektentwicklungszyklus am Ende der Archivierung zu speichern.

Menü