Hier ist eine andere Art und Weise eine PWA zu erklären ...
Um eine PWA mit Login/Logout-Funktionen zu bauen:
- Erstellen Sie Ihre Website, wie Sie normalerweise tun, einschließlich Server , Datenbank und Login/Logout-Funktionen. Benütze die Technologie, die du willst. Stellen Sie sicher, dass Sie Responsive Design-Prinzipien (z. B. CSS-Medienabfragen) verwenden, damit Ihre Website auf jedem Bildschirm gut aussieht.
--------- An dieser Stelle haben Sie bereits eine Website mit Login/Logout-Funktionen .----------
Um es ein PWA zu machen. ..
Stellen Sie sicher, dass Ihr Server für HTTPS eingerichtet ist.
Fügen Sie Ihrem HTML-Code den Code "Service Worker" hinzu. Es ist ein kleines Javascript, suche Google nach Beispielen.
Fügen Sie eine manifest.json-Datei hinzu. Dadurch werden einige Dinge definiert, zum Beispiel das Symbol "Websites", wenn ein Nutzer Ihre Website zu seinem Startbildschirm hinzufügt. Suchen Sie erneut nach Google.
Öffnen Sie Ihre Website in einem beliebigen Browser und prüfen Sie, ob der Browser den Service-Mitarbeiter bestätigt und registriert. Die meisten Benutzer verwenden hierzu die Chrome-Entwicklertools, da sie über entsprechende Tools verfügen.
Jetzt haben Sie eine grundlegende Service-Mitarbeiter-Setup bereit. An dieser Stelle tut es gar nichts, weil Sie kein Javascript programmiert haben, um den Service-Mitarbeiter zu nutzen!
Entdecken Sie einige neue Features, die Serviceangestellte mit, wie:
Auf mobilen Geräten ...
-Prompt der Benutzer Ihre Website, um ihre Startbildschirm hinzuzufügen. Dadurch erhält es ein großes hochauflösendes Symbol (das Sie definieren) und Sie können es auch so einrichten, dass es im Vollbildmodus geöffnet wird (dh keine Browser-URL-Leiste). Der Benutzer kann Ihre Website in Zukunft verwenden, indem er einfach wie jede andere native App auf dieses Symbol klickt. ODER wenn sie möchten, können sie Ihre Website auch manuell in ihren Webbrowser laden. Es ist egal.
--Promieren Sie den Benutzer, damit Ihre Website Benachrichtigungen an Ihr Gerät senden kann. Sie können wie jede andere native App Benachrichtigungen an den Benutzer senden.
Für Handy oder PC:
-Enable offline Caching, die Ihre Website einige Dateien lokal ermöglicht eine schnellere Leistung zu speichern. Ihre Website muss darauf ausgelegt sein, dies zu berücksichtigen. Dies funktioniert hervorragend mit SPA-Architektur, dh "Single-Page-Anwendung". Sie laden das Skelett Ihrer Website lokal und greifen einfach JSON-Daten vom Server. Das ist es!
Sie müssen Javascript verwenden, um all diese Dinge zu tun.
SO WIE SIE SEHEN ...
PWA ist nicht "Front-End-only". SERVICE-ARBEITNEHMER sind nur Frontend, weil sie Javascript sind und im Client-Browser verarbeitet werden.
Ein PWA ist nur ein Modell, das alle Komponenten Ihrer Anwendung (alias Website) umfasst, einschließlich Server, Datenbank, HTML, CSS, Javascript und was das Client-Gerät ist.
PWA ist keine neue Sprache oder eine proprietäre Sache von einer Firma. Es ist nur eine neue Art, Dinge zu tun, die möglich sind, denn schließlich sind HTML5-Funktionen Mainstream, dh die meisten nutzen Chrome/Firefox/Safari. Dieses Zeug funktioniert auf modernen MS-Browsern, aber es gibt immer noch Schluckauf.
Sie können Service-Mitarbeiter verwenden und KEINE PWA haben. Haben Sie einfach kein reaktionsfähiges CSS und machen Sie Ihre Website-Schnittstelle nur praktisch in einem PC-Monitor. Klassisches Beispiel: Google Mail. Es hat offensichtlich Offline-Fähigkeiten, aber die Benutzeroberfläche wird nicht verkleinert, wenn Sie die Größe Ihres Browsers auf 300px ändern. Sie erwarten, dass mobile Nutzer stattdessen die native Google Mail-App installieren.
Das hat mir mehr geholfen als du, thx =).
Single-Page-Web-App ist nicht nur nicht Front-End. –