PWA Pizza-Shop Demo
Progressive Web Apps (PWA) sind schon länger ein Thema. Kernfeatures sollen Notifications und Web Push sein. Diese Demo-App zeigt am Beispiel eines fiktiven Pizza-Bestelldienstes, wie Nachrichten und Daten über Web Push zwischen unterschiedlichen Endgeräten zeitnah, bidirektional und anonym ausgetauscht werden können. Zugleich ist dies auch ein Beispiel für eine voll mobiltaugliche UX mit responsivem Layout unter Verwendung von Vue 3.
Damit für genau diese Demo mehrere Endgeräte miteinander kommunizieren können, müssen sie alle eine gemeinsame Channel-ID teilen. Ist ein Client im Modus "Endkunde" (Frontend) gestartet und ein anderer Client im Modus "Lieferant" (Backend), fließen die Bestellungen des simulierten Endkunden-Shops im Backend zusammen.
Im Backend kann wiederum der Status einer bestimmten eingegangenen Bestellung geändert werden, was automatisch an den jeweiligen Besteller zurück kommuniziert wird. Für diese Kommunikation wird Web Push als Transportweg genutzt. Jede Statusänderung wird beim Endkunden von einer System-Notification begleitet, so dass auf mobilen Endgeräten eine zeitnahe Benachrichtigung auch dann erfolgen kann, wenn der Webbrowser im Hintergrund läuft, oder sogar, wenn das Gerät gesperrt ist und auf dem Homescreen steht.
HINWEIS
Progressive Web Apps, Web Push und Notifications unterliegen in allen Browsern mehr oder minder starken Restriktionen. So wird z.B. die Ausführung der einer PWA zugrundeliegenden Service Worker Technologie im Firefox bei Nutzung des privaten Modus blockiert. Zudem unterstützen die mobilen Apple Geräte mit dem Safari Browser die hier demonstrierten modernen Technologien wie Web Push und Notifications leider nicht !
Damit diese Demo wie erwartet funktioniert, nutzen Sie bitte einen aktuellen Chrome, Firefox, Edge, Samsung Internet unter Windows oder Android. Je nach Browser und Systemeinstellungen werden Web Push Nachrichten nur empfangen und System-Notifications nur ausgelöst, wenn die Browser-App zumindest im Hintergrund ausgeführt wird. Nicht aber, wenn die App komplett beendet wurde.
