Progressive Webanwendungsgrundlagen

Haben Sie jemals die Schaltfläche "Zum Startbildschirm hinzufügen" gesehen, die auf dem Bildschirm Ihres Android-Smartphones angezeigt wurde, als Sie eine Website durchsucht haben? Wenn Sie auf diese Schaltfläche klicken, wird im Hintergrund eine bestimmte Anwendung auf dem Telefon installiert. Das Symbol zum Starten wird auf dem Hauptbildschirm angezeigt. Jetzt kann diese Anwendung auf die gleiche Weise wie zuvor gestartet werden und mit der Site arbeiten, jedoch nur über die reguläre Telefonschnittstelle.

Es handelt sich um eine mobile Anwendung, die von einer Webanwendung heruntergeladen wurde. Wie Sie sehen, müssen Sie zur Installation einer solchen Anwendung nicht mit dem Play Market interagieren. Dadurch ist die Installation solcher Anwendungen so einfach wie möglich. Dies ist jedoch alles andere als interessant. Durch das Starten solcher Programme erhalten Sie die Möglichkeit, mit den angezeigten Daten auch ohne Internetverbindung zu arbeiten. Mit ihnen können Sie offline mit Webseiten interagieren. Ist das nicht wunderbar?

Der Autor des Materials, das wir heute veröffentlichen, wird über solche Anwendungen sprechen, warum sie benötigt werden und wie sie erstellt werden.



Sie haben wahrscheinlich schon verstanden, dass wir gerade über die sogenannte Progressive Web App (PWA) gesprochen haben. Eine solche Anwendung kann direkt über das Browserfenster installiert werden. Das Symbol zum Starten sieht aus wie das Symbol einer normalen mobilen Anwendung, und wie bei vielen mobilen Anwendungen können Sie ohne Internetverbindung damit arbeiten.


Zur Startbildschirm-Schaltfläche hinzufügen

Lassen Sie uns nun darüber sprechen, was „Progressivität“ bei der Anwendung auf Webanwendungen ist. Ich möchte sie besser kennenlernen, herausfinden, wie sie sich von normalen Webanwendungen unterscheiden, und außerdem möchte ich Ihnen sagen, warum ich glaube, dass PWA besser ist als herkömmliche mobile Anwendungen.

Was ist eine progressive Webanwendung?

Der Begriff "Progressive Web App" wurde von Alex Russell und Frances Berriman geprägt. Laut Alex sind progressive Webanwendungen nur Websites, die die richtigen Vitamine aufgenommen haben. Was im Herzen von PWA liegt, kann nicht als neues Framework oder neue Technologie bezeichnet werden. Dies ist in der Tat eine Reihe fortschrittlicher Entwicklungsmethoden, mit denen Sie das Verhalten einer Webanwendung dem Verhalten klassischer Desktop- oder Mobilanwendungen sehr ähnlich machen können.


PWA-Symbol auf dem Startbildschirm

PWAs bieten dem Benutzer durch fortschreitende Anwendungsverbesserungen eine neue Benutzerfreundlichkeit. Im Allgemeinen bedeutet dies, dass PWA auf Mobilgeräten verschiedener Generationen ungefähr gleich funktioniert. Natürlich stehen ihnen einige Funktionen gewöhnlicher Telefonanwendungen möglicherweise nicht zur Verfügung, aber solche Anwendungen funktionieren normalerweise auf verschiedenen Geräten so, wie sie für sie funktionieren sollten.

Warum benötigen Sie erweiterte Webanwendungen?

Bevor wir herausfinden, warum PWA überhaupt benötigt wird, wollen wir uns mit den Problemen befassen, mit denen wir beim Entwerfen von Webanwendungen und regulären mobilen Anwendungen konfrontiert sind.

• Langsame Internetverbindung. Vielleicht ist dort, wo Sie leben, mit dem schnellen Internet alles in Ordnung, sodass dieses Problem Sie nicht betrifft. Aber 60% der Weltbevölkerung nutzen immer noch das 2G-Internet. Selbst in den USA stehen einigen Benutzern nur Geschwindigkeiten zur Verfügung, die mit den Geschwindigkeiten gewöhnlicher Modems mit einfachen Telefonleitungen vergleichbar sind.
• Langsam ladende Website. Wenn die Site sehr langsam geladen wird, wissen Sie, wie lange der Benutzer wartet, bevor er auf die Schaltfläche zum Schließen des Fensters klickt? Drei Sekunden! 53% der Benutzer verlassen Websites, die zu langsam sind.
• Die Komplexität der Installation von Anwendungen. Benutzer möchten keine regulären mobilen Anwendungen installieren. Der durchschnittliche Benutzer installiert 0 Anwendungen pro Monat.
• Einbeziehung der Benutzer in die Arbeit mit der Anwendung. Benutzer verbringen den größten Teil ihrer Zeit in normalen mobilen Apps, aber die Reichweite mobiler Web-Apps ist etwa dreimal so hoch. Infolgedessen sind die meisten Benutzer nicht besonders aktiv an der Arbeit mit Anwendungen beteiligt, obwohl diese Benutzer 80% der Zeit in den drei mobilen Anwendungen verbringen, die sie am häufigsten verwenden.

Progressive Webanwendungen helfen bei der Lösung dieser Probleme.


PWA in Aktion

Es gibt viele Gründe, PWA zu verwenden. Hier möchte ich die Hauptfunktionen hervorheben, die sie bieten. Wenn Sie diese Funktionen in einem Wort beschreiben, steht FIRE für Fast, Integrated, Reliable, Engaging. Das heißt, eine progressive Webanwendung sollte schnell, in die Arbeitsumgebung des Geräts integriert, zuverlässig und über Mittel verfügen, um Benutzer in die Arbeit mit dem Gerät einzubeziehen .

1. Wenn wir über Geschwindigkeit sprechen, arbeitet PWA in allen Phasen der Benutzerinteraktion schnell. Sie sind schnell installiert, schnell gestartet, arbeiten schnell. Da Sie mit PWAs Daten zwischenspeichern können, ist das Neustarten solcher Anwendungen sehr schnell, auch ohne Zugriff auf Netzwerkressourcen.
   
2. Die Integration von PWA in die Geräteumgebung drückt sich darin aus, dass sich solche Anwendungen wie normale Anwendungen verhalten. Das Symbol zum Starten befindet sich auf dem Hauptbildschirm. Sie können mit Push-Benachrichtigungen arbeiten und dieselben Gerätefunktionen wie normale Anwendungen verwenden. Infolgedessen hat der Benutzer bei der Arbeit mit progressiven Webanwendungen nicht das Gefühl, die vertraute Umgebung zu verlassen.
3. Die Zuverlässigkeit integrierter Webanwendungen basiert auf der Tatsache, dass sie auch ohne Verbindung zu einem Netzwerk normal funktionieren können, da Daten mithilfe von Servicemitarbeitern zwischengespeichert werden können.
4. Die Fähigkeit von PWA, Benutzer mit ihnen in Kontakt zu bringen, basiert auf der Tatsache, dass sie Benachrichtigungen an Benutzer senden können. Auf diese Weise können Sie den Benutzer über interessante Ereignisse im Zusammenhang mit der Anwendung auf dem Laufenden halten und ihn für die Arbeit mit dieser Anwendung gewinnen.

Wie erstelle ich eine progressive Webanwendung?

Google hat eine Checkliste für die Entwicklung fortschrittlicher Webanwendungen veröffentlicht. Berücksichtigen Sie die Mindestanforderungen für eine Anwendung, deren Einhaltung es uns ermöglicht, sie als PWA zu bezeichnen.

▍1. Anwendungsmanifest

Ein PWA-Manifest ist eine manifest.json Datei mit folgendem Inhalt:

 { "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [   {     "src": "images/icons/icon-72x72.png",     "sizes": "72x72",     "type": "image/png"   },   {     "src": "images/icons/icon-96x96.png",     "sizes": "96x96",     "type": "image/png"   },   {     "src": "images/icons/icon-128x128.png",     "sizes": "128x128",     "type": "image/png"   },   {     "src": "images/icons/icon-144x144.png",     "sizes": "144x144",     "type": "image/png"   },   {     "src": "images/icons/icon-152x152.png",     "sizes": "152x152",     "type": "image/png"   },   {     "src": "images/icons/icon-192x192.png",     "sizes": "192x192",     "type": "image/png"   },   {     "src": "images/icons/icon-384x384.png",     "sizes": "384x384",     "type": "image/png"   },   {     "src": "images/icons/icon-512x512.png",     "sizes": "512x512",     "type": "image/png"   } ], "splash_pages": null } 

Vor uns liegt eine reguläre JSON-Datei, die Metainformationen zu einer Webanwendung enthält. Hier gibt es Daten zu den Anwendungssymbolen (eines davon sieht der Benutzer nach der Installation der Anwendung auf dem Hauptbildschirm), der Hintergrundfarbe der Anwendung, ihrem vollständigen und abgekürzten Namen usw. Sie können dieses Manifest selbst schreiben oder ein spezielles Tool verwenden , das die Erstellung solcher Dateien automatisiert.


Eine Site, die das Erstellen einer manifest.json-Datei erleichtert

▍2. Servicemitarbeiter

Servicemitarbeiter sind ereignisgesteuerte Mitarbeiter, die im Hintergrund der Anwendung ausgeführt werden und als Vermittler zwischen der Anwendung und den Netzwerkressourcen fungieren. Sie können Netzwerkanforderungen abfangen und Informationen für die Anwendung zwischenspeichern. Sie können zum Herunterladen von Daten verwendet werden, die verwendet werden sollen, um sicherzustellen, dass die Anwendung offline funktioniert. Servicemitarbeiter sind JavaScript-Programme, die die Verarbeitung bestimmter Ereignisse abfangen und bestimmte Aufgaben ausführen.

Hier ist ein Beispiel - Datei serviceworker.js .

 self.addEventListener('fetch', event => {   //           const {request} = event;   const url = new URL(request.url);   if(url.origin === location.origin) {       event.respondWith(cacheData(request));   } else {       event.respondWith(networkFirst(request));   } }); async function cacheData(request) {   const cachedResponse = await caches.match(request);   return cachedResponse || fetch(request); } 

▍3. Abzeichen

Symbole werden verwendet, um auf dem PWA-Gerät installiert zu starten. Mit der oben genannten Site, die beim Erstellen von Manifestdateien hilft, können Sie automatisch eine Reihe von Anwendungssymbolen generieren, die auf einer einzelnen Bilddatei mit einer Größe von 512 x 512 Pixel basieren, die auf diese Site hochgeladen wird. Generierte Dateien werden im .png Format gespeichert.

▍4. Sicherheit

Damit eine Anwendung als PWA bezeichnet werden kann, muss sie unter anderem den Datenaustausch über einen sicheren Kommunikationskanal mit HTTPS unterstützen. Mit den Funktionen von Diensten wie Cloudflare und LetsEncrypt ist es einfach, ein SSL-Zertifikat zum Organisieren einer solchen Verbindung zu erhalten. Anwendungsschutz ist heutzutage nicht nur das, was unbedingt erforderlich ist, sondern auch eine Möglichkeit, dem Benutzer die Zuverlässigkeit der Anwendung zu demonstrieren und vertrauensvolle Beziehungen zu ihm aufzubauen.

Zusammenfassung

In diesem Artikel haben wir über progressive Webanwendungen gesprochen, darüber, warum sie benötigt werden, welche Probleme sie lösen, welche Anforderungen ihnen gestellt werden. Hier haben wir auch das Thema ihrer Entwicklung angesprochen, insbesondere über das PWA-Manifest, Servicemitarbeiter, Anwendungssymbole und darüber, dass sie mit HTTPS geschützt werden müssen. Die PWA-Technologie wird oft als etwas angesehen, das ausschließlich mit Android-Smartphones zu tun hat, und bis vor kurzem hatte diese Sichtweise ein Recht auf Leben. Angesichts der Ereignisse in diesem Jahr können wir jedoch sagen, dass PWA auf vielen Plattformen eine sehr interessante Zukunft hat. Das Thema PWA ist in der Tat alles andere als erschöpft. Daher ist es durchaus möglich, dass wir darauf zurückkommen.

Liebe Leser! Wie stehen Sie zu progressiven Webanwendungen?