Ankündigung

Einklappen
Keine Ankündigung bisher.

Gedanken zu Progressive Web App

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Gedanken zu Progressive Web App

    Hallo Zusammen,

    es geht um ein Projekt nach dem Konzept "offline first".

    Ich habe einen eigenen REST-API Server, geschrieben in Delphi, der gleichzeitig mehrere Firebird Datenbanken in unterschiedlichen Versionen bedient.
    Eine Handvoll Anwender sollen mit Tablets ausgestattet werden die direkt beim Kunden Aufträge annehmen können. Ein Auftrag besteht aus ca. 80 Feldern. Dazu kommen fünf Tabellen mit insgesamt ca. 10.000 Datensätzen als Lookup für die Aufträge. Pro Tag wird ein Anwender ca. 20 Aufträge anlegen. Aufträge können jedoch auch vom Büro vorab angelegt werden die der Anwender bedien muss. Die Datenmänge ist also nicht besonder groß.

    Die Schwierigkeit dabei ist, wir leben im 21. Jahrhundert in Deutschland ohne flächendeckendes Internet. Jetzt soll der Anwender immer einen Auftrag anlegen können auch wenn kein Internet besteht. Ich könnte mir dafür auch eine native Android App erstellen. Ich habe das Wissen und die Werkzeuge dazu.Da ich zur Zeit total auf Web-Anwendung stehe möchte ich zuerst diesen Weg versuchen. Sollte ich scheitern, dann muss es eben eine native Android App sein.

    Ich habe viel über PWA gelesen und etliche Videos angeschaut. Doch ein paar signifikante Fragen sind noch offen. Ich hoffe das liest hier jemand der eine Ahnung davon hat.
    Die meisten Beispiele gehen davon aus, man verwendet CouchDB, MondoDB auf Serverseite und PouchDB oder IndexDB auf Clientseite und lässt sie synchronisieren.

    Serverseitig würde ich gerne Node.JS verwenden. Ich habe bereits ein NodeJS Projekt aufgesetzt und kann auf meinen REST-API zugreifen. Auch die Client Seiten kann ich damit rendern. Die Aufrufe sind auch über JWT abgesichert. Jetzt stehe ich auf dem Schlauch und weis nicht weiter.
    Soll ich nach den Beispielen gehen und z.B CouchDB aufsetzen? Ich müsste also über NodeJS die Daten vom REST Server abrufen und diese in CouchDB schreiben damit die Clients die Daten replizieren können?
    Clientseitig müsste ich die komplette CRUD Funktionalität mittels JavaScript für die Nutzung von IndexDB umsetzen. Ich habe jedoch jede Menge Logik die vom Server(NodeJS) kommen sollte. Es geht hier nicht um statische Seiten die lokal gecached werden können. Also muss ich die business logic ebenfalls auf dem Client umsetzen. Wenn dem so ist, macht der NodeJS Server keinen Sinn. Dann müsste der Client direkt mit meinen REST Server kommunizieren.
    Ich würde ungern ein Framework wie Angular oder VueJS zusätzlich zu NodeJS verwenden wollen, weil es einfach zu viel für mich wird außer, es geht nicht mit NodeJS alleine oder die Vorteile würden überwiegen.
    Wenn ich das Projekt starten müsste komplette ohne Daten, dann würde eine Kombination von CouchDB und IndexDB sicherlich eine gute Wahl sein. Aber für mein Scenario sehe ich richtig Schwarz für eine PWA. Irgendwie möchte ich doch eine Webanwendung umsetzen da es für mich einen großen Lerneffekt hätte.
    Schöne Grüße
    Kostas

  • #2
    Moin also generell ist es so dass die meisten PWAs eh nicht 100% Offline sind. Du kannst keine Suche machen mit sehr vielen Datensätzen wenn du offline bist. Die Offline Funktionalität ist im Grunde nur ein helfer. Eigentlich kannst du deine App per Ajax steuern und die kann direkt mit deinem Rest Interface arbeiten und einiges von deiner App kannst du, wenn du gerade offline bist, in ein localstorage abspeichern und dann wenn du online bist, die daten aus dem localstorage zum server senden.

    du brauchst dafür kein Angular oder VueJS oder NodeJS und auf dem Server brauchst du auch keine CouchDB usw. Es ist halt einfacher die Daten zu synchronisieren wenn du auf beiden seiten ein key-value storage hast
    apt-get install npm -> npm install -g bower -> bower install <package> YOLO [URL]https://www.paypal.me/BlackScorp[/URL] | Mein Youtube PHP Kanal: [url]https://www.youtube.com/c/VitalijMik[/url]

    Kommentar


    • #3
      Also ich hab was ähnlich mal geschrieben, nur für das Buchen von Tickets bei Events. Dazu habe ich einfach eine Angular App geschrieben, welche sich, sollte man Online sein, die Daten schonmal in die IndexDB des Browser schreibt. Dann habe ich ein PWA Background Worker geschrieben, welcher entweder mit der Rest Schnittstelle arbeitet oder, sollte man offline sein, die Request Daten speichert und diese dann Synchronisiert sobald man wieder online ist.

      Wenn ich es richtig verstehe, könntest du deine Meta-Tabelle ja auch einfach in ne IndexDB speichern und hiermit dann auch offline Aufträge erzeugen und sobald das Tablett dann wieder online ist synchronisieren mit dem Server. Das schöne an Angular ist hier, dass es Features wie die Background Worker und PWA bereits vollständig unterstützt.

      Kommentar


      • #4
        Dankeschön für die Diskussion schon mal.

        Nur wenn es um Web-Anwendungen geht, gilt: Primär zählt für mich der Lerneffekt und nicht so sehr das fertige Produkt. Deshalb interessieren mich jetzt beide Extreme, der Vorschlag vom BlackScorp und von Zeichen32 die ich beide sehr schätze! Deshalb bitte ich hier sich nicht gegenseitig zu bekriegen, das Thema hätte sicherlich Potential dazu. Wenn es um Web-Anwendungen geht, lerne ich sehr gerne hinzu. Zurück zum Projekt.

        Es gibt stand heute vier verschiedene Auftragstypen. Der Anwender muss sich also am Anfang entscheiden welchen Auftragstyp er anlegen möchte. Je nach Auftragstyp werden unterschiedliche Formulare gerendert da sie andere Felder bedienen und andere Lookups benötigen. Bei einer Online Verbindung ist das mit PHP gut machbar und ich hätte im großen und ganzen das Wissen bereits dazu.

        Angenommen ich setze das Projekt mit PHP um und bin Online und sehe die Auswahl der vier Auftragstypen. Ich entscheide mich für einen Typ. In diesem Moment würde die Verbindung unterbrechen. Die Form um den Auftrag zu erfassen kann also nicht per Twig und Co. gerendert werden. Somit kann ich auch keine Daten erfassen die ich irgend wie zwischenspeichern kann. Somit müsste die Logik zur Auswahl des Auftragtyps und das rendern der vier unterschiedlichen Auftragsforms nicht in PHP sondern in JavaScript umgesetzt werden. Überhaupt müsste die vollständige Programmlogik in JavaScript geschrieben sein dammt Sie Offline arbeiten kann.

        So ein Auftrag hat auch LookUps z.B.: Kunden. Die Datenmenge ist derzeit überschaubar mit insgesamt 10.000 Datensätzen verteilt auf ca. fünf Tabellen. Eine PWA müsst doch eigentlich jede Änderung in den Stammdaten aktualisieren, auch wenn der Datensatz möglicherweise niemals über den Außendienst angesprochen wird. Ich habe also einen erhöhten Traffic auf der mobilen Karte die nur der Telekom und Co. freuen dürfte.

        Angular, React, VueJS und Co. davon habe ich bis jetzt Abstand gehalten da ich sie in die Schublade mit der Beschriftung (drei Nummer zu Groß für dich) abgelegt hatte. Ich dachte, die sind nur für große Anwendungen zu verwenden.
        Mein Projekt "zeichnet ein Bild" für mich also ob PWAs hervorragend für statische Werbeauftritte geeignet wären, am besten ohne Datenerfassung. Denn sobald Daten erfasst werden müssen und sogar Abhängigkeiten auf Stammdaten existieren, dann kann es sehr schnell sehr komplett und mit erhöhtem Sync Aufwand behaftet sein.

        Über Angular habe ich schon einiges gelesen und auch dass PWA gut integriert sein soll. Mein gezeichnetes Bild "Angular=groß", "PWA=klein" passt jetzt irgend wie nicht zusammen. Was setzen die für eine Magie ein um meine beschriebenen Probleme zu begegnen?

        Gruß Kostas



        Kommentar


        • #5
          Ob man jezt Angular, Vu.js oder plain JS schreibt ist ja erstmal nebensächlich. Ich persönlich mag Angular ganz gerne, da es für mich als eigentlichen PHP Entwickler viele Konzepte übernimmt und mir so die Arbeit erleichtert und ich nicht ein komplett neues Konzept lernen muss. (Klassen, Module etc. sind zb. ähnlich wie in Symfony). Weiter ist es Modular aufgebaut, wenn ich z.B. den HTTP Client nicht brauche, wird er auch nicht eingebunden, somit kann man die Teile von Angular verwenden welche man für das aktuelle Projekt braucht. "Angular=groß", "PWA=klein" ist hier also eher ein Trugschluss.

          Nachteil an Angular ist sicher, dass es drauf ausgelegt ist, dass wenn man es verwendet auch die ganze Anwendung in Angular umsetzt. (Also nicht ein Teil von PHP Rendert z.b.). Wofür man sich am Ende entscheidet sollte man bei jedem Projekt einzeln entscheiden.

          Überhaupt müsste die vollständige Programmlogik in JavaScript geschrieben sein dammt Sie Offline arbeiten kann.
          Das ist korrekt.

          Eine PWA müsst doch eigentlich jede Änderung in den Stammdaten aktualisieren, auch wenn der Datensatz möglicherweise niemals über den Außendienst angesprochen wird.
          Das ist korrekt. Dies müsste aber eine native App auch machen. Je nach Umfang der Daten, kann man den User aber ja auch wählen lassen, was er für die Offline Nutzung speichern möchte. Ähnlich wie bei z.B. Mail-Clients, wo man auswählen kann, dass nur die E-Mails der letzten 2 Wochen gespeichert werden auf dem Gerät.

          Über Angular habe ich schon einiges gelesen und auch dass PWA gut integriert sein soll. Mein gezeichnetes Bild "Angular=groß", "PWA=klein" passt jetzt irgend wie nicht zusammen. Was setzen die für eine Magie ein um meine beschriebenen Probleme zu begegnen?
          Angular kompiliert/transpiliert nur die Komponenten in den Build, welche auch verwendet werden durch den Entwickler.

          Kommentar


          • #6
            Zeichen32 du hast mein Interesse an Angular geweckt!

            Nach umfangreichen Recherchen stelle ich fest, meine geplante Anwendung ist nicht für PWA oder native App geeignet. Der Hintergrund, wenn man so eine Plattform erst einmal etabliert hat, werden die Anforderungen wachsen und damit auch die Datenmenge die dann nicht mehr lokal gehalten werden kann. Somit ist klar, das ist das falsche Projekt für PWA.

            Bezüglich Angular und PWA würde mich dennoch etwas interessieren. Angenommen, ich plane meine Anwendung vollständig als Online-Lösung und nutze das Manifest nur damit die Anwendung sich als "App" auf dem Desktop installieren und sich als solche anfühlt.Dann würde ich gegen die Regen verstoßen dass die Anwendung auch Offline funktionieren muss. Da es keine öffentliche Anwendung wird sonder nur für einen Kunden entwinkelt wird, ist das dennoch möglich?

            Werden für die Connection Events gefeuert wenn die Verbindung abbricht und wieder da ist um dem Anwender den Zustand anzuzeigen?

            Dankeschön,
            Gruß Kostas





            Kommentar


            • #7
              Die Connection Events kommen ja vom Browser. Die kannst du auch ohne PWA abfragen. Du solltest aber beachten, dass diese nicht feuern, wenn du z.B. kein Internet mehr hast aber noch im Lan bist. Hier musst du ein eigenen Algorithmus entwickeln.
              Ich nutzte hierfür ein WebSocket Server für den Datenaustausch zwischen Server und Client welcher dann ein Connection Lost Event triggert und automatisch versucht die Verbindung wieder herzustellen.

              Für Chrome und Safari gilt, dass wenn keine Verbindung zum LAN oder Router aufgebaut wurde, der Browser "offline" ist. Andernfalls ist der Browser "online". Das bedeutet, dass aus dem Online-Status nicht die tatsächliche Verbindung erkennbar ist. Wenn der Rückgabewert "false" ist, dann ist mit Sicherheit keine Verbindung vorhanden. Wenn der Wert aber "true" ist, muss dies keine tatsächliche Verbindung zum Internet bedeuten. Auch kann die Ausführung innerhalb einer Virtuellen Maschine den Wert verfälschen.

              https://developer.mozilla.org/de/docs/Web/API/NavigatorOnLine/onLine

              Kommentar


              • #8
                Bezüglich Angular, ngBootstrap fühlt sich zumindest anders an als Bootstrap. Einige Beispiel die ich bis jetzt gesehen habe, verwenden Bootstrap und nicht ngBootstrap. Dann gibt es auch noch ngxBootstrap. Einige User meinen, ngxBootstrap sei besser als ngBootstrap. Ich habe beide Webseiten besucht und mit die Liste der Komponenten angeschaut und mit Bootstrap 4 verglichen. NgxBootstrap hat ein par schönere Sachen. Was ich aber in beiden vermisse sind Forms. Beide unterstützen sicherlich Forms. Aber warum sind die nicht zu finden?

                Noch eine Sache bitte: Ich habe versucht herauszufinden ob Angular ein Login, Registrierung, Pw zurücksetzen usw. hat. Das Zeug was eh jeder braucht. Ich bin nicht fündig geworden. Also werde ich versuchen das selbst umzusetzen. Habt Ihr mir hierzu irgend welche Hinweise. In diesem Zusammenhang noch, gibt es eine Verwaltung der angemeldeten User in form eines Arrays mit Session Handling und so? Oder hat Angular keine backend Funktionalität?

                Gruß Kostas

                P.S. Dieses Forum ist sehr aktiv und ich bin gerne bei Euch, aber vermutlich wird irgendein Admin mich auf die Finger klopfen da es ein PHP Forum ist. Habt Ihr mir hier in Hinweis an deutschsprachige aktive Foren für Angular.
                Das große Problem am Anfang ist ja dass man nicht weis was man braucht. Da helfen die Bücher die bereits bestellt habe vermutlich auch nicht weiter. Ich möchte ein echtes Projekt auch etwas umfangreicher mit Angular umsetzen. Nur dann kann man eine Technologie seriös bewerten.

                Habe eigentlich nur ich das Problem: Wenn ich in das Forum posten möchte, bekomme ich eine Fehlermeldung. Die Bestätige ich mit OK und muss danach erneut senden und erneut bestätigen. Erst dann wird der Beitrag geschrieben.

                Angehängte Dateien

                Kommentar


                • #9
                  ngBootstrap ist eine Implementation der Bootstrap-Komponenten, welche JavaScript benötigen. Alles was pures CSS ist (also z.b. Forms) kannst du natürlich regular nutzen.

                  Angular ist ein reines Frontendframework. Du brauchst ein Backend dazu, welche für die App das Datenhandling übernimmt. Login und co musst du selbst schreiben (vielleicht gibts irgendwo fertige Komponenten, das kann gut sein). Ich verwende zur Authentifizierung JSON Web Token sowie eine Guard und canActivate (https://angular.io/api/router/CanActivate)

                  Kommentar


                  • #10
                    Und für das JWT Handling nutze ich: https://github.com/auth0/angular2-jwt

                    Kommentar


                    • #11
                      Oh je, ich benötige also ein fremdes Backend wie Node.JS oder PHP. Möglicherweise missverstehe ich das auch. Ich kann das noch nicht greifen.

                      Ich denk jetzt mal "laut"....

                      Für das geplante Projekt habe ich bereits einen REST-API Server mit Rollen basierte User-Authentifizierung und JWT Token. Jede Methode die Aufgerufen wird muss im Header den jwt Bearer Token übergeben. Der Token wird überprüft und hat auch eine Lebensdauer. Stand Heute ist der Server so aufgebaut dass er alle Daten liefern kann und die CRUD Operationen übernimmt. Er hat sonst keine Programmlogik.

                      Es gibt unterschiedliche Auftragstypen. Jeder Auftragstyp hat Regeln. Auftragstyp A benötigt bestimmte Felder nicht dafür werden sie vom Auftragstyp B benötigt. u.s.w.

                      Kleine Web-Anwendung habe ich bis jetzt mit PHP erzeugt und die einzelnen Forms über Twig gerendert. Die gesamte Logik war somit in PHP und nur möglichst wenig JavaScript verwendet. Dabei hat PHP entweder auf den REST-API Server zugegriffen oder hat eigenen Datenbanken verwendet wie MySQL über PDO.

                      Das Angular Konzept mit den Komponenten hat mir sehr gut gefallen. Ich könnte jetzt darüber nachdenken:
                      a) meinen REST-API Server zu erweitern mit der gesamten Geschäftslogik. Angular würde dabei meinen Server als Backend nutzen.
                      b) die Geschäftslogik in PHP oder Node.JS auszulagern. PHP würde also zwischen REST-API Server und Angular stehen und mit beiden kommunizieren.





                      Kommentar

                      Lädt...
                      X