{"id":881390,"date":"2023-10-22T03:39:01","date_gmt":"2023-10-22T08:39:01","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/ein-leitfaden-fur-progressive-web-apps\/"},"modified":"2023-10-22T03:39:01","modified_gmt":"2023-10-22T08:39:01","slug":"ein-leitfaden-fur-progressive-web-apps","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/ein-leitfaden-fur-progressive-web-apps\/","title":{"rendered":"Ein Leitfaden f\u00fcr progressive Web-Apps"},"content":{"rendered":"<p>Jedes Unternehmen verf\u00fcgt \u00fcber eine Website oder eine native mobile App oder sogar beides.  Allerdings verf\u00fcgen Websites nur \u00fcber begrenzte Funktionalit\u00e4ten und die Entwicklung nativer Apps erfordert erhebliche Investitionen.  Wo ist also die goldene Mitte?  Die Antwort lautet Progressive Web Apps (PWA).  Sie kosten weniger als native Apps, unterst\u00fctzen aber Funktionen wie Push-Benachrichtigungen, Offline-Modus und andere.<\/p>\n<p>In diesem Beitrag wird erkl\u00e4rt, was PWA-Websites darstellen, welche Hauptvorteile sie haben und welche Technologie verwendet werden muss, um eine normale Website in eine progressive Web-App umzuwandeln.<\/p>\n<h4>Die Bedeutung von Progressive Web Apps (PWA)<\/h4>\n<p>Progressive Webanwendungen sind eine der Arten von Webanwendungsarchitekturen, die Entwickler zur Implementierung der Client- und Serverseite des Produkts verwenden.  Sie <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/pulse\/importance-benefits-pwas-businesses-krunal-vyas\">Website-Unterst\u00fctzung<\/a> die ein Erlebnis bieten, das von nativen Anwendungen nicht zu unterscheiden ist.<\/p>\n<p>Sie k\u00f6nnen als native mobile Anwendungen installiert werden, offline arbeiten, mit der Kamera des Ger\u00e4ts interagieren oder Push-Benachrichtigungen erhalten.  Au\u00dferdem bieten PWAs eine viel bessere Verbreitung als App Stores und schm\u00e4lern Ihren Umsatz nicht.<\/p>\n<p>Als progressive Web-Apps 2015 erstmals auf den Markt kamen, waren sie auf Android verf\u00fcgbar.  Sp\u00e4ter, im Jahr 2018, wurde von iOS-Benutzern auf sie zugegriffen.<\/p>\n<p>Alex Russell, Softwareentwickler bei Google, der den Begriff PWA eingef\u00fchrt hat, sagt: \u201ePWAs sind einfach Websites, die die richtigen Vitamine zu sich nehmen.\u201c<\/p>\n<p>Progressive Web-Apps sind f\u00fcr die Ausf\u00fchrung in verschiedenen Browsern geschrieben, daher verwenden Programmierer HTML, CSS und JavaScript, um PWAs zu erstellen.  Wenn Benutzer PWA in einem Desktop-Browser \u00f6ffnen, sieht es wie eine herk\u00f6mmliche Website aus.  Im mobilen Browser stehen ihnen jedoch native App-Funktionen zur Verf\u00fcgung.<\/p>\n<h4>Wie funktionieren PWAs?<\/h4>\n<p>Wenn Benutzer eine PWA-Website besuchen, wird ihnen ein Popup angezeigt, in dem sie aufgefordert werden, die App auf ihrem Smartphone zu installieren.  Nachdem der Benutzer die PWA installiert hat, erscheint das App-Symbol auf dem Startbildschirm.  Wenn ein Benutzer eine progressive Web-App \u00f6ffnet, \u00f6ffnet der Browser ein neues Fenster anstelle eines neuen Tabs.<\/p>\n<figure class=\"is-mega\" data-lazy=\"\"><\/figure>\n<p>Nach der Installation erstellen PWAs einen Cache der Website.  Dies tr\u00e4gt zu einer h\u00f6heren Offline-Geschwindigkeit und Verf\u00fcgbarkeit bei.<\/p>\n<p>Mit PWA auf Android k\u00f6nnen Benutzer fast alle nativen Funktionen der App nutzen, darunter Zahlungen, NFC, Fingerabdruckauthentifizierung, Spracherkennung und mehr.<\/p>\n<p>Allerdings sind zus\u00e4tzliche APIs erforderlich, um Ger\u00e4tefunktionen in PWA verf\u00fcgbar zu machen (z. B. NFC-API, Bluetooth-API, Geolocation-API usw.).  Wenn Sie sich entscheiden, die PWA auf Google Play zu ver\u00f6ffentlichen, ben\u00f6tigen Sie au\u00dferdem Folgendes <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/blog.pwabuilder.com\/posts\/building-pwas-with-web-components!\/\">PWABuilder<\/a>.<\/p>\n<p>F\u00fcr iOS-Benutzer ist die Situation jedoch etwas anders.  Apple konzentriert sich mehr auf die Entwicklung nativer Apps als auf progressive Apps.  Das bedeutet nicht, dass PWAs nicht auf iOS laufen;  Es gibt nur einige Einschr\u00e4nkungen.  Beispielsweise unterst\u00fctzt Safari (Apples Browser) keine PWA-Push-Benachrichtigungen.<\/p>\n<h5>Hauptvorteile von PWAs:<\/h5>\n<ul>\n<li>Sie k\u00f6nnen ohne App-M\u00e4rkte zum Startbildschirm hinzugef\u00fcgt werden.<\/li>\n<li>Schnell, funktioniert im Offline-Modus, unterst\u00fctzt Push-Benachrichtigungen.<\/li>\n<li>Verf\u00fcgbarkeit der Hintergrundsynchronisierung, wenn der Benutzer mit der Anwendung interagiert.<\/li>\n<li>Sie verwenden keine URLs, um ein Vollbilderlebnis zu bieten.<\/li>\n<li>Wird \u00fcber HTTPS bereitgestellt, um die Sicherheit privater Daten zu gew\u00e4hrleisten.<\/li>\n<\/ul>\n<h4>Wie Unternehmen von PWAs profitieren k\u00f6nnen<\/h4>\n<p>Einer der Hauptvorteile von PWAs ist ihr Preis.  Selbst wenn Sie also bereits eine Website haben, m\u00fcssen Sie weniger Zeit und Geld f\u00fcr die Umwandlung in eine progressive Web-App aufwenden.<\/p>\n<p>Lassen Sie uns die anderen Vorteile von PWAs besprechen:<\/p>\n<ul>\n<li><strong>Es kann ohne Google Play oder App Store installiert werden.<\/strong> Progressive Web-Apps m\u00fcssen nicht auf App-Marktpl\u00e4tzen ver\u00f6ffentlicht werden.  Daher m\u00fcssen Sie nicht auf deren Genehmigung warten, um Ihr Produkt bei Kunden zu bewerben oder eine neue Version herauszubringen.  Dar\u00fcber hinaus ist es nicht erforderlich, eine Geb\u00fchr von 30 % an die M\u00e4rkte zu zahlen.<\/li>\n<li><strong>Schnell zu entwickeln.<\/strong> Es besteht keine Notwendigkeit, Apps f\u00fcr verschiedene Plattformen zu erstellen oder nativen Code anzupassen (wenn Sie eine Flutter-basierte App erstellen m\u00f6chten).  PWAs funktionieren auf iOS und Android, interagieren mit mehreren Ger\u00e4ten und viele Funktionen nativer mobiler Apps k\u00f6nnen auf Android implementiert werden.<\/li>\n<li><strong>Mitteilungen.<\/strong> Mithilfe der Google Duo PWA, einer Videoanruf-App, k\u00f6nnen Benutzer beispielsweise eine Nachricht zur Genehmigung des Anrufs erhalten, wenn ihre Freunde sie \u00fcber Duo anrufen.  Push-Benachrichtigungen funktionieren f\u00fcr Windows, macOS (au\u00dfer Safari), Linux und ChromeOS.<\/li>\n<li><strong>Einfachere Ver\u00f6ffentlichung von Updates.<\/strong> Benutzer m\u00fcssen die Anwendung nicht jedes Mal aktualisieren, wenn eine neue Version ver\u00f6ffentlicht wird.  Es stehen immer aktualisierte L\u00f6sungen zur Verf\u00fcgung.  Mit PWAs k\u00f6nnen Unternehmen mit Softwarefragmentierung umgehen, wenn einige Benutzer die alte Version des Produkts verwenden, w\u00e4hrend andere die neue Version verwenden.  Bisher mussten Softwareentwickler die vorherige Version der Anwendungen beibehalten, um nicht viele Kunden zu verlieren, bis sie das Update ver\u00f6ffentlichten.<\/li>\n<\/ul>\n<figure class=\"is-mega\" data-lazy=\"\"><\/figure>\n<p>Unternehmen wie Starbucks, Uber, Tinder, Forbes, Pinterest hatte schon <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.pwastats.com\/\">Vieh<\/a> der PWA-Implementierung.  Starbucks hat beispielsweise die Zahl der t\u00e4glich aktiven Nutzer verdoppelt.  Die Bestellung auf dem Desktop erfolgt fast genauso wie \u00fcber mobile Apps. Pinterest hat einen Anstieg der auf der Website verbrachten Zeit um 40 % beobachtet.  Tinder reduziert die Ladezeit von 11 auf 4,69 Sekunden.<\/p>\n<h4>Erforderliche Tools zum Erstellen einer progressiven Webanwendung<\/h4>\n<p>Progressive Web-Apps erfordern keine besonderen Frameworks oder andere Entwicklungstools.  PWA ist eine Technologie, die nach Erf\u00fcllung einiger Projektanforderungen implementiert werden kann.<\/p>\n<p>Um eine herk\u00f6mmliche Website in eine progressive Web-App umzuwandeln, m\u00fcssen Sie eine manifest.json-Datei und einen Service-Worker hinzuf\u00fcgen.<\/p>\n<h5>Servicemitarbeiter<\/h5>\n<p>Er <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/learn\/pwa\/service-workers\/#:~:text=the%20Service%20Worker-,What%20is%20a%20service%20worker%3F,cache%2C%20and%20delivering%20push%20messages\">Servicemitarbeiter<\/a> ist eine PWA-Technik, die f\u00fcr das Ressourcen-Caching und Push-Benachrichtigungen verwendet wird.  Es ist ein programmierbarer Vermittler zwischen Ihrer Webanwendung und der realen Welt, der Ihnen die Kontrolle \u00fcber Netzwerkabfragen gibt.<\/p>\n<p>Sie k\u00f6nnen beispielsweise das Abfrage-Caching-Verhalten verwalten, Push-Benachrichtigungen verarbeiten, den Offline-Modus und die Hintergrundsynchronisierung aktivieren.<\/p>\n<h5>Push-Nachrichten<\/h5>\n<p>Da Service-Worker-Dateien separat vom Hauptbrowser ausgef\u00fchrt werden, sind sie nicht von der verbundenen Anwendung abh\u00e4ngig.  Aus diesem Grund k\u00f6nnen Benutzer Benachrichtigungen von einem Server erhalten, wenn die Webanwendung offline ist.<\/p>\n<h5>Offline-Modus<\/h5>\n<p>Der Server-Worker ist Eigent\u00fcmer der Ressourcen der Anwendung und erm\u00f6glicht den Abruf von Daten, wenn Benutzer offline sind.  Der Server aktualisiert dynamische Inhalte (Bilder, Videos, Zahlungsverlauf usw.), wenn die Internetverbindung erneuert wird.  Benutzeraktionen auf der Seite werden verz\u00f6gert, bis die Verbindung stabil ist.<\/p>\n<p>Nehmen wir an, ein Benutzer m\u00f6chte eine Nachricht \u00fcber den PWA Messenger senden.  Die Website funktioniert noch;  Auf einen Nachrichtenverlauf kann zugegriffen werden.  Sie ben\u00f6tigen jedoch WLAN, um die Aktion abzuschlie\u00dfen: das Senden und Empfangen einer Nachricht.<\/p>\n<h5>Hintergrundsynchronisierungen<\/h5>\n<p>Wenn Benutzer \u00fcber eine Website und eine Internetverbindung verf\u00fcgen, k\u00f6nnen sie verschiedene Aktionen ausf\u00fchren, z. B. Nachrichten senden oder eine Transaktion durchf\u00fchren.  Was Sie bereits wissen.<\/p>\n<p>Das Problem besteht darin, dass Benutzer keine Internetverbindung haben.  In diesem Fall haben Sie weiterhin Zugriff auf die Anwendung, k\u00f6nnen jedoch nicht weiter damit arbeiten.  Der Servicemitarbeiter speichert die Informationen, w\u00e4hrend die Kunden offline sind.<\/p>\n<p>Hier ist ein Bild davon, wie progressive Webanwendungen mit Serverarbeitern interagieren.<\/p>\n<figure class=\"is-mega\" data-lazy=\"\"><\/figure>\n<h5>Manifestdatei<\/h5>\n<p>Beim Manifest handelt es sich um eine JSON-Datei, die die Parameter der Haupt-PWA bestimmt.<\/p>\n<p>Mit dem Manifest k\u00f6nnen Softwareentwickler Folgendes steuern:<\/p>\n<ul>\n<li>Wie progressive Web-Apps gestartet werden<\/li>\n<li>Die Art und Weise, wie die App den Benutzern angezeigt wird (App-Layout)<\/li>\n<li>Kann die Anwendung zum mobilen Startbildschirm hinzugef\u00fcgt werden?<\/li>\n<\/ul>\n<p>Das folgende Bild zeigt, was PWAs mit der Manifestdatei machen k\u00f6nnen.<\/p>\n<figure class=\"is-mega\" data-lazy=\"\"><\/figure>\n<h4>zusammenfassend<\/h4>\n<p>Wie Sie sehen, bringen progressive Webanwendungen aufgrund ihrer Benutzerfreundlichkeit und Kosten erhebliche Vorteile f\u00fcr alle dienstleistungsbasierten Unternehmen.  Sie sind einfach zu konstruieren und daher wirtschaftlich.  Obwohl diese Softwarel\u00f6sungen insbesondere f\u00fcr iOS-Benutzer einige Funktionseinschr\u00e4nkungen aufweisen, sind sie dennoch eine gute Option, um Ihre aktuelle Website zu starten oder zu erweitern.<\/p>\n   ","protected":false},"excerpt":{"rendered":"<p>Jedes Unternehmen verf\u00fcgt \u00fcber eine Website oder eine native mobile App oder sogar beides. Allerdings verf\u00fcgen Websites nur \u00fcber begrenzte Funktionalit\u00e4ten und die Entwicklung nativer Apps erfordert erhebliche Investitionen. Wo ist also die goldene Mitte? Die Antwort lautet Progressive Web Apps (PWA). Sie kosten weniger als native Apps, unterst\u00fctzen aber Funktionen wie Push-Benachrichtigungen, Offline-Modus und [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":881391,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/image-optimization-seo-600x450-1.jpg","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/881390"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=881390"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/881390\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/881391"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=881390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=881390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=881390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}