Desktop Progressive Web Apps: Ein großer Durchbruch

Veröffentlicht: 2019-09-10

Inhaltsverzeichnis

Wenn man von Progressive Web Apps (PWAs) spricht, fallen einem als erstes mobile Anwendungen ein, da dies schon immer so war.

 Empfohlene Lektüre: Was ist Progressive Web App

Im Laufe der Zeit dringen jedoch große Browser wie Chrome mit ihren PWA-Initiativen in den Desktop-Markt ein und erweitern das scheinbar unbegrenzte Potenzial von PWAs noch mehr.

Ab Chrome 70 können Benutzer jetzt Desktop Progressive Web Apps unter Windows und Linux installieren. Nach der Installation werden sie über das Startmenü gestartet und wie alle anderen installierten Apps ausgeführt, ohne Adressleiste oder Registerkarten.

Sehen Sie sich diesen Beitrag auf Instagram an

Fast nicht von nativen Anwendungen zu unterscheiden, ist Progressive Web App (PWA) die Zukunft des Webs mit ihren App-ähnlichen Funktionen, von denen eine die Möglichkeit der Installation (PWA zum Startbildschirm hinzufügen) ist, die das Weberlebnis möglicherweise revolutionieren kann. ?Bauen Sie noch heute eine PWA mit SimiCart. . . #pwa #simipwa #app #nativeapp #websitedesign #web #google #chromedevsummit #chromedevsummit2019

Ein von SimiCart (@simicart.official) geteilter Beitrag

Und dabei bleibt es nicht . Schritt für Schritt wird der Grundstein für einen hybriden PWA Microsoft Store gelegt: Im Microsoft Store sind Progressive Web Apps jetzt auf Augenhöhe mit nativen Windows-Anwendungen, wodurch die Reichweite auf die gesamte Windows 10-Installationsbasis von fast 700 Millionen erweitert wird aktive monatliche Benutzer.

Desktop-PWAs verstehen und warum sie so wichtig sind

Mit allen Vorteilen von Progressive Web Apps und mehr wird Desktop Progressive Web App immer mehr zum Trend in der Entwicklung von Desktop-Apps.

 Empfohlene Lektüre: 12 Progressive Web Apps Beispiele für Ihre Inspiration

Für ein kurzes Verständnis von Desktop PWA können Sie sich vorstellen, dass Desktop PWA wie ein Online-Dokument oder ein Google -Dokument ist, das unter Verwendung der Webkomponenten funktioniert. Native Desktop-Anwendungen hingegen sind wie Microsoft Word : Sie sind gut, haben ein bisschen Größe und sind so konzipiert, dass sie reibungslos funktionieren. Der Grund, warum Desktop PWA im Moment so angesagt ist, liegt darin, dass Desktop PWA so ziemlich die Arbeit einer nativen Desktop-Anwendung mit einem viel ansprechenderen Erlebnis erledigen kann und wenig bis gar keinen Platz auf Ihrer Festplatte beansprucht.

Zusammenfassend sind Desktop-PWAs:

  • Schnell – PWA bietet ein unmittelbares, reaktionsschnelles und insgesamt angenehmes Erlebnis
  • Installierbar – Eine PWA kann wie jede andere native App installiert und auf Ihrem Desktop oder Startbildschirm angezeigt werden, ohne dass ein Browser erforderlich ist. Installationen von PWA sind immer sofort und klein in der Paketgröße.
  • Engagierend – PWA übernimmt die beste Richtlinie für hochwertige UX & UI und kann gleichzeitig unabhängig vom Netzwerkstatus oder der Gerätefähigkeit arbeiten.

Das prominenteste Beispiel für Desktop PWA ist Twitter Lite . Obwohl Twitter mit Fokus auf mobile Benutzer entwickelt wurde, verzeichnete Twitter ein herausragendes Wachstum bei seinen Desktop-Benutzerinteraktionen.

65 % mehr Seiten pro Sitzung

75 % mehr gesendete Tweets

20 % weniger Absprungrate

Der erste Schuss, der die Anfangsphase der PWA-Bewegung markiert, wurde sicherlich von Twitter abgefeuert. Darauf folgen einflussreiche Marken wie Spotify und Pinterest mit Eile und ebenfalls in nicht minder herausragender Produktqualität:

Desktop-Spotify- und Pinterest-PWA

Falls Sie es verpasst haben, haben wir hier eine gründliche Überprüfung von Spotify PWA. Spotify PWA hebt sich von den anderen ab und verfügt über eine Überarbeitung, die das Benutzererlebnis drastisch verändert und es personalisierter und anpassungsfähiger an die Bedürfnisse des Benutzers macht – so wie es ein Musikplayer sein sollte.

Adaptive Hintergrundfarben von Spotify PWA

Auch Pinterest erlebte mehrere positive Verbesserungen der Kerngeschäftskennzahlen.

Die aufgewendete Zeit ist im Vergleich zum alten mobilen Web-Erlebnis um 40 % gestiegen, die nutzergenerierten Werbeeinnahmen sind um 44 % gestiegen und die Hauptinteraktionen sind um 60 % gestiegen .

Ihr neues mobiles Web-Erlebnis ist eine Weiterentwicklung des Monolithen einer Website zuvor.

Sie haben nicht nur Hunderte von KB von ihrem JavaScript aufgebrochen und abgebaut, wodurch die Größe ihres Kernpakets von 650 KB auf 150 KB verringert wurde, sondern sie haben auch wichtige Leistungskennzahlen verbessert. First Meaningful Paint wurde von 4,2 Sekunden auf 1,8 Sekunden und Time To Interactive von 23 Sekunden auf 5,6 Sekunden verringert.

Für Leser, die an einer konkreten Fallstudie zu Pinterest PWA interessiert sind, empfehlen wir diesen Artikel: Eine Fallstudie zur Performance von Pinterest Progressive Web Apps.

Pinterest PWA-Statistiken
Quelle: PWAstats

So installieren Sie progressive Web-Apps auf dem Desktop

Der Prozess zum Installieren einer Desktop Progressive Web App ist recht unkompliziert und optimiert. Ihr wichtigster Schritt ist nur, die richtige PWA-Adresse Ihrer App zu finden.

In unserem heutigen Tutorial verwenden wir Twitter als Beispiel für Desktop PWA:

Schritt 1 : Gehen Sie mit Google Chrome Version 70 und höher zu https://mobile.twitter.com/home

Schritt 2 : Überprüfen Sie, ob am rechten Ende der Adressleiste eine (+)- Schaltfläche vorhanden ist

Twitter PWA-Installations-App-Popup

oder ob es im Dropdown-Menü die Option „ Twitter installieren “ gibt

Twitter PWA-Installationsoption

Schritt 3 : Klicken Sie auf Installieren und der Vorgang wird sofort beendet.

Schritt 4 : Starten Sie Ihre frisch installierte PWA von Ihrem Desktop aus.

Desktop-Twitter-Icon
Desktop-Twitter-Symbol

So deinstallieren Sie Progressive Web Apps auf dem Desktop

Für unbesorgte Benutzer ist das Löschen des Desktop-PWA-Symbols eine akzeptable Möglichkeit, PWA zu deinstallieren. Für Benutzer, die nach einer sichereren Methode zum Deinstallieren von PWAs suchen, werden jedoch die folgenden Schritte empfohlen:

Schritt 1 : Öffnen Sie Ihre Desktop-PWA (in diesem Fall Twitter )

Schritt 2 : Wählen Sie im Dropdown-Menü „ Twitter deinstallieren …“.

Twitter PWA-Deinstallationsoption

Schritt 3 : Aktivieren oder deaktivieren Sie die vorgeschlagene Option und klicken Sie schließlich auf „ Entfernen “.

Twitter PWA-Deinstallations-Popup

Und das ist es! Ihre Twitter PWA ist nun in nur wenigen einfachen Schritten vollständig von Ihrem Computer entfernt.

Abschließende Bemerkungen

Desktop PWA ist zweifellos der nächste revolutionäre Schritt in der Interaktion und Funktionalität von Web-Apps. Um Ihrer Konkurrenz einen Schritt voraus zu sein, müssen Unternehmen die PWA-Bewegung jetzt annehmen und auf den sich ändernden Trend in der Web-/App-Entwicklung achten.

Für Online-Händler, die nach einer rundum perfekten Magento Progressive Web App -Lösung suchen, bieten wir hier bei SimiCart ein Komplettpaket für Sie und Ihr Geschäft.

ERSTELLEN SIE PWA MIT SIMICART