PWA ist gerecht

Published on August 02, 2018

PWA ist gerecht

    Bild
    Das Konzept der progressiven Webanwendungen (Progressive Web Applications, PWA) ist seit langem bekannt. 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, die bereits mit dem Thema vertraut sind, nützlicher. Dieser Artikel soll zeigen, dass progressive Web-Apps nicht schwierig sind und die 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. Es ist nicht klar, ob es sich bei dieser Website um eine PWA handelt oder nicht. Dies ist eine lange Skala, auf der die Homepage von Petrs Sophomore platziert werden kann, die ein Web-App-Manifest hinzugefügt hat, das ein Site-Symbol auf dem mobilen Startbildschirm erstellt. und äußerlich nicht von der üblichen Nachrichtenseite zu unterscheiden, von der nur Benutzer behaupten können, dass sie überraschend schnell und bequem ist, und das alles, weil sie irgendwo im Inneren das heißeste Herz eines Servicemitarbeiters ist (Schlagen).

    Relativität PWA ist im Titel selbst eingebettet - "progressiv". Progressiv im Vergleich zu was und in welchem ​​Ausmaß? Diese Relativitätstheorie ist jedoch in der Tat sehr gut, da PWA-Technologien studiert und schrittweise in Ihre aktuellen Projekte übernommen werden können, ohne dass eine globale Umgestaltung und Umgestaltung erforderlich ist.

    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 Konsequenzen 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ässigkeit (Reliable) - Die Anwendung wird unabhängig vom Status und der Qualität der Netzwerkverbindung sofort geladen und angezeigt.
    Schnell (Fast) - Der Datenaustausch über das Netzwerk erfolgt schnell, die Benutzeroberfläche ist reibungslos und reagiert schnell.
    Attraktivitäts (Engaging) - macht die Benutzererfahrung mit der Anwendung eines bequem und angenehm, woraufhin er wieder durch sie gehen zu wollen, und wieder und wieder ...

    Mit dem Google Sicht das ist , was heute in Aussehen und Gefühl trennt (Look and Feel) web Websites aus nativen Anwendungen.

    Mit anderen Worten, dem Entwickler werden Tools angeboten (Servicemitarbeiter, Push-Benachrichtigungen usw.) und Ziele festgelegt (die Site / Anwendung muss schnell heruntergeladen werden können, eine schwache Verbindung aufweisen und nicht „verzögert“ sein, falls erforderlich offline arbeiten). Wie weit sich der Entwickler auf diesem Weg bewegt, hängt nur von ihm ab.

    PWA und native Anwendungen


    Die Tatsache, dass PWA wie native Anwendungen aussieht, 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 Ressourcen der Anwendung können auf dem Client gespeichert werden, nur sich ändernde Inhalte werden über das Netzwerk übertragen), ist eine großartige Leistung.

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

    Und diesmal funktioniert alles auf allen gängigen Browsern und auf allen gängigen Plattformen gleichermaßen.

    Google greift iOS an
    Есть мобильные приложения, которым нужно быть нативными (необходима производительность, доступ к системным ресурсам и др.), однако есть приложения, которые в своем функционале вполне реализуемы как PWA. Для них теперь:

    — Не нужно писать различные версии для Android и iOS (и Windows)
    — Не нужно регистрировать в Google Play и App Store и платить за это
    — Открыт прямой выход на десктоп

    До нынешнего времени рынок мобильных приложений был закрыт для энтузиастов, которые могут написать полезную программу, но не могут/не хотят платить за ее размещение. И не хотят связываться с бюрократией Google и Apple по проверке приложения, после которой монопольные времена Microsoft вспоминаешь с тоской.

    Сейчас эти барьеры сломлены. И сломала их Google. Учитывая то, что именно она является флагманом интернет-технологий, подобный заход на территорию iOS, скорей всего, вполне продуман и просчитан. Остается ждать бума PWA.


    Natürlich gibt es Unterschiede zwischen PWA und nativen Anwendungen - hauptsächlich in Bezug auf die Zugriffsrechte auf Systemressourcen, aber die Arbeit in dieser Richtung erstreckt sich sogar auf das reine HTML5-Gebiet, und für PWA sind zusätzliche Berechtigungen kein Problem.

    APK gegen PWA
    Из личного опыта можно вспомнить, как после перевода одного новостного сайта на работу с Service Worker, было решено отказаться от Андроид приложения, сделанного по функционалу сайта. И не столько потому, что его поддержка занимала человеческие ресурсы, а потому, что PWA версия, как ни удивительно, была быстрее, красивее и удобнее в работе, чем java приложение.



    Technologie


    Ein kurzer Blick auf die Haupttreiber von PWA.

    Servicemitarbeiter


    Das Herz von PWA ist der Servicemitarbeiter. Dies ist die Proxy-Ebene zwischen dem Frontend und dem Backend im Browser. Alle Browseranforderungen werden durchlaufen. Diese Aufteilung in zwei unabhängige Ebenen ermöglichte es uns, den Übergang zu einer regulären PWA-Website so einfach wie möglich zu gestalten.

    Über die Repositorys kann der Service Worker auf den Cache-Speicher für Webressourcen und auf die IndexDB für Daten zugreifen. Vor allem aber völlige Freiheit bei der Implementierung von Geschäftslogik.

    Sie können z. B. eine Anforderung vom Browser annehmen, den Netzwerkstatus überprüfen, Daten aus dem Speicher entnehmen, Vorgänge mit ihnen ausführen und einige Ergebnisse an den Browser zurückgeben - was den Eindruck erweckt, dass die Antwort vom Server stammt. Oder wird es nicht sein - wie der Entwickler will, wird er es auch. Zwei Browserebenen (Client-Frontend und Service Worker) ermöglichen das Schreiben vollwertiger Anwendungen.

    Gleichzeitig reicht für die meisten Sites die Caching-Funktionalität des Service Workers aus, um in PWA umgewandelt zu werden.

    PWA ist von keinem Framework abhängig, es ist reines Javascript, obwohl selbst Google-Experten bei Habré aus irgendeinem Grund geraten werden, Bibliothekscode-Generatoren zu verwenden. Service Worker ist perfekt von Hand geschrieben, und es ist erforderlich, die Logik Ihrer Anwendung zu verstehen und zu steuern.

    Aus Sicht eines Programmierers ist Service Worker eine Javascript-Datei, die im HTML-Code der Seite enthalten ist. Darin definiert der Entwickler die Logik des Arbeitens mit Anforderungen, die vom Frontend und anderen Funktionen stammen.

    HTTPs


    PWA erfordert, dass alle Standortressourcen über das HTTPS-Protokoll übertragen werden. SSL-Zertifikat kann kostenlos bezogen werden, einige Hoster erledigen es für Sie. Es ist jedoch wichtig, dass die Site keine Links zu ungeschützten Ressourcen enthält. In diesem Fall wird die Site von einigen Browsern einfach nicht angezeigt.

    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 sind sie automatisch dort (in das Material). Es ist notwendig, Bilder entweder für sich selbst oder für einen Dienst mit Zugriff über HTTPS erneut zu speichern.

    Anwendungsshell


    Die App-Shell ist nur ein Grundgerüst einer grafischen Oberfläche, einer Vorlage. Nehmen Sie zum Beispiel die mittlere Site mit einem Hider, zwei Spalten usw. Grob gesagt werden wir den Inhalt der aktuellen Seite und alle dynamischen Informationen, die verbleibenden statischen - die App-Shell - daraus herausschneiden.

    Im Endeffekt wird die App-Shell auf dem Client gespeichert und beim Starten der Anwendung geladen. Anschließend werden dynamische Informationen aus dem Netzwerk in die App geladen. Und während es geladen wird, sollte app Shell schön aussehen ( „Lader“ auf dem Boden, etc.)

    Diese Seite Architektur - das Herunterladen von Inhalten und anderen dynamischer Informationen über Ajax - Aufrufe - Sie können durch denken und auf der Website im Voraus implementieren, dann der Übergang zur PWA wird ganz sein unkompliziert.

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

    Web-App-Manifest


    JSON-Datei, in der der Name der Anwendung, das Symbol, die PWA (Vollbild, Standalone usw.) und einige andere Parameter deklarativ für den Browser definiert werden. Ermöglicht das "Installieren" von PWA als separate Anwendung auf dem Startbildschirm des 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% der Benutzer tun dies nur im Interesse von Push-Benachrichtigungen.

    Bisher ist dies die beliebteste und am häufigsten missbrauchte PWA-Technologie. In den letzten Monaten hat die Anzahl der Websites, die Sie mit der Maustaste auf die Schaltfläche "Blockieren" im Angebot zum Empfang der neuesten Nachrichten suchen, zugenommen Push ist wie Spam.

    Sie können dem zweiten oder dritten Benutzer aber auch ein Abonnement für den Zugriff auf die Site anbieten, wenn bereits klar ist, dass er nicht zufällig hier ist.

    Google pwa Checkliste
    Push notifications must be timely, precise and relevant

    Enable push notifications from the site and ensure the use cases they're using the push notifications for are:
    Timely — A timely notification is one that appears when users want it and when it matters to them.
    Precise — A precise notification is one that has specific information that can be acted on immediately.
    Relevant — A relevant message is one about people or subjects that the user cares about.

    See our guide on creating great push notifications for advice. If your content is not timely and relevant to this user, consider using email instead.