CycleTracker: Sichere Verbindung

Jeder Browser rendert Ihr HTML. Um die HTML-Datei mit dem angewendeten CSS anzuzeigen, die Sie im vorherigen Abschnitt erstellt haben, öffnen Sie die index.html Datei, indem Sie über die Dateistruktur Ihres Computers oder über das Menü "Datei öffnen" Ihres Browsers navigieren.

Mit der aktualisierten index.html und dem style.css im selben Verzeichnis sollte die Seite in einem schmalen Browserfenster ähnlich wie auf diesem Screenshot aussehen:

Wir betrachten unsere Seite mit dem file:// Protokoll, das einen sicheren Kontext bereitstellt. Dies stellt sicher, dass die Seiten mit dem aktuellen Status unseres Codebestands angesehen werden können und weiterhin funktionieren, wenn wir JavaScript-Funktionen hinzufügen, die einen sicheren Kontext erfordern.

Während wir die meisten Funktionalitäten der Anwendung mit dem file:// Protokoll anzeigen und testen können, können wir damit die Installation der Anwendung mit unserer Manifestdatei nicht testen.

Wir benötigen eine lokale Entwicklungsumgebung, um das gesamte Tutorial einschließlich der Installation zu testen. Ein Teil des Installierbarmachens eines PWA ist ein sicherer Server. Die Dateien müssen über eine sichere Verbindung im Web bereitgestellt werden, um die Vorteile von PWAs zu nutzen und unsere Anwendung als PWA zu verteilen.

Die Standardmethode zum Einrichten einer lokalen Entwicklungsumgebung variiert je nach Betriebssystem. Während sich der Standardstandort für die Index- und Konfigurationsdateien auf Ihrem Betriebssystem unterscheiden kann, ermöglichen die meisten Desktop-Betriebssysteme eine Serverkonfiguration, die Ihnen als Entwickler zugänglich ist.

Zum Beispiel ermöglicht auf macOS, zumindest auf Sierra und Monterey, der Befehl sudo apachectl start einen Apache HTTP-Server. Nachdem der Server gestartet wurde, zeigt die Eingabe von http://localhost im Browser eine einfache Webseite an, die "It works!" anzeigt. Standardmäßig wird die HTML-Datei in Library/WebServer/Documents/index.html.en angezeigt. Um andere Dateiendungen als .html.en zuzulassen oder das Stammverzeichnis von Library/WebServer/Documents/ zu ändern, müssen Sie die Apache HTTP-Konfigurationsdatei bearbeiten, die sich unter /etc/apache2/httpd.conf befindet. Der Server kann mit sudo apachectl stop gestoppt werden.

Das Standard-localhost des Betriebssystems hat eine leicht zu merkende URL, aber einen schwer zu merkenden Server-Stammort und Konfigurationsprozess. Es erlaubt auch nur einen lokalen Server an einem Ort gleichzeitig. Glücklicherweise gibt es intuitivere Methoden zur Servereinrichtung, um eine oder mehrere lokale Entwicklungsumgebungen an mehreren Ports zu erstellen.

Es gibt mehrere IDE Erweiterungen und programmiersprachen-spezifische Pakete, die es ermöglichen, eine Entwicklungsumgebung mit einem einzigen Klick oder Terminalbefehl zu starten. Sie können sogar mehrere lokale Server betreiben, jeder mit einer anderen Portnummer.

Sie können einen lokalen HTTP-Server mit einem VS Code Plugin betreiben, das es ermöglicht, einen lokalen Server auf einem einzigen oder verschiedenen Port zu betreiben. Die Preview on Web Server Erweiterung für die VS Code IDE erstellt einen Server im Stammverzeichnis des aktuell vom Editor geöffneten Verzeichnisses mit einem Standard-Port von 8080. VS Code-Erweiterungen sind konfigurierbar. Die previewServer.port Einstellung ist die Portnummer des Web-Servers. Die Standardeinstellung der Erweiterung 8080 kann bearbeitet und geändert werden. Durch die Eingabe von localhost:8080 in der Browser-URL-Leiste wird die Seite standardmäßig geladen.

Erfahren Sie, wie Sie einen lokalen Testserver einrichten mit Python oder einer lokalen Serverseitigen Sprache wie PHP.

Wenn Sie Node installiert haben, haben Sie möglicherweise npm und npx ebenfalls installiert. Geben Sie in der Kommandozeile npx -v ein. Wenn eine Versionsnummer zurückgegeben wird, können Sie http-server, einen nicht konfigurierbaren statischen HTTP-Server, verwenden, ohne irgendeine Voraussetzung installieren zu müssen. Geben Sie npx http-server [path] in der Kommandozeile ein, wobei [path] der Ordner ist, in dem Ihre Indexdatei gespeichert ist.

Standardmäßig lädt die Eingabe von localhost:8080 in der Browser-URL-Leiste die Seite. Wenn Sie bereits einen Server auf Port 8080 gestartet haben, ändert sich die Portnummer automatisch, und die Entwicklerumgebung wird mit einem verfügbaren Port gestartet, beispielsweise 8081.

Sie können eine andere Portnummer wählen. Die Eingabe von npx http-server /user/yourName/CycleTracker -p 8787 startet den lokalen Server auf Port 8787, wenn verfügbar. Wenn nicht, wenn Sie eine bereits verwendete Portnummer eingeben, erhalten Sie einen address already in use oder ähnlichen Fehler. Wenn erfolgreich, zeigt die Eingabe von localhost:8787 in der Browser-URL-Leiste die ~/user/yourName/CycleTracker/index.html gespeicherte Indexdatei an oder zeigt, falls keine Indexdatei vorhanden ist, die Inhaltsverzeichnis von ~/user/yourName/CycleTracker/ an.

Dieser nicht konfigurierbare statische HTTP-Server reicht für unsere grundlegende App aus. Über localhost und 127.0.0.1 bereitgestellte Apps sind von https ausgenommen und gelten immer als sicher. Insecure-Warnungen des Browsers können, falls angezeigt, umgangen werden. Während dies nicht notwendig ist, können Sie Ihren lokalen Webserver über HTTPS bereitstellen, indem Sie ein eingebautes TLS-Zertifikat hinzufügen. Mit dem Zertifikat können Sie den local-web-server installieren und ausführen um Ihr Projekt lokal über https bereitzustellen und so Sicherheitswarnungen zu vermeiden.

npm install -g local-web-server
cd ~/user/yourName/CycleTracker/
ws --https

In obigem Beispiel müssen Sie möglicherweise die Installation mit sudo voranstellen.

Die vorherigen Optionen sind in Ordnung und notwendig, um Ihre Anwendung während der Bearbeitung dieses PWA-Tutorials oder bei jedem Webentwicklungsprojekt zu testen. Obwohl Sie Ihre Webanwendung auf Ihrem Gerät hosten und sie jedem mit einer Internetverbindung zugänglich machen könnten, ist dies nicht empfohlen.

Um die zusätzlichen Funktionen von PWAs zu erhalten, einschließlich der Installation mit einem einzigen Klick, einer eigenständigen Benutzeroberfläche, Zulassung zu App-Stores und optionaler Offline-Funktionalität durch Service Worker, benötigen wir eine sichere Verbindung. Um Ihre App zu verteilen und anderen zu ermöglichen, Ihre PWA anzuzeigen, zu nutzen und zu installieren, sollten Sie Ihren Inhalt auf einem sicheren entfernten Server hosten und bereitstellen.

Wenn Sie ein PWA offiziell veröffentlichen, werden Sie wahrscheinlich in einen Domainnamen und Webhosting investieren wollen. Für Open-Source-Projekte, bei denen Entwickler von der Codebasis lernen und eventuell sogar zum Projekt beitragen können, können Sie Ihre Fortschritte auf GitHub Pages hosten.

Der aktuelle Stand der CycleTracker-Anwendung ist auf GitHub sichtbar und sicher unter https://mdn.github.io/pwa-examples/cycletracker/html_and_css/ bereitgestellt. Wir haben die Dateien im MDN-GitHub-Konto gepostet. Ebenso können Sie, wenn Sie ein GitHub Konto haben, es in Ihrem veröffentlichen. Beachten Sie jedoch, dass Aktionen auf GitHub zwar sicher über TLS bereitgestellt werden, aber nicht unbedingt privat sind und alle GitHub-Seiten öffentlich sind. Wenn Sie in einem Gebiet mit einer repressiven Regierung leben, die Menstruationszyklen verfolgt, ziehen Sie es in Erwägung, den Code zu kopieren und einzufügen, anstatt ihn zu forken.

Um eine öffentlich verfügbare sichere Seite zu erstellen, richten Sie eine GitHub Pages Seite ein. Erstellen Sie ein Repository namens <username>.github.io, wobei <username> Ihr GitHub-Benutzername ist. Erstellen Sie einen gh-pages Branch. Dieser Zweig Ihrer Anwendung wird unter https://<username>.github.io verfügbar sein.

Wie bereits erwähnt, sind alle GitHub Pages auf dem Internet öffentlich verfügbar, selbst wenn Sie das Repository auf privat einstellen. Da die Periodendaten mithilfe von localStorage gespeichert werden, ist die Anwendung über die GitHub-URL verfügbar, aber die Benutzerdaten sind nur in dem einen Browser auf dem einen Gerät verfügbar, auf dem die Daten eingegeben wurden. Das direkte Löschen des localStorage, das im Browser erfolgt, löscht alle gespeicherten Daten.

Wenn Sie nicht möchten, dass Ihre PWA auf oberster Ebene ist, können Sie Ihre App so einrichten, dass sie wie in einem Unterverzeichnis erscheint. Sie können entweder ein Unterverzeichnis innerhalb des <username>.github.io Repositorys erstellen oder von Ihrem separaten PWA-Repository veröffentlichen. Durch Konfigurieren einer Veröffentlichungsquelle innerhalb Ihres PWA-Repositories wird Ihre App unter https://<username>.github.io/<repository> sichtbar sein, wobei <repository> der Name des Repositories ist. Sie können GitHub so einstellen, dass Ihre Seite automatisch veröffentlicht wird, wenn Änderungen an einem bestimmten Branch veröffentlicht werden innerhalb dieses Repositories, einschließlich main.

Im Fall der CycleTracker-Demo-App in den verschiedenen Entwicklungsstadien ist das <username> mdn und das Repository ist pwa-examples. Da dieses Repository mehrere PWA-Beispiele enthält, jedes mit Fortschritt auf mehreren Stufen im Entwicklungsprozess, sind die Dateien und daher auch die PWA ein paar Ebenen tief verschachtelt.

Beachten Sie, dass Sie eine benutzerdefinierte Domain für eine GitHub Pages-Seite konfigurieren können.

Wir können eine gestylte, statische Version der CycleTracker-Anwendungsschale betrachten. Jetzt, da wir wissen, wie wir die Anwendung, die wir erstellen werden, anzeigen können, lassen Sie uns mit dem Aufbau beginnen. Als Nächstes erstellen wir app.js, das JavaScript, das unser statisches Design in eine voll funktionsfähige Webanwendung umwandelt, die Daten lokal auf dem Gerät des Benutzers speichert.

• Zurück
• Übersicht: CycleTracker PWA Tutorial
• Weiter