CycleTracker

Mit den Sprachen des Webs werden wir eine voll funktionsfähige Anwendung erstellen, die sowohl online als auch offline funktioniert, sowohl in den Browsern als auch auf den Betriebssystemen (OS) der Benutzer. Wie jede reguläre Website wird CycleTracker auf einem Webserver gehostet und kann von dort heruntergeladen werden. Alles, was wir brauchen, ist ein Texteditor: CycleTracker, wie alle PWAs, erfordert keine zusätzlichen Programmierkenntnisse, keine Verpackung oder proprietäre SDKs. CycleTracker, wie jede PWA, kann nahtlos auf jedem Betriebssystem installiert werden, ohne dass App-Stores (und damit verbundene App-Store-Genehmigungen und Gebühren) erforderlich sind.

Nutzung von Standard- und offenen Webtechnologien

Historisch gesehen, um eine Anwendung auf einem Betriebssystem wie Windows, iOS, macOS, Linux und Android installierbar zu machen, werden die Anwendungen in von den Betriebssystemen unterstützten Programmiersprachen wie C#, .Net, Objective C, Swift, Kotlin, Java oder Python entwickelt. PWAs basieren auf einem anderen Modell: Sie verwenden eine einzige Codebasis, die mit standardisierten offenen Webtechnologien (HTML, CSS und JavaScript) geschrieben ist und auf allen Betriebssystemen funktioniert.

Kein Kompilieren erforderlich

Bei den meisten Programmiersprachen – wie Java, C/C++ und Kotlin, die häufig für den Bau von Android-Apps verwendet werden, sowie Objective-C und Swift für iOS – muss der Code kompiliert und in ein installierbares Format wie .exe, .dmg, .elf und .apk oder einen anderen installierbaren Dateityp, je nach dem Betriebssystem, verpackt werden. Abhängig von der Sprache kann das Kompilieren und Verpacken das SDK des Betriebssystems erfordern. PWAs verwenden Webtechnologien, die von jedem Betriebssystem unterstützt werden und nicht verpackt oder kompiliert werden müssen. Ja, Entwicklerteams können komplexe Build-Systeme haben, aber wie wir beim Bau von CycleTracker zeigen werden, können PWAs nur aus HTML und JavaScript (und CSS, obwohl Styling nicht unbedingt erforderlich ist für eine PWA) erstellt werden.

Überall verfügbar

Anwendungen, die nur auf einem einzigen Betriebssystem laufen, werden durch Downloads an Benutzer verteilt, oft in proprietären App-Stores. Sie sind über einen Anbieter wie den Apple App Store, Google Play, Microsoft Store oder ähnliches verfügbar. PWAs haben diese Anforderungen nicht. Wenn Sie Ihre CycleTracker-App verbreiten möchten, benötigen Sie keinen Zwischenhändler. Ein Benutzer kann auf Ihre App zugreifen, indem er die Online-Version besucht. Wenn Sie möchten, können Sie Ihre PWA jedoch im Play Store und App Store verteilen, ohne Unterschied zu anderen iOS- oder Android-Apps.

Einfach für den Benutzer zu installieren

Historisch gesehen müssen heruntergeladene, nur auf einem Betriebssystem laufende Anwendungen vom Benutzer absichtlich installiert werden. Abhängig vom Betriebssystem, Installationsformat und Download-Ursprung kann dies ein mehrstufiger Installationsprozess sein. PWAs sind vereinfachend. PWAs sind für jeden mit einem unterstützenden Browser verfügbar und mit ein paar Klicks installierbar.

Nach der Installation können PWAs so gestaltet werden, dass sie ähnlich erscheinen und sich ähnlich verhalten wie andere auf dem Gerät des Benutzers installierte Anwendungen:

Anwendungsfenster

Mit einer Manifest-Einstellung werden wir CycleTracker so öffnen lassen, dass es in seinem eigenen Anwendungsfenster angezeigt wird, was bedeutet, dass installierte PWAs anderen installierten Anwendungen ähnlich sind.

Anwendungssymbol

PWAs zeigen ein Anwendungssymbol an derselben Stelle wie andere installierte Anwendungen auf dem Betriebssystem der Benutzer an. 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 nach der Installation wie jede andere installierte Anwendung auf dem Gerät des Benutzers aussehen kann.

Funktioniert offline

Internetzugang ist zunächst erforderlich, um die Anwendung herunterzuladen, und auch erforderlich, wenn Daten mit dem Server oder anderen Benutzern synchronisiert werden. Dies ist bei allen Anwendungen erforderlich, nicht nur bei PWAs. Wir werden einen Service Worker hinzufügen, um ein Offline-Erlebnis zu schaffen, was bedeutet, dass CycleTracker funktioniert, auch wenn der Benutzer den Internetzugang verliert. Wir werden nur die Leistungsfähigkeit der Offline-Unterstützung von PWAs anschneiden. Service Worker können verwendet werden, um PWAs offline arbeiten zu lassen, genau wie jede andere installierte Anwendung. Wenn ein Benutzer Änderungen offline vornimmt, ermöglichen Service Worker den 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 abzurufen.

Die Basiswebanwendung für dieses PWA-Tutorial ist eine Periodenverfolgung, bei der der Benutzer den Beginn und das Ende jedes Menstruationszyklus nachverfolgen kann. Wir erstellen eine statische Website-Schale und gestalten sie, dann lernen wir, wie man eine sichere Verbindung erstellt, um unseren Fortschritt zu sehen. Wir fügen JavaScript-Funktionalität hinzu, um die HTML- und CSS-Schale in eine voll funktionsfähige Anwendung umzuwandeln, die Daten in localStorage speichert. Durch die voll funktionsfähige Webanwendung, die Sie gebaut haben, werden wir diese Web-App schrittweise in eine offline-fähige PWA verbessern, indem wir eine Manifestdatei hinzufügen, Symbole einbeziehen und einen Service Worker.

Die Schritte umfassen:

App HTML und CSS

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

Lokale Entwicklungsumgebung oder sichere Verbindung

Um installierbar zu sein, müssen PWAs über das https://-Protokoll bereitgestellt werden oder als lokal bereitgestellte Ressourcen mit 127.0.0.1- oder localhost-URLs, die mit dem http://-Protokoll bereitgestellt werden. Wir werden uns die Seite mit dem file://-Protokoll anschauen und auch Optionen für die Erstellung einer sicheren localhost-Verbindung zum Testen Ihres Installationscodes abdecken, während wir die Schritte des Tutorials durchgehen. Wir schauen uns auch die Bereitstellung Ihrer PWA mit GitHub Pages an.

JavaScript und LocalStorage

Vollständige Erklärung der JavaScript-Funktionalität, um eine clientseitige Periodenverfolgungs-Webanwendung zu erstellen, damit wir eine funktionierende Anwendung haben, die schrittweise in eine PWA verbessert werden kann, indem localStorage verwendet wird, um Periodeninformationen zu speichern.

Manifest: Identität, Erscheinungsbild und Ikonografie

Eine PWA erfordert ein Manifest, das eine JSON-Datei ist, die den Namen, das Symbol, die Beschreibung und andere Definitionen, wie die Anwendung innerhalb des Betriebssystems funktioniert, auf dem die PWA installiert ist, beschreibt. Wir erstellen eine Manifestdatei, die das Erscheinungsbild der Anwendung bei der Installation definiert, einschließlich der verwendeten Symbole, je nach Gerät des Benutzers, und Parameter für den Anwendungsansichtsbereich. Wir betrachten auch die Fehlerbehebung der Manifestdatei mit Entwicklerwerkzeugen im Browser.

Service Worker

Der Service Worker ermöglicht der Anwendung, offline zu arbeiten. Mit der sicheren Verbindung im vorherigen Schritt bietet der erste Seitenaufruf eine Basisfunktionalität, während der Service Worker heruntergeladen wird. Nachdem ein Service Worker installiert und aktiviert wurde, steuert er die Seite, um verbesserte Zuverlässigkeit und Geschwindigkeit zu bieten.

Zum Abschluss dieses Tutorials ist es hilfreich, ein grundlegendes Verständnis von HTML, CSS und JavaScript zu haben. Das Tutorial gibt Anweisungen zum Erstellen der Manifestdatei und zur Initiierung des Service Workers sowie zur Einrichtung einer lokalen Entwicklungsumgebung, damit Sie Ihren Fortschritt sehen können.

Während eine sichere Verbindung eine Anforderung ist, gibt es keine Softwareanforderungen zum Erstellen einer PWA, außer einem beliebigen Texteditor zum Codieren der PWA und einem Browser zum Anzeigen.

Sie können den Live-Periodenverfolger ausprobieren und den Quellcode des Periodenverfolgers auf GitHub ansehen.

• Weiter