Vue.js ToDo PWA Tutorial

vue js todo pwa intro
Marc Borkowski
Datum
30.11.2019

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:

  1. Die Daten sollten im Local Storage des Browsers gespeichert werden.
  2. Wenn das Fälligkeitsdatum erreicht ist, sollte eine Push-Notification gesendet werden.

Ergebnis

Code: GitHub
Demo: Demo

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

  1. Projekt erstellen
  2. Klickdummy erstellen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kommentare
    maddin
    21.10.2020

    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.

    Marc Borkowski
    21.10.2020

    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.

    maddin
    23.10.2020

    Warum wird nur in Windows die Push-Nachricht angezeigt und nicht in anderen Systemen?

    Marc Borkowski
    24.10.2020

    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.