Progressive Web Apps (PWA) sind Webanwendungen, die sich genauso wie native Apps verhalten. Sie können also offline funktionieren, push notifications senden, auf dem Startbildschirm installiert werden, usw. Hier sind die Schritte, um eine PWA mit React.js zu erstellen:
1. Setzen Sie Ihr React.js-Projekt auf – Sie können dafür das “create-react-app”-Tool verwenden. Stellen Sie sicher, dass Sie die neueste Version von Node.js und npm haben, da ältere Versionen Probleme verursachen können.
2. Erstellen Sie ein neues Projekt mit dem Befehl:
``` npx create-react-app my-app ```3. Navigieren Sie in das Projektverzeichnis:
``` cd my-app ```4. NPM startet das Projekt automatisch im Entwicklungsmodus und öffnet es im Standardwebbrowser:
``` npm start ```5. ‘create-react-app’ kommt standardmäßig mit einem Service Worker, der jedoch standardmäßig nicht aktiviert ist. Um den Service Worker zu aktivieren, öffnen Sie die Datei src/index.js und ändern Sie den untenstehenden Code:
von: ```javascript serviceWorker.unregister(); ``` zu: ```javascript serviceWorker.register(); ```6. Jetzt müssen Sie ein Manifest erstellen, das die Metadaten Ihrer App enthält (Name, Beschreibung, Icons, usw.). In der öffentlichen Mappe Ihres Projekts sollten Sie bereits eine Datei namens manifest.json sehen. Passen Sie dies auf Ihre App an. z.B.
```json { “short_name”: “React App”, “name”: “Create React App Sample”, “icons”: [ { “src”: “favicon.ico”, “sizes”: “64×64 32×32 24×24 16×16”, “type”: “image/x-icon“ } ], “start_url”: “.”, “display”: “standalone”, “theme_color”: “#000000”, “background_color”: “#ffffff“ } ```7. Stellen Sie sicher, dass Ihre Web-App über HTTPS bedient wird, da die Service Workers nur auf sicheren Verbindungen funktionieren.
8. Testen Sie Ihre PWA. Chrome hat eine tolle Funktion namens Lighthouse, die Ihre App analysieren und Ihnen sagen kann, wie gut sie als PWA funktioniert.
9. Falls Ihr Test erfolgreich war, können Sie Ihr Projekt nun für die Produktion erstellen:
``` npm run build ```10. Deployen Sie Ihre App auf einem Server Ihrer Wahl.
Und das war’s – Sie haben Ihre erste Progressive Web App mit React.js erstellt! Zu bedenken ist, dass PWA nicht nur von der Technik, sondern auch von Designentscheidungen abhängt. Es bietet das beste aus der Web- und App-Welt, aber es liegt an den Entwicklern, es richtig zu nutzen.
