Vorhandene Webseite nach Cordova "portieren"

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Vorhandene Webseite nach Cordova "portieren"

    Hallo Cordova-Community!

    Ich bin neu in der "Cordova-Welt" und komme nicht auf den richtigen Weg.

    Folgende Problemstellung:
    Ich habe eine Webanwendung (gehostet auf einem Webserver) mit responsive Design entwickelt. Diese läuft nun soweit auf verschiedenen Endgeräten.

    Meine Idee ist nun eine App, damit man nicht den Umweg über den Browser gehen muss. Zusätzlich zu der vorhanden Funktionalität will ich noch ein paar Features aus den Plattform-APIs (z.B. Kamera) einbauen. Es ist dabei noch anzumerken, dass die App zwingend eine Verbindung zum Webserver benötigt, da dieser dynamische Daten zur Verfügung stellt.

    Wie ist die richtige Vorgehensweise, um das Projekt zu portieren? Ein Plugin ala "InAppBrowser" benutzen? Die JavaScript- und HTML-Dateien in die App kopieren (dann muss alles doppelt gepflegt werden)?

    Gruß
    cproduct

  • Hallo cproduct,
    das hört sich gut an. So kannst du auch nur ein Web-Projekt verwenden und brauchst auch kein InAppBrowser.
    Wenn du auf die Kamera mittels Cordova zugreifen möchtest, musst du nur abfragen ob du dich gerade innerhalb von Cordova befindest oder nicht.
    Falls nicht, werden die Funktionalitäten nicht bereitgestellt. So hast du nur ein Projekt und kannst es für beide Welten nutzen.

    Die folgenden Schritte wären dazu nötig:
    1, Du kannst jetzt mit Cordova ein neues Projekt anlegen oder via GUI mit dem Intel XDK (xdk.intel.com - Kostenlos).
    2, Dann würde ich via Task-Runner zum Beispiel Grunt, die Web-Dateien automatisch in das Cordova WWW-Verzeichnis kopieren lassen.
    (Du kannst auch dein ASP.NET Projekt in ein Cordova Projekt direkt einbinden, ist allerdings etwas umständlicher)
    3, Du referenzierst auf die relevanten JS-Dateien:

    Quellcode

    1. <script src="intelxdk.js"></script>
    2. <script src="cordova.js"></script>
    3. <script src="xhr.js"></script>

    Wichtig! Die Dateien müssen nicht in deinem Projekt liegen. Bei "Cordova Build" wird automatisch für jede gewünschte Plattform eine Plattform spezifische cordova.js-Datei kopiert.
    Es gibt also nicht die eine cordova.js-Datei für alle Plattformen.
    4, Im Code darfst du dann erst alle Cordova Plug-Ins initialisieren wenn das deviceready-Event gefeuert wurde. Ansonsten erhältst du eine Exception.
    5, Dann kannst du deinen Cordova code implementieren. Dazu dann immer die Abfrage einbauen, ob du gerade als Cordova-App läufst oder im klassischen Web:

    Quellcode

    1. if(window.cordova)


    Ich hoffe dir weitergeholfen zu haben.

    Cheers,
    BFreakout

  • Hallo BFreakout,

    vielen Dank für die ausführliche Beschreibung! Nach einigen Anlaufschwierigkeiten habe ich es soweit hinbekommen.

    Was mich jetzt noch stört ist die Tatsache, dass bei Änderung bzw. Wartung an der Web-Version auch die App geändert werden muss. Dazu werde ich wohl eine Art Download (über die File-API) der geänderten Web-Ressourcen implementieren und diese dann in der App öffnen.

    Gruß
    cproduct