Scrivito PWA

Lesen Sie hier, wie eine Scrivito Site zu einer PWA wird.

---

Über die Bedeutung von Progressive Web Apps habe ich hier ja schon geschrieben. Da ist es natürlich naheliegend, dass aus mdwp.de auch eine PWA wird. Und das ist gestern geschehen. Ich möchte hier kurz beschreiben, welche Schritte notwendig waren, um das zu erreichen.

Die einfachste Möglichkeit eine PWA zu erzeugen, besteht mit ReactJS durch die Verwendung des Webpack Templates Create-React-App. Einfach einen Git Clone anlegen, $ npm install im Terminal aufrufen und fertig ist eine PWA. Die weiß natürlich nichts vom Scrivito CMS. Zum Glück gibt es eine sehr gute Scrivito Dokumentation. Hier wird beschrieben, wie Scrivito zu einer React App hinzugefügt werden kann.

Das Tutorial beschreibt allerdings nur die minimalen Schritte zu einer Scrivito PWA. Am Ende verfügt man über eine PWA ohne Styling, die nur auf dem Localhost eines Entwicklers läuft.

Um das Styling einer bestehenden Site hinzuzufügen, muss man zuerst das React Webpack Template dazu bringen, mit SASS zu arbeiten. Darüber ist mit Google genug zu finden. Dann muss noch die webpack.config.prod.js so angepasst werden, dass der npm build Prozess alle notwendigen Resourcen, CSS, JS, Fonts usw. richtig generiert.

Am Ende verfügt man über eine React PWA. Diese kann einerseits mit dem Scrivito CMS bearbeitet werden, Entwickler können Scrivito Widgets erweitern oder neue hinzufügen. React Entwickler können allerdings auch ganz normal React Komponenten entwickeln und auf 'Seiten', die nicht von Scrivito generiert werden, zur Verfügung stellen. Solche Seiten übernehmen das Scrivito Theme (Layout/Design). Der React-Entwickler kann sich also ganz auf seine Aufgabe konzentrieren.

Eine React App, als PWA, mit einem intuitiven Content Management System. Mehr Flexibilität und Skalierbarkeit ist kaum möglich.

Eine PWA benötigt eine manifest.json. Hier kann es zu kleinen Problemen kommen, die dazu führen, dass auf Android Geräten der 'Zum Startbildschirm hinzufügen' Banner nicht erscheint. Das kann an falschen Icons liegen oder einer falschen Start URL. Mit dem App Manifest Generator kann man sich die manifest.json erzeugen lassen. Und nicht vom Chrome Lighthouse Test verwirren lassen. Der meckert immer über die Start URL. Einfach die fertige PWA auf einem Android Gerät testen.