Ich habe mich bei einer Firma in Dresden, als React Entwickler, beworben. Um meine Flexibilität und Adaption von Neuem zu testen soll ich eine ToDo App in Vue.js entwickeln. In diesem Artikel beschreibe ich mein Vorgehen, wie ich die App plane.
Die Aufgabe
Die Aufgabe ist eine To-Do-App (Kurzbeschreibung, Fälligkeitsdatum, Unerledigt /Erledigt) mit ganz einfacher Funktionalität (Task hinzufügen / editieren / löschen). Die Umsetzung soll als Progressive Web App (PWA) mit dem JS-Framework Vue.Js und Material Design entwickelt werden. Die PWA soll sowohl auf einem Desktop als auch auf einem Smartphone bedienbar sein. (Responsive). Dabei soll so wenig wie möglich eigener CSS-Code geschrieben werden. Optische Vorgaben gibt es keine, da kannst du dich frei entfalten. Der Fokus liegt aber nicht auf dem Design, sondern auf der technischen Umsetzung. Bitte lege mind. einen Test an. Die Anwendung soll zusätzlich um 2 PWA-Features erweitert werden:
- Die Daten sollten im Local Storage des Browsers gespeichert werden.
- Wenn das Fälligkeitsdatum erreicht ist, sollte eine Push-Notification gesendet werden.
Ergebnis
Frameworks finden
Als nächsten Schritt habe ich rausgesucht wie man eine PWA in Vue.js baut, dazu werde ich das CLI von NPM benutzen, mit der man eine Beispiel-PWA generieren kann. NPM CLI
Jetzt fehlt noch das Material Design, ich habe mich entschieden ein NPM Paket zu verwenden, sprich im Internet nach „NPM Material Design Vue.js“ gesucht und auch sofort fündig geworden. Vue Material
Die Push Notifications werde ich nativ implementieren, ähnlich wie der local Storage im Beispiel Code.
Tutorials
- Projekt erstellen
- Klickdummy erstellen
Hallo,
ich bin über die Internetsuche auf diesen Artikel gestoßen.
Die PWA habe ich mal als Testr bei mir auf dem Android-Handy installiert. Sie läuft prima. ABER: Die Push-Nachrichten funktionieren nicht.
Ich erhalte keine PUSH Nachricht, sobald das Enddatum fast da ist.
Ja, das Problem ist mir bekannt. Aktuell funktionieren die Push-Nachrichten nur unter Windows. Deswegen kommt beim öffnen die Fehlermeldung. Danke für dein Kommentar.
Warum wird nur in Windows die Push-Nachricht angezeigt und nicht in anderen Systemen?
Weil für andere Systeme ein Backend, bzw. native App, benötigt wird. Android/IOS erlaubt es PWA’s nicht Pushnachrichten zu senden. Man könnte dieses Problem beheben, wenn man ein Backend entwickelt oder die PWA zu einer Hybrid App umbaut.