Auf Wiedersehen, Electron. Hallo Desktop-PWA

Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass er es vielleicht eilig hat, aber worüber er sprechen möchte, sind zumindest sehr interessante Neuigkeiten. Wir sprechen von progressiven Desktop-Webanwendungen, die die Position von Anwendungen, die auf Electron basieren, erheblich verdrängen können.

Chrome v70-Innovationen

Die neueste Version von Chrome (v70) unterstützt Desktop Progressive Web Apps (PWA) auf Linux- und Windows-Plattformen.


Desktop PWA-Unterstützung in Chrome

Wenn Sie sich die Liste der unterstützten Systeme ansehen, wird sofort das Fehlen von MacOS deutlich. Dies ist jedoch nur bis zur Veröffentlichung von Chrome v72 möglich.


Desktop PWA-Unterstützung unter MacOS

Es ist wichtig zu beachten, dass diese Funktion unter MacOS zwar nicht standardmäßig aktiviert ist, jedoch mit dem entsprechenden Flag aktiviert werden kann. Öffnen Sie dazu Chrome, gehen Sie zu chrome: // flags und suchen Sie dieses Flag dort. Sie können das Flag auch direkt über den Link chrome: // flags / # enable-desktop-pwas aufrufen .

Was sind progressive Webanwendungen?

Wir werden hier nicht auf spezifische Details bezüglich PWA eingehen. Hier finden Sie den Abschnitt zur Google-Dokumentation, in dem Sie mehr darüber lesen können. Um PWA mit eigenen Augen zu sehen und auszuprobieren, öffnen Sie Chrome für Android oder Safari in iOS (hier werden jedoch nicht alle PWA-Funktionen unterstützt) und sehen Sie sich diese Beispiele an. Und hier ist eine Rede zu diesem Thema mit Google I / O '18.

Was ist Elektron?

Electron ist eine Plattform, mit der Entwickler plattformübergreifende Desktopanwendungen mit JavaScript, HTML und CSS erstellen können. Hier werden auch einige großartige JavaScript-Bibliotheken und Frameworks verwendet. Dies erleichtert Webprogrammierern den Einstieg in die Entwicklung von Desktop-Anwendungen. Elektronenbasierte Anwendungen haben in den letzten Jahren eine immense Popularität erlangt. Im Rahmen von Projekten wie Slack, VS Code, Atom, Discord wurden erhebliche Anstrengungen in die Entwicklung von Anwendungen mit Electron investiert. Wenn Sie mit diesen Projekten nicht vertraut sind, sollten Sie sich unbedingt die entsprechenden Anwendungen und Dienste ansehen. Herkömmliche Desktop-Anwendungen wirkten oft ungeschickt, ihre Elemente der Benutzeroberfläche sahen veraltet aus. Electron hat der Welt der Desktop-Anwendungen definitiv Schönheit und Anmut verliehen.

Was hat PWA damit zu tun?

Obwohl Elektronenanwendungen ein wachsendes und sich entwickelndes Phänomen sind und ihre Implementierung der Implementierung von Webanwendungen nahe kommt, weisen sie immer noch einige Nachteile auf. Erstens verwenden solche Anwendungen ihre eigenen Instanzen des Chromium-Browsers. Viele Leute wissen, wie viel RAM benötigt wird, damit Chrome funktioniert. Um die Situation zu beurteilen, die im System auftritt, wenn mehrere Elektronenanwendungen gleichzeitig gestartet werden, müssen Sie deren Anzahl nehmen und mit dieser Speichermenge multiplizieren. Öffnen Sie bei Interesse einige Electron-Anwendungen und sehen Sie sich an, wie viel Speicher sie verbrauchen.

Übermäßige Speichernutzung ist an sich nicht sehr gut, und hier müssen wir hinzufügen, dass viele Electron-Anwendungen auf eine bestimmte Art und Weise mit Node.js interagieren und dies nicht unbedingt auf die gleiche Weise wie entsprechende Webanwendungen tun.

Die Verwendung von Electron erhöht die Schwierigkeiten, die mit der Unterstützung älterer Programmversionen und der Einrichtung des Anwendungsaktualisierungsprozesses verbunden sind.

Lassen Sie uns nun über Desktop-PWA sprechen. Stellen Sie sich Anwendungen vor, die wie in Electron geschriebene Anwendungen aussehen, mit denen Sie bequem arbeiten können, die jedoch gleichzeitig einfach zu installieren sind. Sie werden auch problemlos aktualisiert, wenn Materialien von einer einzelnen Webanwendung an einen Client übertragen werden. Es scheint, dass Chrome den Standard für ein ähnliches Verhaltensszenario in Desktop-PWAs setzt. Wenn ein in Chrome arbeitender Benutzer eine bestimmte Webseite besucht und die ihr präsentierte Anwendung diese Kriterien erfüllt, hat der Anwendungsentwickler die Möglichkeit, den Benutzer einzuladen, die Anwendung auf seinem Computer zu installieren. Die Eingabeaufforderung sieht ungefähr so ​​aus wie die folgende.


Einladung zur PWA-Installation

Der Entwickler kann diese Eingabeaufforderung erst beforeinstallprompt nachdem der Browser beforeinstallprompt Ereignis vor beforeinstallprompt des beforeinstallprompt . Nach der Installation der Anwendung wird das entsprechende Symbol auf dem Desktop angezeigt.


PWA Launcher-Symbol

Nach dem Starten einer solchen Anwendung wird sie in einem Browserfenster geöffnet, das nicht mit herkömmlichen Steuerelementen ausgestattet ist. Eine solche Anwendung wird als echte Desktop-Anwendung wahrgenommen.


PWA gestartet

PWA-Beispiel

Hier ist ein Beispiel für eine Desktop-PWA, deren Screenshots oben als Abbildungen verwendet wurden. Hier ist sein Repository auf GitHub. Um diese Anwendung zu installieren, müssen Sie das entsprechende Flag in Chrome aktivieren und mindestens 30 Sekunden auf der Site verbringen.

Wie bereits erwähnt, muss eine Webanwendung, um als Desktop-PWA betrachtet zu werden, bestimmte Anforderungen erfüllen . Wenn Sie Ihre eigene Desktop-PWA erstellen und testen möchten, können Sie dieses Repository als Grundlage verwenden und die Anforderungen berücksichtigen. Wenn Sie eine kurze Zusammenfassung davon machen, erhalten Sie Folgendes:

• Die Anwendung muss über HTTPS bereitgestellt werden.
• Es muss ein installierter Servicemitarbeiter mit mindestens einem fetch installiert sein.
• Es sollte eine ordnungsgemäß formatierte Datei manifest.json enthalten.
• Die Seiten sollten mit reaktionsschnellen Designtechniken gestaltet werden.

Zusätzliche Beispiele

Wenn Sie unter MacOS arbeiten, kann PWA davon ausgehen, dass Sie sie nicht installieren können, und sie zeigen Ihnen keine Einladung zur Installation an. Wenn Sie die entsprechenden Flags aktivieren und an der Entwicklerkonsole basteln, kann der PWA eine Eingabeaufforderung zur Installation anzeigen. Hier sind einige der vorhandenen PWAs, die auf dem Mac installiert wurden.

ArbStarbucks

Starbucks hat viel in die Entwicklung einer großartigen PWA investiert. Ihre Desktop-Anwendung war wirklich beeindruckend.


PWA Starbucks

▍Google Maps

Dies ist einfach eine großartige App. Es macht seine Arbeit und belastet das System nicht besonders stark, was sich in schneller Arbeit und reaktionsschnellem Design unterscheidet. Um diese Anwendung zu installieren, müssen Sie die mobile Website von Google Maps erstellen und herunterladen.


PWA Google Maps

»Twitter

Twitter hat versucht, eine mobile PWA zu entwickeln, und die Desktop-Version kann als eine würdige Ergänzung der mobilen Anwendung angesehen werden.


PWA Twitter

Zusammenfassung

Trotz der Tatsache, dass bei Desktop-PWAs viel Lärm aufgetreten ist, müssen Sie sich bewusst sein, dass diese Technologie noch in den Kinderschuhen steckt. Insbesondere können die folgenden Entwicklungsanweisungen für Desktop-PWAs beachtet werden:

• Deep Links: Von Chrome geöffnete Links rufen die installierte Anwendung auf.
• Benachrichtigungen auf App-Symbolen: Zeigen Sie Benachrichtigungen auf Desktop-App-Startsymbolen an, genau wie auf Symbolen für mobile Apps.
• Hotkey-Unterstützung: Die Möglichkeit, Tastaturereignisse zur Verwendung in Hotkey-Anwendungen abzuhören.

Sobald sich die Desktop-Entwicklungstechnologien von PWA ausreichend entwickelt haben, werden diese Anwendungen zu ernsthaften Konkurrenten der heutigen elektronenbasierten Projekte.

Liebe Leser! Planen Sie die Entwicklung von Desktop-PWA?