PWA ist gerecht

Das Konzept der progressiven Webanwendungen (Progressive Web Applications, PWA) gibt es schon seit langer Zeit. Seit dem Frühjahr 2018 werden Anwendungen dieser Klasse von allen gängigen Browsern unterstützt, aber die Verbreitung von PWA-Technologien ist trotz ihrer offensichtlichen „Vorteile“ immer noch sehr gering.

Google-Experten (einschließlich Habré) schreiben sehr informativ und kompetent über PWA, aber ihre Empfehlungen sind für diejenigen nützlicher, die bereits mit dem Thema vertraut sind. Dieser Artikel soll zeigen, dass Progressive Web Apps nicht schwierig ist und Entwickler von Websites diese Technologien jetzt verwenden können und sollten.

PWA-Philosophie

Zunächst ist anzumerken, dass es keine genaue Definition der PWA-Anwendung gibt. Sie können nicht klar sagen, ob es sich bei dieser Website um PWA handelt oder nicht. Dies ist eine lange Skala, auf der der zweite Petja, der ein Web-App-Manifest hinzugefügt hat, ein Homepage-Symbol auf dem Startbildschirm des Mobiltelefons erstellen kann. und äußerlich nicht von einer regulären Nachrichtenseite zu unterscheiden, von der nur Benutzer sagen können, dass sie überraschend schnell und bequem ist, aber alles, weil irgendwo darin das warme Herz eines Servicemitarbeiters (Servicemitarbeiters) schlägt.

Relativität PWA liegt im Namen selbst - "progressiv". Progressiv im Vergleich zu was und in welchem ​​Umfang? Diese Relativitätstheorie ist jedoch in der Tat sehr gut, da Sie PWA-Technologien studieren und schrittweise in Ihren aktuellen Projekten anwenden können, ohne sie global umgestalten und umgestalten zu müssen.

Auf der anderen Seite hat PWA eine Idee, und die Idee ist ziemlich klar und kraftvoll. Und wie langsam es sich entfaltet, kann durchaus das Ausmaß der Folgen anzeigen.

PWA-Architektur

PWA ist eine Webanwendung, die mit bestimmten Technologien erstellt wurde, um bestimmte Ziele zu erreichen.



Ziele werden wie folgt entschlüsselt:

Zuverlässig - Die Anwendung wird sofort heruntergeladen und angezeigt, unabhängig vom Status und der Qualität der Netzwerkverbindung.
Schnell (schnell) - Der Datenaustausch über das Netzwerk ist schnell, die Benutzeroberfläche ist reibungslos und reaktionsschnell.
Attraktivität (Engagement) - macht die Benutzererfahrung mit der Anwendung komfortabel und angenehm und veranlasst ihn, sie immer wieder und immer wieder erleben zu wollen ...

Aus Sicht von Google ist dies genau das, was Websites in Bezug auf das Erscheinungsbild von nativen Apps unterscheidet.

Mit anderen Worten, dem Entwickler werden Tools (Service Worker, Push-Benachrichtigungen usw.) angeboten und Ziele angegeben (die Site / Anwendung sollte schnell zu laden sein, an einer schwachen Verbindung arbeiten, nicht „verzögern“, bei Bedarf offline arbeiten). Wie weit der Entwickler auf diesem Weg gehen wird, hängt nur von ihm ab.

PWA und native Anwendungen

Die Tatsache, dass PWA nativen Anwendungen ähnelt, ist eher eine kosmetische Lösung (obwohl dies aus psychologischer Sicht für den Benutzer wichtig ist). Die Tatsache, dass sie intern ähnlich sind (alle wichtigen Anwendungsressourcen können auf dem Client gespeichert werden, nur sich ändernde Inhalte werden über das Netzwerk übertragen), ist eine enorme Leistung.

Man könnte es sogar eine versteckte Revolution nennen. Tatsächlich wird der Browser als eine Art virtuelle Maschine verwendet, in der die PWA-Anwendung gespeichert und ausgeführt wird. Da Android eine virtuelle Maschine für Android-Anwendungen ist, wird der Browser zu einer virtuellen Maschine für PWA. So wie eine native Anwendung über ein Dateisystem auf ihre Ressourcen zugreift, greift PWA auch auf ihre Ressourcen zu - allerdings über HTTP, jedoch lokal gespeichert.

Und dies funktioniert ausnahmsweise auf allen gängigen Browsern und auf allen gängigen Plattformen gleich.


Natürlich gibt es Unterschiede zwischen PWA- und nativen Anwendungen - hauptsächlich bei den Zugriffsrechten auf Systemressourcen, aber die Arbeit in dieser Richtung geht auch im Bereich von reinem HTML5, und für PWA sind zusätzliche Berechtigungen kein Problem.

Technologie

Betrachten Sie kurz die Hauptmotoren von PWA.

Servicemitarbeiter

Das Herzstück der PWA ist Service Worker. Dies ist die Proxy-Schicht zwischen Frontend und Backend im Browser. Alle Browser-Anfragen durchlaufen es. Diese Aufteilung in zwei unabhängige Ebenen ermöglichte es uns, den Übergang einer regulären Website zu PWA so einfach wie möglich zu gestalten.

Vom Speicher aus hat Service Worker Zugriff auf Cache-Speicher für Webressourcen und IndexDB für Daten. Vor allem aber die völlige Freiheit, Geschäftslogik zu implementieren.

Sie können beispielsweise eine Anfrage von einem Browser annehmen, den Status des Netzwerks überprüfen, Daten aus dem Speicher entnehmen, Vorgänge mit ihnen ausführen und ein bestimmtes Ergebnis an den Browser zurücksenden - was darauf hindeutet, dass die Antwort vom Server stammt. Oder nicht - wie der Entwickler will, wird er es tun. Mit zwei Browser-Ebenen (Client-Frontend und Service Worker) können Sie vollwertige Anwendungen schreiben.

Gleichzeitig reicht für die meisten Sites die Caching-Funktionalität des Service Worker aus, um sich in eine PWA zu verwandeln.

PWA hängt nicht von Frameworks ab, es ist reines Javascript, obwohl sogar Googles Habré-Spezialisten aus irgendeinem Grund die Verwendung von Bibliothekscode-Generatoren empfehlen. Service Worker ist wunderschön von Hand geschrieben. Dies ist erforderlich, um die Logik Ihrer Anwendung zu verstehen und zu steuern.

Aus programmatischer Sicht ist Service Worker eine Javascript-Datei, die im HTML-Code der Seite enthalten ist. Darin definiert der Entwickler die Logik für die Arbeit mit Anforderungen aus dem Front-End und anderen Funktionen.

Https

Für PWA müssen alle Standortressourcen über das HTTPS-Protokoll übertragen werden. Sie können kostenlos ein SSL-Zertifikat erhalten, einige Hoster erledigen dies für Sie. Es ist jedoch wichtig, dass die Site keine Links zu unsicheren Ressourcen enthält. Einige Browser zeigen die Site in diesem Fall einfach nicht an.

Das Hauptproblem in solchen Fällen sind Bilder. Oft fügen Redakteure oder Kommentatoren Links zu Bildern aus dem Internet in das Material ein, manchmal gelangen sie automatisch dorthin (im Material). Es ist erforderlich, Bilder entweder für sich selbst oder für einen Dienst mit Zugriff über HTTPS zu speichern.

Anwendungsshell

Die App-Shell ist nur ein Grundgerüst einer grafischen Oberfläche, einer Vorlage. Nehmen Sie beispielsweise eine durchschnittliche Site mit einem Header, zwei Spalten und mehr. Grob gesagt schneiden wir den Inhalt der aktuellen Seite und alle dynamischen Informationen daraus aus, die verbleibende statische ist die App-Shell.

Unter dem Strich wird die App-Shell auf dem Client gespeichert und beim Start der Anwendung geladen. Anschließend werden dynamische Informationen aus dem Netzwerk in die App geladen. Und während des Ladens sollte die App-Shell schön aussehen ("Lader" am Boden usw.)

Diese Architektur der Site - Herunterladen von Inhalten und anderen dynamischen Informationen über Ajax-Aufrufe - kann im Voraus auf der Site durchdacht und implementiert werden. Der Übergang zu PWA ist dann recht einfach.

Eine App-Shell ist wie eine native Programm-Shell. Betrachten Sie Ihre PWA als ein natives Programm, und vieles wird einfacher.

Web-App-Manifest

Eine JSON-Datei, die den Namen der Anwendung für den Browser deklarativ definiert, ein Symbol dafür, wie PWA (Vollbild, Standalone usw.) und einige andere Parameter aussehen. Ermöglicht die "Installation" von PWA als separate Anwendung auf dem Startbildschirm Ihres Smartphones.

Push-Benachrichtigungen

Wenn Sie mit Chrome DevTools im Internet surfen und auf der Registerkarte Anwendung öffnen, können Sie sehen, wie wenige Websites die PWA-Technologie verwenden. Und 90% derjenigen, die es verwenden, tun dies nur für Push-Benachrichtigungen.

Bisher ist dies die beliebteste und am häufigsten missbrauchte PWA-Technologie. In den letzten Monaten ist die Anzahl der Websites, auf denen Sie zum ersten Mal mit der Maus nach der Schaltfläche "Blockieren" suchen, um die neuesten Nachrichten zu erhalten, gestiegen, das Gefühl hat sich um ein Vielfaches erhöht und der Wunsch, Ihre eigenen aufzuzwingen Push ist wie Spam.

Sie können aber auch ein Abonnement für den zweiten oder dritten Besuch des Benutzers auf der Website anbieten, wenn bereits klar ist, dass er nicht zufällig hier ist.