Freigeben über

Temperaturkonverterbeispiel

Das Beispiel für den Temperaturkonverter ist eine progressive Web-App (PWA), die die Grundlagen zum Erstellen einer PWA veranschaulicht. Sie können dieses Beispiel ändern, um mit der Erstellung Einer eigenen PWA zu beginnen.

In diesem Artikel wird beschrieben, wie Sie das Beispiel abrufen, unter Windows installieren, das Beispiel ausführen und ändern. Dieses Beispiel funktioniert mit mehreren Betriebssystemen, einschließlich Windows. Dieser Artikel enthält Die Schritte für Windows. Andere Plattformen weisen ähnliche Schritte auf.

Siehe auch:

Schritt 1: Anzeigen einer Vorschau der App, die in einem Browserfenster ausgeführt wird

So untersuchen Sie die Benutzeroberfläche der App:

  1. Wechseln Sie in Microsoft Edge in einem neuen Fenster oder einer neuen Registerkarte (gehostet auf github.io) zur Live-Web-App für temperaturkonvertierung :

    Die PWA als Web-App im Browser, die von github.io

    Die beispielweise progressive Web-App (PWA) wird zunächst im Browser als Web-App angezeigt, verfügt aber auch über eine Verfügbare App-Schaltfläche (Symbol App verfügbar) in der Adressleiste (klicken Sie noch nicht darauf).

  2. Geben Sie im Textfeld temperatur den Wert 22 ein.

    Die angezeigte Temperatur ändert sich in 71,6 F.

  3. Klicken Sie auf die Dropdownliste aus , und klicken Sie dann außerhalb der Liste.

  4. Klicken Sie auf die Dropdownliste to , und klicken Sie dann außerhalb der Liste.

    Verfügbare Einheiten sind:

    • Celsius
    • Fahrenheit
    • Kelvin

  5. Schließen Sie die Browserregisterkarte für die App.

In einem späteren Schritt wird die App in einem eigenen Fenster ausgeführt, nachdem die beispielweise progressive Web-App (PWA) als lokale App installiert wurde:

Das Beispiel für progressive Web-App (PWA), installiert und wird in einem eigenen Fenster ausgeführt

Das Beispiel ist eine progressive Web-App anstelle einer regulären Website. Daher können Sie die Progressive Web-App (PWA) als App auf dem Gerät installieren, und das App-Fenster enthält dieselbe App-Benutzeroberfläche wie im vollständigen Webbrowser.

Das Fenster der installierten App ist ein browserbasiertes Fenster ohne die meisten Browserbenutzeroberfläche. Die installierte App ist in die Benutzeroberfläche des Geräts integriert, z. B. die Windows-Taskleiste und das Windows-Startmenü.

Die obige instance der Beispiel-App wird unter github.iogehostet. In den folgenden Abschnitten verwenden Sie stattdessen einen lokalen Server, um zu zeigen, wie Sie eine progressive Web-App (PWA) während der Entwicklung lokal testen. Sie greifen stattdessen von Ihrem lokalen Server (localhost) auf die Web-App zu und installieren sie von dort aus auf Ihrem Gerät.

Schritt 2: Installieren von Visual Studio Code

Visual Studio Code ermöglicht das Anzeigen des Beispielcodes, das Ändern des Beispiels und das Erstellen einer eigenen progressiven Web-App (PWA), indem das Beispiel als Ausgangspunkt verwendet wird.

Installieren (oder aktualisieren Sie optional) VS Code wie folgt:

  1. Drücken Sie die Windows-Taste , geben Sie Visual Studio Code ein, und klicken Sie dann auf Öffnen.

  2. Wenn Visual Studio Code nicht installiert ist, wechseln Sie zu Visual Studio Code , und laden Sie es herunter, und installieren Sie es.

Schritt 3: Installieren von Git

Installieren oder aktualisieren Sie Git wie folgt:

  1. Öffnen Sie Visual Studio Code.

  2. Wählen Sie im Menü Ansicht die Option Terminal aus.

  3. Geben Sie den Befehl ein: git -v

    Wenn Git installiert ist, wird eine Versionsnummer angezeigt, z git version 2.51.0.windows.2. B. .

  4. Wechseln Sie unter git-scm.com zu Downloads .

    Notieren Sie sich oben rechts die Neueste Versionsnummer , z. B. 2.51.1.

  5. Wenn Git noch nicht installiert ist oder Sie es aktualisieren möchten, laden Sie die neueste Version von Git unter Downloads unter git-scm.com herunter, und installieren Sie sie. Fahren Sie andernfalls mit dem nächsten Abschnitt weiter unten fort.

  6. Während der Installation können Sie die Standardwerte übernehmen, es wird jedoch empfohlen, den Standard-Editor von vim in Visual Studio Code zu ändern:

    Git-Installationsprogramm mit Visual Studio Code als Standard-Editor ausgewählt

Schritt 4: Installieren von Node.js

Node.js enthält einen Webserver, den Sie zum lokalen Ausführen und Testen des Beispiels verwenden.

Installieren oder aktualisieren Sie Node.js wie folgt:

  1. Öffnen Sie Visual Studio Code.

  2. Wählen Sie im Menü Ansicht die Option Terminal aus.

  3. Geben Sie den Befehl ein: node -v

    Wenn Node.js installiert wurde, wird eine Versionsnummer ausgegeben, z. B. v22.19.0.

  4. Wechseln Sie zu Node.js.

  5. Notieren Sie sich unten links in der Schaltfläche Neueste LTS die Versionsnummer, z. B. v22.20.0.

  6. Wenn Node.js noch nicht installiert ist oder Sie sie aktualisieren möchten, klicken Sie auf die Schaltfläche Node.jsabrufen . Fahren Sie andernfalls mit dem nächsten Abschnitt weiter unten fort.

    Sie gelangen zu einer Seite wie Download Node.js.

  7. Klicken Sie auf die Schaltfläche Windows Installer (.msi).

    Das Fenster Downloads von Microsoft Edge wird geöffnet und zeigt einen Dateinamen wie node-v22.20.0-x64.msian.

  8. Klicken Sie unter dem Dateinamen auf den Link Datei öffnen .

    Das Fenster Node.js Setup-Assistent wird geöffnet.

  9. Klicken Sie auf die Schaltfläche Weiter , und folgen Sie den Anweisungen. Sie können die Standardwerte übernehmen und dann auf die Schaltfläche Installieren klicken.

    Das Fenster Node.js Setup-Assistent wird geschlossen.

  10. Geben Sie im Terminal von VS Code den folgenden Befehl ein: node -v

    Die neueste Versionsnummer wird angezeigt, z. B. v22.20.0.

Schritt 5: Forken und Klonen des Repositorys "MicrosoftEdge/Demos"

Als Nächstes erhalten Sie eine lokale Kopie des Beispielcodes, indem Sie das Microsoft Edge/Demos-Repository forkingen. Da Sie nicht über die Berechtigung verfügen, Commits direkt an das Open-Source-Repository des Demos zu pushen, forken Sie das Demos-Repository, um Eine eigene Kopie des Repositorys zu erstellen, anstatt das Demos-Repository zu klonen .

Möglicherweise können Sie den Mainbranch des Demos-Repositorys herunterladen und die Dateien im Branch "main" bearbeiten, anstatt das Repository zu forkieren und zu klonen und dann einen Arbeitsbranch (test1) zu erstellen, in dem die Dateien bearbeitet werden. In diesem Artikel wird die komplexere, aber flexiblere Methode gezeigt: Forking des Repositorys.

Forken und klonen Sie das MicrosoftEdge/Demos-Repository wie folgt:

  1. Drücken Sie Windows+E.

    Explorer wird geöffnet.

    Überprüfen Sie, ob das Demos-Repository geklont wurde:

  2. Navigieren Sie zu der Stelle, an der das Repository geklont werden soll, z. B.:

    C:\Users\localAccount\GitHub\

    Wenn das Repository noch nicht geklont wurde, z C:\Users\localAccount\GitHub\Demos\. B. , führen Sie die folgenden Schritte aus. Fahren Sie andernfalls mit dem nächsten Abschnitt fort.

    Forken Sie das Repository:

  3. Öffnen Sie das Repository MicrosoftEdge/Demos in einem neuen Fenster oder einer neuen Registerkarte.

  4. Klicken Sie oben rechts auf den Pfeil nach unten auf der Schaltfläche Fork , und wählen Sie dann Create a new fork (Neuen Fork erstellen) aus.

    Weitere Informationen finden Sie unter Forken eines Repositorys in Forken eines Repositorys in der GitHub-Dokumentation.

  5. Klicken Sie auf die Schaltfläche Create fork (Fork erstellen ).

    Klonen Sie Ihren Fork auf das lokale Laufwerk:

  6. Navigieren Sie auf GitHub zu Ihrem Fork des Repositorys MicrosoftEdge/Demos .

  7. Klicken Sie über der Liste der Dateien auf die Schaltfläche Code .

  8. Klicken Sie auf der Registerkarte HTTPS auf die Schaltfläche In Zwischenablage kopieren (Symbol ").

  9. Öffnen Sie Visual Studio Code.

  10. Wählen Sie im Menü Ansicht die Option Terminal aus.

  11. Wechseln Sie zu dem Verzeichnis, in dem Sie das Demos-Repository klonen möchten:

    cd ~/GitHub

    Oder geben Sie den folgenden Befehl ein, indem Sie Ihr lokales Konto angeben:

    cd c:/users/localAccount/GitHub/

  12. Geben Sie ein git clone, und fügen Sie dann die URL ein, die Sie zuvor kopiert haben. Es sieht wie folgt aus, mit Ihrem GitHub-Benutzernamen anstelle von YOUR-USERNAME:

    git clone https://github.com/YOUR-USERNAME/Demos.git

  13. Drücken Sie EINGABE.

    Ein lokaler Klon Ihres gespaltenen Demos-Repositorys wird erstellt.

Siehe auch:

Schritt 6: Ausführen der PWA als Web-App auf Ihrem lokalen Webserver

Als Nächstes führen Sie die Beispiel-PWA (Progressive Web App) auf Ihrem lokalen Webserver in Microsoft Edge aus und testen sie. Sie verwenden http-server, einen lokalen Entwicklungswebserver, der in Node.js ausgeführt werden kann.

Beim Entwickeln oder Testen einer Website oder App, einschließlich einer PWA, können Sie einen lokalen Webserver verwenden. Wenn die App jedoch für Benutzer bereit ist, stellen Sie die App mithilfe eines Webhostinganbieters im Web bereit. Wie eine reguläre Website oder App wird auch eine PWA mithilfe eines Webservers an Benutzer verteilt.

Wechseln Sie zum /temperature-converter/ Verzeichnis des geklonten Demos-Repositorys, und starten Sie den http-server wie folgt von dort aus:

  1. Öffnen Sie Visual Studio Code.

  2. Wählen Sie im Menü Datei die Option Ordner öffnen aus.

    Das Dialogfeld Ordner öffnen wird geöffnet.

  3. Navigieren Sie zum geklonten Demos-Repositoryordner, z C:\Users\localAccount\GitHub\Demos\. B. , wählen Sie den \temperature-converter\ ordner darin aus, und klicken Sie dann auf die Schaltfläche Ordner auswählen .

  4. Wählen Sie im Menü Ansicht die Option Terminal aus.

    Der Bereich Terminal wird mit der Eingabeaufforderung geöffnet Demos\temperature-converter\, z C:\users\localAccount\GitHub\Demos\temperature-converter. B. .

  5. Geben Sie den folgenden Befehl ein:

    npx http-server

    Der lokale Entwicklungswebserver wird mit dem http-server NPM-Paket gestartet:

    Ausgabe des npx-Befehls

  6. Wenn der Fehler "Die Skriptausführung ist deaktiviert" angezeigt wird (wenn das Terminal von VS Code PowerShell verwendet), geben Sie den PowerShell-Befehl für die Ausführungsrichtlinie ein, und führen Sie dann den npx-Befehl erneut aus:

    Set-ExecutionPolicy -ExecutionPolicy Bypass -Scope CurrentUser
npx http-server

    Beispiel für die Ausgabe:

    Need to install the following packages:
http-server@14.1.1
Ok to proceed? (y)

  7. Drücken Sie bei Bedarf Y und dann die EINGABETASTE.

    Die Ausgabe wird angezeigt, z. B.:

    Starting up http-server, serving ./
...
Available on:
  http://10.0.1.2:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

  8. Wechseln Sie in Microsoft Edge zu http://localhost:8080 (oder zu einer entsprechenden URL, die im Terminal vom npx http-server Befehl ausgegeben wurde).

    Die Temperaturkonvertierer-App wird im Browser angezeigt:

    Die Temperaturkonvertierer-App im Browser unter localhost

Schritt 7: Installieren der PWA von Ihrem localhost-Webserver als lokale App

Installieren Sie die Beispiel-PWA (Progressive Web App) von Ihrem localhost-Webserver als App unter Windows wie folgt:

  1. Klicken Sie in der Adressleiste auf die verfügbare App. Schaltfläche "Temperaturkonverter installieren" (Symbol

    Das Dialogfeld App installieren wird geöffnet:

    Die Installationsaufforderung

  2. Klicken Sie auf die Schaltfläche Installieren .

    Die App wird lokal installiert. Das Dialogfeld App installiert wird in der App geöffnet:

    Dialogfeld

  3. Klicken Sie auf die Schaltfläche Zulassen .

    In einem Dialogfeld für Windows-Apps wird gefragt: "Möchten Sie den Temperaturkonvertor an Die Taskleiste anheften? Diese Anforderung stammt vom Temperaturkonvertor."

  4. Klicken Sie auf die Schaltfläche Ja .

    Das Symbol der Temperaturkonvertierer-App (Das Symbol ) wird auf der Windows-Taskleiste angezeigt.

    Die Temperaturkonvertierer-App wird in einem eigenen App-Fenster angezeigt:

    Die installierte Temperaturkonvertierer-App, die in einem eigenen Fenster ausgeführt wird

    Das Fenster ist ein Browserfenster ohne den großteil der Browser-Benutzeroberfläche.

  5. Schließen Sie das App-Fenster Temperaturkonverter .

Schritt 8: Öffnen der installierten App

Führen Sie die Beispiel-PWA (Progressive Web App) als lokale App auf dem Gerät aus.

  1. Drücken Sie die Windows-Taste , beginnen Sie mit der Eingabe von Temperaturkonverter, und klicken Sie dann auf Öffnen.

    Die installierte Temperaturkonverter-App wird in einem eigenen Fenster geöffnet.

    Da Sie die App über localhostinstalliert haben, wird beim Starten der App auf der rechten Seite der Titelleiste für einige Sekunden localhost:8080 angezeigt:

    Das installierte Beispiel für progressive Web-App (PWA) bei Installation von localhost

    Wenn Sie die App vom github.io Server aus installiert hätten, würde beim Starten der App auf der rechten Seite der Titelleiste stattdessen einige Sekunden lang microsoftedge.github.io angezeigt:

    Das installierte Beispiel für progressive Web-App (PWA), wenn sie von github.io Server installiert wird

    Sie können die installierte App auch auf andere Arten öffnen, die vom Gerät unterstützt werden, z. B. über die Schaltfläche "Temperaturkonvertierer), die an die Windows-Taskleiste angeheftet ist.

  2. Geben Sie im Textfeld temperatur den Wert 22 ein.

    Die angezeigte Temperatur wird auf 71,6 F aktualisiert.

  3. Klicken Sie auf die Dropdownlisten from und to .

    Verfügbare Einheiten sind:

    • Celsius
    • Fahrenheit
    • Kelvin

Schritt 9: Untersuchen des Service Workers, der die Offlinezwischenspeicherung verarbeitet

Das lokale App-Fenster für eine progressive Web-App (PWA) ist ein browserbasiertes Fenster, sodass Microsoft Edge DevTools für die Arbeit mit der PWA verwendet werden kann.

Vergewissern Sie sich, dass der Service Worker (sw.js) ausgeführt wird, wenn Sie die PWA wie folgt als lokale App öffnen:

  1. Öffnen Sie die installierte Temperaturkonverter-App .

  2. Klicken Sie mit der rechten Maustaste in das App-Fenster (unterhalb der Titelleiste), und wählen Sie dann Untersuchen aus.

    DevTools wird in einem separaten Fenster geöffnet. Abgedockt. (Andere Andockoptionen sind abgeblendet und nicht verfügbar.) Das App-Fenster ist ein Browserfenster, das den DevTools Inspect-Befehl enthält.

  3. Wählen Sie in DevTools das Tool Anwendung (Anwendungssymbol) aus.

  4. Wählen Sie in der Struktur auf der linken Seite im Abschnitt Anwendung die Option Service Worker aus.

    Informationen zum Service Worker werden angezeigt:

    Die PWA als installierte lokale App, wobei DevTools den Bereich Service Worker anzeigt, wobei der sw.js Worker ausgeführt wird.

    Die Quelle des Dienstmitarbeiters ist sw.js, mit dem Statusaktiviert und wird ausgeführt.

  5. Erweitern Sie in der Struktur auf der linken Seite im Abschnitt Speicher , Hauptspeicher, und wählen Sie dann temperature-converter-v1 aus:

    Installierte App: DevTools-Anwendungstool >> Cachespeicher mit zwischengespeicherten Ressourcen

    Der Service Worker-Cache wird angezeigt. Alle Ressourcen, die vom Service Worker zwischengespeichert werden (oder automatisch vom Browser zwischengespeichert werden), werden aufgelistet:

    • / (index.html) – Die HTML-Webseite der App, die das Layout von Steuerelementen definiert.
    • /converter.css – Die Formatierung für die Webseite der App.
    • /converter.js – Die JavaScript-Datei, die die App-Logik enthält.
    • /icon512.png – Die Bilddatei des App-Symbols, die die App darstellt.
    • /manifest.json – Das App-Manifest, das grundlegende Informationen zur App enthält, das vom Betriebssystem des Geräts verwendet werden kann.

    Der Service Worker fügt dem Cache drei Dateien explizit hinzu (.html, .cssund .js). Das Symbol (.png) und das Manifest (.json) werden automatisch vom Browser zwischengespeichert.

Schritt 10: Verwenden von DevTools, um die Internetverbindung zu deaktivieren und die PWA offline zu testen

Probieren Sie die progressive Web-App (PWA) wie folgt als Offline-App aus:

  1. Öffnen Sie im Fenster DevTools das Tool Netzwerk (Das Netzwerksymbol).

  2. Ändern Sie oben im Menü Drosselung rechts neben dem Kontrollkästchen Cache deaktivieren von Keine Drosselung in Offline:

    Das DevTools-Fenster, in dem angezeigt wird, wo der Drosselungswert auf Offline umgestellt werden soll

    Auf der Registerkarte Netzwerk wird ein Warnsymbol hinzugefügt, das Sie an diese Drosselung erinnert.

  3. Klicken Sie im Fenster Temperaturkonvertierer mit der rechten Maustaste, und wählen Sie dann Aktualisieren aus.

  4. Geben Sie im Textfeld temperatur den Wert 22 ein.

    Die angezeigte Temperatur ändert sich in 71,6 F. Die App wird weiterhin ordnungsgemäß angezeigt und funktioniert weiterhin ordnungsgemäß, indem lokal zwischengespeicherte Ressourcen verwendet werden, die vom Service Worker verwaltet werden.

  5. Ändern Sie im Fenster DevTools im Menü Drosselung rechts neben dem Kontrollkästchen Cache deaktivieren von Offline zurück in Keine Drosselung.

    Das Symbol für die Drosselungswarnung wird von der Registerkarte Netzwerk entfernt.

  6. Schließen Sie das Fenster DevTools.

  7. Schließen Sie das App-Fenster Temperaturkonverter .

Die gleiche Verwendung von DevTools funktioniert auch, wenn sich die App in Microsoft Edge als Web-App und nicht als installierte App befindet. Weitere Informationen finden Sie unter Emulate offline in der Referenz zu Netzwerkfeatures.

Schritt 11: Deinstallieren der installierten App

Deinstallieren Sie die Progressive Web App (PWA) wie folgt:

  1. Klicken Sie auf die Schaltfläche Temperaturkonverter , die auf der Windows-Taskleiste angeheftet ist.

    Die installierte Temperaturkonverter-App wird geöffnet.

  2. Klicken Sie in der Titelleiste auf die Schaltfläche Einstellungen und mehr (Symbol ), und klicken Sie dann auf App-Einstellungen.

    In Microsoft Edge wird die Registerkarte Apps geöffnet (edge://apps), auf der Details zur Temperaturkonverter-App angezeigt werden:

    Schaltfläche

  3. Klicken Sie unten auf die Schaltfläche Deinstallieren .

    Das Dialogfeld App von Microsoft Edge auf allen synchronisierten Geräten deinstallieren? wird geöffnet.

  4. Aktivieren Sie das Kontrollkästchen App-Verlauf und -Daten löschen , und klicken Sie dann auf die Schaltfläche Deinstallieren .

Deinstallieren einer lokalen App über das Windows-Startmenü

Hinweis: Als Beispiel für die Betriebssystemintegration können Sie die App wie folgt über das Windows-Startmenü deinstallieren:

  1. Drücken Sie die Windows-Taste .

  2. Beginnen Sie mit der Eingabe von "Temperature Converter".

  3. Klicken Sie auf Deinstallieren:

    Windows-Startmenü mit dem Befehl

Deinstallieren einer lokalen App durch Starten von Microsoft Edge

Hinweis: Alternativ können Sie die beispielweise progressive Web-App (PWA) deinstallieren, indem Sie wie folgt mit Microsoft Edge beginnen:

  1. Wählen Sie in Microsoft Edge Einstellungen und mehr (...) aus. >Weitere Tools>Apps>Anzeigen von Apps.

    Das Dialogfeld Apps wird in Microsoft Edge geöffnet, in dem alle installierten PWAs aufgelistet sind:

    Edgeeinstellungen > Anzeigen von Apps, die den Temperaturkonverter auflisten

  2. Klicken Sie mit der rechten Maustaste auf den Karte Temperaturkonverter, und klicken Sie dann auf App verwalten.

    Die Seite Alle Apps/Temperaturkonverter wird unter edge://appsgeöffnet.

  3. Klicken Sie unten auf die Schaltfläche Deinstallieren .

Fahren Sie mit den folgenden Schritten fort.

Schritt 12: Ändern des Beispiels

Sie können das Beispiel als Ausgangspunkt für Ihre eigene progressive Web-App (PWA) ändern. Sie ändern den Namen der App in einem Arbeitsbranch des Repositorys von "Temperaturkonverter" in "TC" und installieren dann die geänderte App lokal.

Erstellen Sie einen Arbeitsbranch, und wechseln Sie wie folgt zu diesem Branch:

  1. Öffnen Sie Visual Studio Code.

    Öffnen des Ordners in VS Code

  2. Wählen Sie im Menü Datei die Option Ordner öffnen aus.

    Das Dialogfeld Ordner öffnen wird geöffnet.

  3. Navigieren Sie zum geklonten Demos-Repositoryordner, z C:\Users\localAccount\GitHub\Demos\. B. , wählen Sie den temperature-converter darin enthaltenen Ordner aus, und klicken Sie dann auf die Schaltfläche Ordner auswählen .

  4. Öffnen \temperature-converter\index.htmlSie im bereich Explorer .

    Der Mainbranch unten links in VS Code

    In der unteren linken Ecke von Visual Studio Code ist der Mainbranch angegeben.

    Erstellen eines Arbeitsbranchs und Wechseln zu diesem Branch

  5. Wählen Sie in Visual Studio Code im Menü Ansicht die Option Terminal aus.

  6. Drücken Sie STRG+C.

    Der localhost-Webserver (http-server) wird beendet, wenn er ausgeführt wurde. Die Eingabeaufforderung zeigt den aktuellen Pfad an, z. B.: PS C:\Users\localAccount\GitHub\Demos\temperature-converter>

    Es ist nicht erforderlich, den Server zu beenden, um den Code zu ändern und das Ergebnis anzuzeigen. Wir beenden den Server nur vorübergehend im Terminal , um zur Eingabeaufforderung zurückzukehren, um einige Git-Befehle einzugeben.

  7. Geben Sie den folgenden Befehl ein, um einen Arbeitsbranch des Repositorys zu erstellen und zu diesem zu wechseln:

    git checkout -b test1

    Wenn der Branch bereits vorhanden ist, gibt der Befehl folgendes aus: "Fatal: a branch named 'test1' already exists".

  8. Wenn der Branch bereits vorhanden ist, geben Sie den folgenden Befehl ein, um zum Branch zu wechseln:

    git checkout test1

    Beispielausgabe: Switched to a new branch 'test1'

    In der unteren linken Ecke von Visual Studio Code ändert sich der Branch von main in test1.

  9. Schließen Sie den Bereich Terminal .

    In der unteren linken Ecke von Visual Studio Code wird der Branch test1 angezeigt:

    Der branch

    Ändern der Dateien

  10. Öffnen /temperature-converter/index.htmlSie in Visual Studio Code im Bereich Explorer .

  11. index.htmlÄndern Sie in wie folgt den Namen der App in zwei Zeilen von "Temperaturkonverter" in "TC":

    Ändern von:

    <title>Temperature converter</title>
<meta name="application-name" content="Temperature converter">

    bis:

    <title>TC</title>
<meta name="application-name" content="TC">

  12. Speichern Sie die Datei.

  13. Öffnen /temperature-converter/manifest.jsonSie im bereich Explorer .

  14. manifest.jsonÄndern Sie in wie folgt den Namen der App in zwei Zeilen von "Temperaturkonverter" in "TC":

    Ändern von:

    "name": "Temperature converter",
"short_name": "Temperature converter",

    bis:

    "name": "TC",
"short_name": "TC",

  15. Speichern Sie die Datei.

Schritt 13: Anzeigen der geänderten App im Browser

Zeigen Sie die geänderte App im Browser wie folgt an:

  1. Wählen Sie in Visual Studio Code im Menü Ansicht die Option Terminal aus.

    Starten des Servers

    Wir haben den Webserver zuvor im Terminal beendet, nur um einige Git-Befehle einzugeben, um zu einem Arbeitsbranch zu wechseln.

  2. Geben Sie den folgenden Befehl ein:

    npx http-server

    Der lokale Entwicklungswebserver wird erneut gestartet.

    Anzeigen der Web-App

  3. Wechseln Sie in Microsoft Edge zu http://localhost:8080 (oder zu einer entsprechenden URL, die im Terminal vom npx http-server Befehl ausgegeben wurde).

  4. Aktualisieren (F5) der Webseite.

    Dies führt nicht zum gewünschten Ergebnis. Aktualisieren lädt die Webseite aus dem Cache des Browsers neu, sodass Sie die App sehen, die zuvor unter dieser URL zwischengespeichert wurde (der Registerkartentitel lautet Temperaturkonverter).

  5. Feste Aktualisierung (UMSCHALT+F5) der Webseite.

    Die harte Aktualisierung zeigt den aktuellen Inhalt direkt vom Webserver an.

    Der Registerkartentitel ändert sich von Temperaturkonverter in TC:

    Die App wurde im Browser in TC umbenannt

Schritt 14: Erneutes Installieren des geänderten Beispiels als lokale App

Installieren Sie die geänderte App localhost im Browser wie folgt auf dem Gerät:

  1. Weiter oben: Klicken Sie in Microsoft Edge in der Adressleiste auf die verfügbare App. Installieren Sie TC (Die ) schaltfläche.

    Das Dialogfeld TC-App installieren wird im Browser geöffnet:

    Dialogfeld

  2. Klicken Sie auf die Schaltfläche Installieren .

    Die geänderte App wird lokal installiert. Das Dialogfeld App installiert wird in der App geöffnet:

    Dialogfeld

  3. Klicken Sie auf die Schaltfläche Zulassen .

    In einem Windows-Apps-Dialogfeld wird gefragt: "Möchten Sie TC an Ihre Taskleiste anheften? Diese Anforderung stammt von TC."

  4. Klicken Sie auf die Schaltfläche Ja .

    Das Tc-App-Symbol (Das TC-Symbol in der Windows-Taskleiste) wird auf der Windows-Taskleiste angezeigt.

    Die TC-App wird in einem eigenen Fenster angezeigt, und die Titelleiste lautet jetzt TC:

    Die installierte TC-App, die in einem eigenen Fenster ausgeführt wird

Schritt 15: Deinstallieren der geänderten lokalen App

Deinstallieren Sie die geänderte lokale App wie folgt:

  1. Wählen Sie im Tc-App-Fenster Einstellungen und mehr (...) aus. >App-Einstellungen.

    In Microsoft Edge wird die Registerkarte Apps geöffnet, auf der Details zur TC-App angezeigt werden.

  2. Klicken Sie unten auf die Schaltfläche Deinstallieren .

    Das Dialogfeld App von Microsoft Edge auf allen synchronisierten Geräten deinstallieren? wird geöffnet.

  3. Aktivieren Sie das Kontrollkästchen App-Verlauf und -Daten löschen , und klicken Sie dann auf die Schaltfläche Deinstallieren .

Schritt 16: Beenden des Entwicklungswebservers

  1. Wählen Sie in Visual Studio Code im Menü Ansicht die Option Terminal aus.

  2. Drücken Sie STRG+C.

    Der Server wird mit der Ausgabemeldung beendet: http-server stopped.

Dies ist das Ende der Schritte für das Beispiel.

Beschleunigen des Änderungs-/Neuinstallationszyklus

Sie können einige der oben genannten Schritte bei jeder Änderung der App überspringen, je nachdem, welche Dateien Sie ändern:

  • Wenn Sie eine HTML-Datei, eine CSS-Datei oder die JavaScript-Hauptdatei ändern, können Sie die Deinstallation und erneute Installation der App überspringen. Das Aktivieren des Caches und das Aktualisieren der Seite reicht aus, um HTML-, CSS- und JavaScript-Änderungen neu zu laden.

  • Wenn Sie die Manifestdatei ändern, müssen Sie die App deinstallieren und neu installieren.

PWA-Schaltfläche in der Adressleiste

Wenn Sie nach der Installation der App im Browser zur Web-App wechseln, hat sich die PWA-Schaltfläche in der Adressleiste von einer Schaltfläche "App verfügbar in eine Schaltfläche In App öffnen (In App öffnen symbol) geändert.

Wenn Sie auf die Schaltfläche In App öffnen (Symbol klicken, wird das Dialogfeld Temperaturkonverter öffnen im Browser geöffnet:

Dialogfeld

Nächste Schritte

Als Nächstes haben Sie folgende Möglichkeiten:

  • Untersuchen Sie den Code; siehe Temperaturkonverter-Quelldateien.

  • Nehmen Sie zusätzliche geringfügige Änderungen am Code des Beispiels vor.

  • Kopieren Sie das gesamte Beispielverzeichnis /Demos/temperature-converter/ , fügen Sie es ein, und ändern Sie den Code, um Eine eigene progressive Web-App (PWA) zu erstellen.

Siehe auch

Localhost:

GitHub:

VS Code:

Einguss:

Node.js:

  • Last updated on