CycleTracker PWA Tutorial

Durch die Verwendung der Websprachen erstellen wir eine voll funktionsfähige Anwendung, die sowohl online als auch offline funktioniert, sowohl in den Browsern als auch auf den Betriebssystemen (OS) der Benutzer. Wie jede normale Website ist CycleTracker auf einem Webserver gehostet und von dort herunterladbar. Alles, was wir brauchen, ist ein Text-Editor: CycleTracker, wie alle PWAs, erfordert keine zusätzlichen Programmierkenntnisse, keine Verpackung oder proprietären SDKs. CycleTracker, wie jede PWA, kann nahtlos auf jedem Betriebssystem installiert werden, ohne dass App Stores (noch App-Store-Genehmigung und -Gebühren) erforderlich sind.

Verwenden Sie standardisierte und offene Webtechnologien

Historisch gesehen, um eine Anwendung auf einem OS, wie Windows, iOS, macOS, Linux und Android, installierbar zu machen, wurden die Anwendungen in OS-unterstützten Programmiersprachen, wie C#, .Net, Objective C, Swift, Kotlin, Java oder Python, entwickelt. PWAs basieren auf einem anderen Modell: Sie verwenden eine einzige Code-Basis, geschrieben mit standardisierten offenen Webtechnologien (HTML, CSS und JavaScript), die auf verschiedenen OS funktionieren.

Keine Kompilierung erforderlich

Mit den meisten Programmiersprachen, wie Java, C/C++ und Kotlin, die häufig für die Erstellung von Android-Apps verwendet werden, und Objective-C und Swift für iOS, muss der Code in ein installierbares Format, wie .exe, .dmg, .elf und .apk, oder eine andere installierbare Dateityp kompiliert und verpackt werden, je nach Betriebssystem. Je nach Sprache kann das Kompilieren und Verpacken das OS-SDK erfordern. PWAs verwenden Webtechnologien, die von jedem Betriebssystem unterstützt werden, die nicht verpackt oder kompiliert werden müssen. Ja, Entwicklerteams können komplexe Bausysteme haben, aber wie wir beim Aufbau von CycleTracker demonstrieren werden, können PWAs nur aus HTML und JavaScript (und CSS, obwohl Styling nicht unbedingt erforderlich ist für eine PWA) gebaut werden.

Überall und jederzeit verfügbar

Anwendungen, die nur auf einem einzigen OS laufen, werden Benutzern durch Downloads zur Verfügung gestellt, oft in proprietären App-Stores. Sie sind über einen Anbieter wie den Apple App Store, Google Play, Microsoft Store oder ähnlich erhältlich. PWAs haben diese Anforderungen nicht. Wenn Sie Ihre CycleTracker-App verteilen möchten, benötigen Sie keinen Zwischenhändler. Ein Benutzer kann auf Ihre App zugreifen, indem er ihre Online-Version besucht. Wenn Sie möchten, ist es jedoch möglich, Ihre PWA im Play Store und App Store zu vertreiben, ohne Unterschied zu anderen iOS- oder Android-Apps.

Einfach für den Benutzer zu installieren

Historisch gesehen müssen heruntergeladene Anwendungen, die nur auf einem OS laufen, von den Benutzern absichtlich installiert werden. Je nach OS, Installationsformat und Download-Ursprung kann dies ein mehrstufiger Installationsprozess sein. PWAs sind optimiert. PWAs sind für jeden mit einem unterstützenden Browser verfügbar und mit ein paar Klicks installierbar.

Einmal installiert, können PWAs so angepasst werden, dass sie ähnlich wie andere Anwendungen wirken und aussehen, die auf dem Gerät des Benutzers installiert sind:

Anwendungsfenster

Mit einer Manifestdatei-Einstellung werden wir CycleTracker in einem eigenen Anwendungsfenster öffnen, was bedeutet, dass installierte PWAs anderen installierten Anwendungen ähneln.

Anwendungssymbol

PWAs zeigen ein Anwendungssymbol an derselben Stelle an wie andere auf dem Betriebssystem der Benutzer installierte Anwendungen. Dies kann ein Symbol auf dem Startbildschirm, in der Symbolleiste, im Anwendungsordner oder an einem anderen Ort sein, an dem das Gerät Anwendungssymbole anzeigt. Wir lernen, wie man Symbole deklariert für CycleTracker, sodass unsere PWA, sobald installiert, wie jede andere installierte Anwendung auf dem Gerät des Benutzers erscheinen kann.

Funktioniert offline

Internetzugang ist zunächst erforderlich, um die Anwendung herunterzuladen, und ist auch erforderlich, wenn Daten mit dem Server oder anderen Benutzern synchronisiert werden. Dies ist für alle Anwendungen erforderlich, nicht nur für PWAs. Wir werden einen Service Worker hinzufügen, um eine Offline-Erfahrung zu schaffen, was bedeutet, dass CycleTracker funktioniert, selbst wenn der Benutzer den Internetzugang verliert. Wir werden nur auf die Möglichkeiten der Offline-Unterstützung von PWAs eingehen. Service Worker können verwendet werden, um PWAs offline genauso wie jede andere installierte Anwendung auszuführen. Wenn ein Benutzer Änderungen im Offline-Modus vornimmt, ermöglichen Service Worker PWAs, Daten zu synchronisieren, sobald die Konnektivität wiederhergestellt ist. Mit Service Workern muss der Benutzer nicht aktiv mit der PWA interagieren, tatsächlich muss die PWA nicht einmal geöffnet sein, um Serverdaten zu senden und zu empfangen.

Die Basis-Webanwendung für dieses PWA-Tutorial ist ein Perioden-Tracker, mit dem der Benutzer den Beginn und das Ende jedes Menstruationszyklus verfolgen kann. Wir erstellen eine statische Website-Shell und gestalten sie, dann lernen wir, wie man eine sichere Verbindung erstellt, um unseren Fortschritt zu beobachten. Wir fügen JavaScript-Funktionalität hinzu, die die HTML- und CSS-Shell in eine voll funktionsfähige Anwendung umwandelt, die Daten in localStorage speichert. Mit dieser voll funktionsfähigen Webanwendung, die Sie erstellt haben, werden wir diese Web-App schrittweise zu einer offline-fähigen PWA erweitern, indem wir eine Manifestdatei hinzufügen, ikonische Elemente einschließen und einen Service Worker einbinden.

Die Schritte umfassen:

App HTML und CSS

Zeilenweise Erklärung des HTML für die statischen Inhalte der Website, die statischen Inhalte von CycleTracker, zusammen mit dem CSS, um diesen Inhalt zu gestalten.

Lokale Entwicklungsumgebung oder sichere Verbindung

Um installierbar zu sein, müssen PWAs mit dem https://-Protokoll oder als lokal bereitgestellte Ressourcen unter Verwendung von 127.0.0.1 oder localhost-URLs mit dem http://-Protokoll bereitgestellt werden. Wir werden uns die Seite mit dem file://-Protokoll ansehen und auch Optionen für die Erstellung einer sicheren localhost-Verbindung behandeln, um Ihren Installationscode bei den Fortschritten durch die Tutorial-Schritte zu testen. Wir schauen uns auch an, wie Sie Ihre PWA mit GitHub-Pages bereitstellen können.

JavaScript und LocalStorage

Vollständige Erklärung der JavaScript-Funktionalität, um eine clientseitige Perioden-Tracker-Web-Anwendung zu erstellen, sodass wir eine funktionierende Anwendung haben, die schrittweise zu einer PWA erweitert werden kann, indem localStorage verwendet wird, um Periodeninformationen zu speichern.

Manifest: Identität, Erscheinungsbild und Ikonografie

Eine PWA erfordert ein Manifest, das ist eine JSON-Datei, die den Namen, das Symbol, die Beschreibung und andere Definitionen beschreibt, wie die Anwendung innerhalb des Betriebssystems funktioniert, in dem die PWA installiert ist. Wir werden eine Manifestdatei erstellen, die das Erscheinungsbild der Anwendung definiert, wenn sie installiert ist, einschließlich welcher Symbole abhängig vom Gerät des Benutzers verwendet werden sollten, und Parameter für den Anwendungs-Viewport. Wir schauen uns auch das Debugging der Manifestdatei mit den Entwicklerwerkzeugen des Browsers an.

Service Worker

Der Service Worker ermöglicht der Anwendung, offline zu arbeiten. Mit der sicheren Verbindung im vorherigen Schritt bietet der erste Besuch einer Seite ihre grundlegende Funktionalität, während der Service Worker heruntergeladen wird. Nachdem ein Service Worker installiert und aktiviert ist, kontrolliert er die Seite, um verbesserte Zuverlässigkeit und Geschwindigkeit zu bieten.

Um dieses Tutorial abzuschließen, ist es hilfreich, ein grundlegendes Verständnis von HTML, CSS und JavaScript zu haben. Das Tutorial bietet Anleitungen zur Erstellung der Manifestdatei und zur Initialisierung des Service Workers, sowie zur Einrichtung einer lokalen Entwicklungsumgebung, sodass Sie Ihre Fortschritte sehen können.

Während eine sichere Verbindung eine Voraussetzung ist, gibt es keine Softwareanforderungen zum Erstellen einer PWA, außer einem Texteditor, um die PWA zu codieren, und einem Browser, um sie anzuzeigen.

Sie können den Live-Perioden-Tracker ausprobieren und den Source-Code des Perioden-Trackers auf GitHub ansehen.

• Weiter