Eine Einführung in progressive Web-Apps

Die meisten Entwickler haben zumindest einiges Summen gehört Progressive Web-Apps. Diese werden von Tech - Unternehmen wie Google weitgehend unterstützt und sind schnell die Norm für Webanwendungen mit mehreren Geräten.

Aber was genau ist das? Unterschied zwischen einem typischen und ein progressiv Web-App?

Für Entwickler, Es ist eine ganze Welt der Unterschiede. Progressive Web Apps verwenden moderne Web-APIs Erstellen Sie native App-Erlebnisse im Browser. Dies bedeutet, dass Entwickler dynamische Apps schnell laden können, ohne Hybrid-Frameworks zu verwenden.

In diesem Leitfaden werde ich das Thema behandeln Grundlagen der progressiven Web-Apps, einige Hauptfunktionen und wie Sie mit dem Aufbau Ihrer eigenen beginnen können.

Was sind progressive Web-Apps??

Progressive Web Apps (oder PWAs) Nutzen Sie die Browser-APIs Erstellen Sie native App-Erlebnisse direkt im Browser auf jedem Gerät.

Progressive Web Apps umfassen letztendlich a Handvoll Technologien die Entwickler verwenden können, um leistungsfähige native-ähnliche Anwendungen zu erstellen. Viele kommen aus Web-APIs so wie die Service Workers API oder der Push-API.

Es gibt einige Anforderungen etwas eine PWA nennen, aber das sind die die wichtigsten:

Ist voll mobil ansprechbar.
Haftet an Progressive Enhancement.
Fähig lokal installieren auf Smartphones und Tablets.
Läuft offline ohne Internet, Service-Mitarbeiter.
Trennt den Inhalt von der Funktionalität mit der App-Shell.
Baut auf HTTPS für mehr Sicherheit.
Auffindbar in der Google-Suche.
Hat dynamische App-ähnliche Seiten aber jeder noch hat eine eigene URL.

Wenn du bist Denken Sie daran, eine kleine Web-App zu erstellen Sie können stattdessen versuchen, eine progressive Webanwendung zu erstellen. Dies bringt eine gewisse Lernkurve mit sich, aber Sie haben so viel mehr Kontrolle über das Benutzererlebnis als Ergebnis.

Lassen Sie uns in die Grundlagen der progressiven Web-Apps eintauchen und erfahren, was sie tickt.

Servicemitarbeiter

Jede einzelne progressive Web-App braucht Servicemitarbeiter. Diese sind wie Verkehrsbeamte Wer koordiniert, wohin der Verkehr geht, woher die Daten kommen und wie es geht Alles wird organisiert und zwischengespeichert.

In einfachen Worten, der Servicemitarbeiter arbeitet als JavaScript-Datei und läuft im Hintergrund Ihrer Web-App. Wann immer der Benutzer führt ein Ereignis aus, es nennt das Service-Worker-Skript um Daten abzurufen, Daten zu speichern oder beides!

Verwendung der Service Worker-API ist wesentlich eine offline-unterstützte PWA ausführen. So geht es dir Daten zwischen Ansichten übertragen und wie du kannst Daten von einer lokalen Datenbank anfordern. Dies ist jedoch meist fortgeschrittenes Material, das Sie durch die Arbeit an einem PWA-Projekt lernen.

Werfen Sie einen Blick auf die Service-Arbeiter-Kochbuch zum grundlegende Schnipsel und Live-Demos. Dies ist ein fantastischer Weg, um zu lernen, was andere getan haben Klonen Sie dies in Ihren eigenen Apps.

Wenn Sie hoffen, eine progressive Webanwendung zu erstellen Beginnen Sie mit der Service Worker API. Basteln Sie einfach damit und erstellen Sie eine einfache Demo vor Ort. Dies wird die Grundlage für später schaffen Erstellen von benutzerdefinierten Anwendungsfunktionen und -seiten dass alle Dienstarbeiter durchlaufen.

Zum Führer für Anfänger und detaillierte Codeausschnitte, Ich empfehle diese Ressourcen ausdrücklich:

Erste Schritte mit Service-Mitarbeitern
Erste Schritte mit Service Workers
Service Worker Sample: Benutzerdefiniertes Beispiel für eine Offline-Seite

Die App-Shell

Die meisten nativen Apps Folgen Sie einer App-Shell-Architektur wo sich die Daten und der App-Code befinden vollständig von der Benutzeroberfläche getrennt. Die Anwendungsshell kann sein lokal zwischengespeichert So lädt sich jede Seite unglaublich schnell.

Das bleibt gleich “native app” Gefühl wo Schnittstelle bleibt immer sichtbar aber die Inhalt / Funktionalität wird unterschiedlich geladen jedes Mal. Schauen Sie sich diese Seite auf der Google-Entwickler-Website an, um mehr über die App-Shell-Modell.

Die meisten Apps haben eine sehr einfache App-Shell und Sie sollten Ihre Architektur mit entwerfen Einfachheit im Hinterkopf.

Normalerweise hat die App-Shell diese Hauptelemente:

Links der oberen Navigationsleiste.
Aktualisierungsschaltfläche (optional).
Seitenhintergrundcontainer.

Eine schöne Fallstudie finden Sie hier Die E / A-Progressive Web App-Shell-Architektur von Google. Sie bieten auch einige Tipps zum Erstellen Ihrer eigenen Shell-Architektur, zum Zwischenspeichern und zum Erstellen von Caches automatisch für jede Seite ziehen.

Stellen Sie sich die Shell-Architektur als vor alle statischen Elemente der Benutzeroberfläche Sie werden auf jeder einzelnen Seite verwendet. Das sollte sein getrennt vom restlichen Code und für eine einfache Wiederverwendung zwischengespeichert. Check auch aus Googles Intro zum Thema mit viel Code Schnipsel, die Ihnen den Einstieg erleichtern.

Online- und Offline-Unterstützung

Die meisten nativen Apps gut laufen ohne Internet. Progressive Web-Apps sollen demselben Verhalten folgen.

Durch Servicemitarbeiter können Sie lokale Caches erstellen mit JSON-Code für jede Seite. Auf diese Weise können Benutzer Durchsuchen Sie Ihre Web-App lokal. Du könntest auch Fügen Sie eine Manifestdatei ein um die Symbole, den Startbildschirm und andere Starteinstellungen zu definieren.

Wenn Sie die Service Worker API verwenden, werfen Sie einen Blick auf die Cache-API welches ist Teil des gleichen Rahmens. Es ist im Allgemeinen der beste Weg zu Daten lokal speichern und Zugriff von Service-Mitarbeitern später.

Du kannst auch Testen Sie eine beliebige Web-App mit Leuchtturm, ein kostenloses Tool zur Überprüfung der Funktionsübereinstimmung und Unterstützung für PWA-Technologien.

PWA immer Offline-Unterstützung benötigen über die Service Worker API, so dass sie es können Arbeiten in Zuständen mit niedriger Konnektivität. Lighthouse ist der beste Weg, um die Offline-Unterstützung zusammen mit einer Reihe anderer Funktionen zu testen.

Live-Beispiele

Live-PWAs zu studieren und zu sehen, wie sie funktionieren, ist eine großartige Möglichkeit zu lernen. Der Progressive Web App-Markt ist jedoch immer noch auftauchen, so viele der besten sind verstreut in verschiedenen Ecken des Internets.

Aber danke an die PWA rockt Galerie, Ich habe ein paar erstaunliche Beispiele zusammengestellt, um zu zeigen, was PWAs wirklich können.

1. Währungsrechner

Das ist ziemlich einfach Währungsrechner nimmt Wechselkurse und berechnet den Strom Unterschiede zwischen einer Tonne Währungen weltweit.

Sie werden feststellen, dass diese Web-App ist voll ansprechend, unterstützt die Berührung, und Auto-Updates ohne Aktualisierung der Seite.

Dies sind nur einige der Funktionen, die Sie in jedem erwarten typische progressive Webanwendung. Diese App kann auch lokal gespeichert werden Sie können mit Ihrem Telefon offline arbeiten, obwohl es eine Verbindung zu einer JSON-Datei herstellt, um die aktuellen Wechselkurse zu überprüfen.

2. Englische Akzente

Ich liebe diese Web-App einfach, weil sie einzigartig und unglaublich gut gestaltet ist. Das Englische Akzentkarte kuratiert videos online wo Menschen Akzente aus bestimmten Regionen der USA und Großbritannien tragen.

Durch Klicken auf eine beliebige Stelle auf der Karte können Sie sich anhören, wie Menschen bestimmte Wörter in verschiedenen Teilen der Welt aussprechen. Die App ist blitzschnell und das ist es Open-Source auf GitHub für jeden zum Auschecken.

Die Interna laufen weiter Reagieren / Redux mit Firebase und ein API-Verbindung zu Google Maps. Definitiv ein großartiges Beispiel für etwas ziemlich einfaches für Anfänger, um zu lernen und zu lernen.

3. Pokedex.org

Eine weitere recht einfache PWA ist dies Pokedex App erstellt von Nolan Lawson. Er hat diesen Code auch frei veröffentlicht auf GitHub, so ist es uns noch ein anderes projekt Es lohnt sich, herumzuschnuppern und zu studieren.

Da diese Daten statisch bleiben können, ist es so durch eine lokale Engine gehandhabt werden namens PouchDB. Alle Daten stammen von der PokeAPI und werden dann als einfaches JavaScript gespeichert. Das heißt du kannst es Speichern Sie es lokal auf Ihrem Telefon Wie eine echte native App und läuft mit oder ohne Internetzugang. Ziemlich cool, richtig?

Das Ganze ist bereitgestellt durch JavaScript, Es ist also ein Beweis dafür, wie viel Sie mit Frontend-Code tun können. Es verwendet viel Caching mit der Service Worker API, so Es ist verrückt schnell und einfach zu bedienen.

4. Flipkart

Zum Schluss und am überraschendsten sehen wir uns das an Flipkart-Website. Das ist voll E-Commerce-Shop ist in der Tat eine progressive Web-App.

Es ist voll ansprechend und lädt Seiten dynamisch. Seiten-URLs werden an den Browser angehängt, sodass Sie sie wie eine typische Website kopieren / einfügen und teilen können.

Das geht leicht die komplexeste PWA, die ich je gesehen habe. Ich bin erstaunt, dass die Entwickler so ein nahtloses Erlebnis für alle Benutzer im Web schaffen konnten, geschweige denn Unterstützung des lokalen Offline-Speichers, auch.

Und obwohl ich für den gesamten Flipkart-Quellcode kein Repo finden konnte, gibt es ein Flipkart-Seite auf GitHub mit kleinere Codeausschnitte von ihrem Entwicklerteam.

Mehr lernen

Progressive Web Apps sind unglaublich beliebt und wird sicherlich Dampf gewinnen Je mehr Entwickler von nativen / hybriden Apps wechseln.

Es gibt einen jährlichen Gipfel mit dem Namen Progressive Web App Summit und sie veröffentlichen Videos auf YouTube, die Sie kostenlos ansehen können. Dies ist ein guter Weg zu Holen Sie sich Profis, ohne für ein Ticket zu bezahlen.

Aber wenn Sie nach detaillierter suchen PWA-Codierungsanleitungen Schauen Sie sich auf jeden Fall diese Tutorials an:

Ein Anfängerleitfaden für progressive Web-Apps
Erstellen Sie Ihre erste progressive Web-App mit React
Erstellen einer progressiven Web-App mit Polymer