Exemple de convertisseur de température

L’exemple convertisseur de température est une application web progressive (PWA) qui montre les bases de la création d’une PWA. Vous pouvez modifier cet exemple pour commencer à créer votre propre PWA.

Cet article explique comment obtenir l’exemple, l’installer sur Windows, exécuter l’exemple et le modifier. Cet exemple fonctionne avec plusieurs systèmes d’exploitation, y compris Windows. Cet article décrit les étapes pour Windows . d’autres plateformes ont des étapes similaires.

Voir aussi :

• Commencez à développer une PWA.

Étape 1 : Afficher un aperçu de l’application en cours d’exécution dans une fenêtre de navigateur

Pour examiner l’interface utilisateur de l’application :

1. Dans Microsoft Edge, accédez à l’exemple d’application web convertisseur de température en direct dans une nouvelle fenêtre ou un nouvel onglet (hébergé à github.io) :

   

   L’exemple d’application web progressive (PWA) est initialement affiché dans le navigateur, sous la forme d’une application web, mais a également un bouton Application disponible () dans la barre d’adresse (ne cliquez pas encore dessus).

2. Dans la zone de texte température , tapez 22.

   La température affichée passe à 71,6 F.

3. Cliquez sur la liste déroulante dans la liste déroulante, puis cliquez en dehors de celle-ci.

4. Cliquez sur la liste déroulante à , puis cliquez en dehors de celle-ci.

   Les unités disponibles sont les suivantes :

   • Celsius
   • Fahrenheit
   • Kelvin

5. Fermez l’onglet du navigateur de l’application.

Dans une étape ultérieure, une fois que l’exemple d’application web progressive (PWA) est installé en tant qu’application locale, l’application s’exécute dans sa propre fenêtre :

L’exemple est une application web progressive, plutôt qu’un site web standard. Par conséquent, vous pouvez installer l’application web progressive (PWA) en tant qu’application sur l’appareil, et la fenêtre de l’application contient la même interface utilisateur d’application que dans le navigateur web complet.

La fenêtre de l’application installée est une fenêtre basée sur un navigateur, sans la plupart de l’interface utilisateur du navigateur. L’application installée est intégrée à l’interface utilisateur de l’appareil, comme la barre des tâches Windows et le menu Démarrer de Windows.

La instance ci-dessus de l’exemple d’application est hébergée à l’adresse github.io. Dans les sections ci-dessous, vous utilisez plutôt un serveur local pour montrer comment tester localement une application web progressive (PWA) lors de son développement. Vous allez accéder à l’application web à partir de votre serveur local (localhost) et l’installer sur votre appareil à partir de là.

Étape 2 : Installer Visual Studio Code

Visual Studio Code permet d’afficher l’exemple de code, de modifier l’exemple et de créer votre propre application web progressive (PWA) en utilisant l’exemple comme point de départ.

Installez (ou mettez à jour éventuellement) VS Code, comme suit :

1. Appuyez sur la touche Windows, entrez Visual Studio Code, puis cliquez sur Ouvrir.

2. Si Visual Studio Code n’est pas installé, accédez à Visual Studio Code, puis téléchargez-la et installez-la.

Étape 3 : Installer git

Installez ou mettez à jour git, comme suit :

1. Ouvrez Visual Studio Code.

2. Dans le menu Affichage , sélectionnez Terminal.

3. Entrez la commande : git -v

   Si git est installé, un numéro de version s’affiche, tel que git version 2.51.0.windows.2.

4. Accédez à Téléchargements à git-scm.com.

   Dans le coin supérieur droit, notez le numéro de version la plus récente , par exemple 2.51.1.

5. Si git n’est pas encore installé ou si vous souhaitez le mettre à jour, téléchargez et installez la dernière version de git, à partir de Téléchargements à git-scm.com. Sinon, passez à la section suivante, ci-dessous.

6. Pendant l’installation, vous pouvez accepter les valeurs par défaut, sauf qu’il est recommandé de changer l’éditeur par défaut de vim en Visual Studio Code :

   

Étape 4 : Installer Node.js

Node.js inclut un serveur web que vous utiliserez pour exécuter et tester l’exemple localement.

Installez ou mettez à jour Node.js, comme suit :

1. Ouvrez Visual Studio Code.

2. Dans le menu Affichage , sélectionnez Terminal.

3. Entrez la commande : node -v

   Si Node.js a été installé, un numéro de version est généré, par exemple v22.19.0.

4. Accédez à Node.js.

5. Dans le coin inférieur gauche, dans le bouton LTS le plus récent , notez le numéro de version, par exemple v22.20.0.

6. Si Node.js n’est pas encore installé ou si vous souhaitez la mettre à jour, cliquez sur le bouton Obtenir Node.js . Sinon, passez à la section suivante, ci-dessous.

   Vous vous retrouvez sur une page telle que Télécharger Node.js.

7. Cliquez sur le bouton Windows Installer (.msi).

   La fenêtre Téléchargements de Microsoft Edge s’ouvre et affiche un nom de fichier tel que node-v22.20.0-x64.msi.

8. Cliquez sur le lien Ouvrir le fichier sous le nom du fichier.

   La fenêtre Assistant InstallationNode.js s’ouvre.

9. Cliquez sur le bouton Suivant , puis suivez les invites. Vous pouvez accepter les valeurs par défaut, puis cliquer sur le bouton Installer .

   La fenêtre de l’Assistant InstallationNode.js se ferme.

10. Dans le terminal de VS Code, entrez la commande : node -v

    Le numéro de version le plus récent s’affiche, par exemple v22.20.0.

Étape 5 : dupliquer et cloner le dépôt « MicrosoftEdge / Demos »

Ensuite, vous obtiendrez une copie locale de l’exemple de code, en effectuant une duplication du référentiel Microsoft Edge/Demos. Étant donné que vous ne disposez pas des autorisations nécessaires pour envoyer directement des commits au dépôt open source Demos, vous allez dupliquer le dépôt Demos pour créer votre propre copie du dépôt, au lieu de cloner le dépôt Demos.

Vous pourrez peut-être télécharger la branche « main » du dépôt Demos et modifier les fichiers dans la branche « main », plutôt que de duquer et de cloner le dépôt, puis de créer une branche de travail (test1) dans laquelle modifier les fichiers. Cet article présente la méthode la plus complexe mais flexible : la duplication du référentiel.

Dupliquer et cloner le dépôt MicrosoftEdge/Demos , comme suit :

1. Appuyez sur Windows+E.

   Explorateur de fichiers s’ouvre.

   Vérifiez si le dépôt Demos a été cloné :

2. Accédez à l’emplacement où vous souhaitez que le référentiel soit cloné, par exemple :

   C:\Users\localAccount\GitHub\

   Si le référentiel n’a pas encore été cloné, par C:\Users\localAccount\GitHub\Demos\exemple , procédez comme suit ; sinon, passez à la section suivante.

   Dupliquer le dépôt :

3. Ouvrez le dépôt MicrosoftEdge /Demos dans une nouvelle fenêtre ou un nouvel onglet.

4. Dans le coin supérieur droit, cliquez sur la flèche vers le bas du bouton Dupliquer , puis sélectionnez Créer une duplication.

   Pour plus d’informations, consultez Duplication d’un dépôt dans Fork a repository in GitHub Docs.

5. Cliquez sur le bouton Créer une duplication .

   Clonez votre duplication sur le lecteur local :

6. Sur GitHub, accédez à votre duplication (fork) du référentiel MicrosoftEdge/Demos .

7. Au-dessus de la liste des fichiers, cliquez sur le bouton Code .

8. Sous l’onglet HTTPS , cliquez sur le bouton Copier dans le Presse-papiers ().

9. Ouvrez Visual Studio Code.

10. Dans le menu Affichage , sélectionnez Terminal.

11. Accédez au répertoire dans lequel vous souhaitez cloner le dépôt Demos :

    cd ~/GitHub
    

    Vous pouvez également entrer la commande suivante, en spécifiant votre compte local :

    cd c:/users/localAccount/GitHub/
    

12. Tapez git clone, puis collez l’URL que vous avez copiée précédemment. Il ressemble à ceci, avec votre nom d’utilisateur GitHub au lieu de VOTRE-NOM D’UTILISATEUR :

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

13. Appuyez sur Entrée.

    Un clone local de votre dépôt Demos dupliqué est créé.

Voir aussi :

• Dupliquer un dépôt
  • Duplication d’un dépôt dans Dupliquer un dépôt.
  • Clonage de votre dépôt dupliqué dans Dupliquer un dépôt.
• Clonage d’un dépôt

Étape 6 : Exécuter la PWA en tant qu’application web sur votre serveur web local

Ensuite, vous allez exécuter et tester l’exemple d’application web progressive (PWA) sur votre serveur web local, dans Microsoft Edge. Vous allez utiliser http-server, un serveur web de développement local qui peut être exécuté dans Node.js.

Lors du développement ou du test d’un site web ou d’une application, y compris une application PWA, vous pouvez utiliser un serveur web local. Toutefois, lorsque l’application est prête pour les utilisateurs, vous la déployez sur le web à l’aide d’un fournisseur d’hébergement web. À l’instar d’un site web ou d’une application standard, une PWA est distribuée aux utilisateurs à l’aide d’un serveur web.

Accédez au /temperature-converter/ répertoire du référentiel Demos cloné, puis démarrez le http-server à partir de là, comme suit :

1. Ouvrez Visual Studio Code.

2. Dans le menu Fichier , sélectionnez Ouvrir le dossier.

   La boîte de dialogue Ouvrir le dossier s’ouvre.

3. Accédez au dossier de dépôt Demos cloné, par C:\Users\localAccount\GitHub\Demos\exemple , sélectionnez le \temperature-converter\ dossier qu’il contient, puis cliquez sur le bouton Sélectionner un dossier .

4. Dans le menu Affichage , sélectionnez Terminal.

   Le volet Terminal s’ouvre, avec l’invite à Demos\temperature-converter\, par C:\users\localAccount\GitHub\Demos\temperature-converterexemple .

5. Entrez la commande suivante :

   npx http-server
   

   Le serveur web de développement local démarre à l’aide du http-server package NPM :

   

6. Si vous obtenez une erreur « L’exécution des scripts est désactivée » (si le terminal de VS Code utilise PowerShell), entrez la commande PowerShell de stratégie d’exécution, puis réexécutez la commande npx :

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

   Exemple de sortie :

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

7. Si nécessaire, appuyez sur Y , puis sur Entrée.

   La sortie s’affiche, par exemple :

   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. Dans Microsoft Edge, accédez à http://localhost:8080 (ou une URL équivalente qui a été générée dans le terminal, à partir de la npx http-server commande ).

   L’application de conversion de température s’affiche dans le navigateur :

   

Étape 7 : Installer la PWA à partir de votre serveur web localhost en tant qu’application locale

Installez l’exemple d’application web progressive (PWA) à partir de votre serveur web localhost en tant qu’application sur Windows, comme suit :

1. Dans la barre d’adresse, cliquez sur l’application disponible. Bouton Installer le convertisseur de température (

   Une boîte de dialogue Installer l’application s’ouvre :

   

2. Cliquez sur le bouton Installer .

   L’application est installée localement. La boîte de dialogue Application installée s’ouvre dans l’application :

   

3. Cliquez sur le bouton Autoriser .

   Une boîte de dialogue Applications Windows demande « Voulez-vous épingler le convertisseur de température à votre barre des tâches ? Cette requête provient du convertisseur de température. »

4. Cliquez sur le bouton Oui .

   L’icône de l’application convertisseur de ) s’affiche dans la barre des tâches Windows.

   L’application converteur Temperature s’affiche dans sa propre fenêtre d’application :

   

   La fenêtre est une fenêtre de navigateur sans la plupart de l’interface utilisateur du navigateur.

5. Fermez la fenêtre de l’application Convertisseur de température .

Étape 8 : Ouvrir l’application installée

Exécutez l’exemple d’application web progressive (PWA) en tant qu’application locale sur l’appareil.

1. Appuyez sur la touche Windows , commencez à taper Convertisseur de température, puis cliquez sur Ouvrir.

   L’application Convertisseur de température installée s’ouvre dans sa propre fenêtre.

   Étant donné que vous avez installé l’application à partir de localhost, lorsque vous démarrez l’application, le côté droit de la barre de titre affiche localhost :8080 pendant quelques secondes :

   

   Si vous aviez installé l’application à partir du github.io serveur, lorsque vous la démarrez, le côté droit de la barre de titre affiche plutôt microsoftedge.github.io pendant quelques secondes :

   

   Vous pouvez également ouvrir l’application installée par d’autres méthodes prises en charge par l’appareil, telles que le bouton Convertisseur de température () épinglé à la barre des tâches Windows.

2. Dans la zone de texte température , entrez 22.

   La température affichée est mise à jour à 71,6 F.

3. Cliquez sur les listes déroulantes de et vers .

   Les unités disponibles sont les suivantes :

   • Celsius
   • Fahrenheit
   • Kelvin

Étape 9 : Examiner le service Worker qui gère la mise en cache hors connexion

La fenêtre d’application locale d’une application web progressive (PWA) est une fenêtre basée sur un navigateur, de sorte que Microsoft Edge DevTools peut être utilisé pour travailler avec la PWA.

Vérifiez que le service Worker (sw.js) est en cours d’exécution lorsque vous ouvrez la PWA en tant qu’application locale, comme suit :

1. Ouvrez l’application Convertisseur de température installée.

2. Cliquez avec le bouton droit dans la fenêtre de l’application (sous la barre de titre), puis sélectionnez Inspecter.

   DevTools s’ouvre dans une fenêtre distincte ; non chaussé. (Les autres options d’ancrage sont grisées et non disponibles.) La fenêtre d’application est une fenêtre de navigateur qui inclut la commande DevTools Inspect .

3. Dans DevTools, sélectionnez l’outil Application ().

4. Dans l’arborescence de gauche, dans la section Application , sélectionnez Service Workers.

   Des informations sur le service Worker s’affichent :

   

   La source du worker de service est sw.js, avec l’étatactivé et est en cours d’exécution.

5. Dans l’arborescence de gauche, dans la section Stockage principal, développez Stockage du cache, puis sélectionnez temperature-converter-v1 :

   

   Le cache du Service Worker s’affiche. Toutes les ressources mises en cache par le worker de service (ou mises en cache automatiquement par le navigateur) sont répertoriées :

   • / (index.html) : page web HTML de l’application, définissant la disposition des contrôles.
   • /converter.css - Style de la page web de l’application.
   • /converter.js - Fichier JavaScript contenant la logique de l’application.
   • /icon512.png - Fichier image d’icône d’application pour représenter l’application.
   • /manifest.json - Manifeste de l’application, contenant des informations de base sur l’application, que le système d’exploitation de l’appareil doit utiliser.

   Le service Worker ajoute trois fichiers au cache, explicitement (.html, .csset .js). L’icône (.png) et le manifeste (.json) sont mis en cache automatiquement par le navigateur.

Étape 10 : Utiliser DevTools pour désactiver la connexion Internet et tester la PWA hors connexion

Essayez l’application web progressive (PWA) en tant qu’application hors connexion, comme suit :

1. Dans la fenêtre DevTools, ouvrez l’outil Réseau ().

2. En haut, dans le menu Limitation à droite de la case à cocher Désactiver le cache, passez de Aucune limitation à Hors connexion :

   

   L’onglet Réseau ajoute une icône d’avertissement pour vous rappeler cette limitation.

3. Dans la fenêtre Convertisseur de température, cliquez avec le bouton droit, puis sélectionnez Actualiser.

4. Dans la zone de texte température , tapez 22.

   La température affichée passe à 71,6 F. L’application est toujours affichée correctement et fonctionne toujours correctement, en utilisant des ressources mises en cache localement qui sont gérées par le service Worker.

5. Dans la fenêtre DevTools, dans le menu Limitation situé à droite de la case Désactiver le cache , revenez hors connexion à Aucune limitation.

   L’icône d’avertissement de limitation est supprimée de l’onglet Réseau .

6. Fermez la fenêtre DevTools.

7. Fermez la fenêtre de l’application Convertisseur de température .

Cette même utilisation de DevTools fonctionne également lorsque l’application est dans Microsoft Edge en tant qu’application web, plutôt qu’en tant qu’application installée. Pour plus d’informations, consultez Émuler hors connexion dans Informations de référence sur les fonctionnalités réseau.

Étape 11 : Désinstaller l’application installée

Désinstallez l’application web progressive (PWA) comme suit :

1. Cliquez sur le bouton Convertisseur de température épinglé dans la barre des tâches Windows.

   L’application Convertisseur de température installée s’ouvre.

2. Dans la barre de titre, cliquez sur le bouton Paramètres et autres (), puis cliquez sur Paramètres de l’application.

   Dans Microsoft Edge, l’onglet Applications s’ouvre (edge://apps), affichant des détails sur l’application Convertisseur de température :

   

3. En bas, cliquez sur le bouton Désinstaller .

   La boîte de dialogue Désinstaller l’application de Microsoft Edge sur tous les appareils synchronisés ? s’ouvre.

4. Cochez la case Supprimer l’historique et les données de l’application , puis cliquez sur le bouton Désinstaller .

Désinstallation d’une application locale à partir du menu Démarrer de Windows

Remarque : À titre d’exemple d’intégration du système d’exploitation, vous pouvez désinstaller l’application via le menu Démarrer de Windows, comme suit :

1. Appuyez sur la touche Windows .

2. Commencez à taper « convertisseur de température ».

3. Cliquez sur Désinstaller :

   

Désinstallation d’une application locale à partir de Microsoft Edge

Remarque : Vous pouvez également désinstaller l’exemple d’application web progressive (PWA) à partir de Microsoft Edge, comme suit :

1. Dans Microsoft Edge, sélectionnez Paramètres et bien plus encore (...) >Autres outils>Apps>Afficher les applications.

   La boîte de dialogue Applications s’ouvre dans Microsoft Edge et répertorie les PWA installées :

   

2. Cliquez avec le bouton droit sur l’carte Convertisseur de température, puis cliquez sur Gérer l’application.

   La page Toutes les applications / Convertisseur de température s’ouvre à l’adresse edge://apps.

3. En bas, cliquez sur le bouton Désinstaller .

Poursuivez avec les étapes ci-dessous.

Étape 12 : Modifier l’exemple

Vous pouvez modifier l’exemple comme point de départ de votre propre application web progressive (PWA). Vous allez remplacer le nom de l’application « Convertisseur de température » par « TC », dans une branche de travail du dépôt, puis installer l’application modifiée localement.

Créez une branche de travail et basculez-y, comme suit :

1. Ouvrez Visual Studio Code.

   Ouvrir le dossier dans VS Code

2. Dans le menu Fichier , sélectionnez Ouvrir le dossier.

   La boîte de dialogue Ouvrir le dossier s’ouvre.

3. Accédez au dossier de dépôt Demos cloné, par C:\Users\localAccount\GitHub\Demos\exemple , sélectionnez le temperature-converter dossier qu’il contient, puis cliquez sur le bouton Sélectionner un dossier .

4. Dans le volet Explorer, ouvrez \temperature-converter\index.html.

   

   Dans le coin inférieur gauche de Visual Studio Code, la branche principale est indiquée.

   Créer une branche de travail et basculer vers celle-ci

5. Dans Visual Studio Code, dans le menu Affichage, sélectionnez Terminal.

6. Appuyez sur Ctrl+C.

   Le serveur web localhost (http-server) s’arrête, s’il était en cours d’exécution. L’invite affiche le chemin d’accès actuel, par exemple : PS C:\Users\localAccount\GitHub\Demos\temperature-converter>

   Il n’est pas nécessaire d’arrêter le serveur, de modifier le code et d’afficher le résultat. Nous arrêtons simplement temporairement le serveur dans terminal afin de revenir à l’invite et d’entrer des commandes git.

7. Entrez la commande suivante pour créer une branche de travail du référentiel et basculer vers celle-ci :

   git checkout -b test1
   

   Si la branche existe déjà, la commande génère : « fatal : une branche nommée 'test1' existe déjà ».

8. Si la branche existe déjà, entrez la commande suivante pour basculer vers la branche :

   git checkout test1
   

   Exemple de sortie : Switched to a new branch 'test1'

   En bas à gauche de Visual Studio Code, la branche passe de main à test1.

9. Fermez le volet Terminal .

   Dans le coin inférieur gauche de Visual Studio Code, la branche test1 est indiquée :

   

   Modifier les fichiers

10. Dans Visual Studio Code, dans le volet Explorer, ouvrez /temperature-converter/index.html.

11. Dans index.html, remplacez le nom de l’application en deux lignes de « Convertisseur de température » par « TC », comme suit :

    Modification de :

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

    à :

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

12. Enregistrez le fichier.

13. Dans le volet Explorer, ouvrez /temperature-converter/manifest.json.

14. Dans manifest.json, remplacez le nom de l’application en deux lignes de « Convertisseur de température » par « TC », comme suit :

    Modification de :

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

    à :

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

15. Enregistrez le fichier.

Étape 13 : Afficher l’application modifiée dans le navigateur

Affichez l’application modifiée dans le navigateur, comme suit :

1. Dans Visual Studio Code, dans le menu Affichage, sélectionnez Terminal.

   Démarrer le serveur

   Nous avons précédemment arrêté le serveur web dans terminal, juste pour entrer des commandes git pour basculer vers une branche de travail.

2. Entrez la commande suivante :

   npx http-server
   

   Le serveur web de développement local redémarre.

   Afficher l’application web

3. Dans Microsoft Edge, accédez à http://localhost:8080 (ou une URL équivalente qui a été générée dans le terminal, à partir de la npx http-server commande ).

4. Actualisez (F5) la page web.

   Cela ne donne pas le résultat souhaité. L’actualisation recharge la page web à partir du cache du navigateur, de sorte que vous voyez l’application qui a été mise en cache auparavant à cette URL (le titre de l’onglet est Convertisseur de température).

5. Actualisez en dur (Maj+F5) la page web.

   L’actualisation matérielle affiche le contenu actuel directement à partir du serveur web.

   Le titre de l’onglet passe de Convertisseur de température à TC :

   

Étape 14 : Réinstaller l’exemple modifié en tant qu’application locale

Installez l’application modifiée à partir du localhost navigateur sur l’appareil, comme suit :

1. Suite à partir de ci-dessus : dans Microsoft Edge, dans la barre d’adresses, cliquez sur l’application disponible. Installez TC (

   Une boîte de dialogue Installer l’application TC s’ouvre dans le navigateur :

   

2. Cliquez sur le bouton Installer .

   L’application modifiée est installée localement. La boîte de dialogue Application installée s’ouvre dans l’application :

   

3. Cliquez sur le bouton Autoriser .

   Une boîte de dialogue Applications Windows demande « Voulez-vous épingler TC à votre barre des tâches ? Cette demande provient de TC.

4. Cliquez sur le bouton Oui .

   L’icône de l’application TC () apparaît dans la barre des tâches Windows.

   L’application TC s’affiche dans sa propre fenêtre, et la barre de titre indique désormais TC :

   

Étape 15 : Désinstaller l’application locale modifiée

Désinstallez l’application locale modifiée comme suit :

1. Dans la fenêtre de l’application TC, sélectionnez Paramètres et bien plus encore (...) >Paramètres de l’application.

   Dans Microsoft Edge, l’onglet Applications s’ouvre, affichant des détails sur l’application TC .

2. En bas, cliquez sur le bouton Désinstaller .

   La boîte de dialogue Désinstaller l’application de Microsoft Edge sur tous les appareils synchronisés ? s’ouvre.

3. Cochez la case Supprimer l’historique et les données de l’application , puis cliquez sur le bouton Désinstaller .

Étape 16 : Arrêter le serveur web de développement

1. Dans Visual Studio Code, dans le menu Affichage, sélectionnez Terminal.

2. Appuyez sur Ctrl+C.

   Le serveur s’arrête, avec le message de sortie : http-server stopped.

Il s’agit de la fin des étapes de l’exemple.

Accélération du cycle de modification/réinstallation

Vous pouvez ignorer certaines des étapes ci-dessus chaque fois que vous modifiez l’application, en fonction des fichiers que vous modifiez :

• Si vous modifiez un fichier HTML, un fichier CSS ou le fichier JavaScript principal, vous pouvez ignorer la désinstallation et la désinstallation de l’application. Vider le cache et actualiser la page suffit pour recharger les modifications HTML, CSS et JavaScript.

• Si vous modifiez le fichier manifeste, vous devez désinstaller et réinstaller l’application.

Bouton PWA dans la barre d’adresse

Une fois l’application installée, si vous accédez à l’application web dans le navigateur, le bouton PWA dans la barre d’adresse est passé d’un bouton Application disponible ( à un bouton Ouvrir dans l’application ().

Si vous cliquez sur le bouton Ouvrir dans l’application ( la boîte de dialogue Ouvrir le convertisseur de température s’ouvre dans le navigateur :

Étapes suivantes

Ensuite, vous pouvez :

• Étudiez le code ; Consultez Fichiers sources du convertisseur de température.

• Apportez des modifications mineures supplémentaires au code de l’exemple.

• Copiez et collez l’intégralité de l’exemple de répertoire /Demos/temperature-converter/ et modifiez le code pour créer votre propre application web progressive (PWA).

Voir aussi

• Utiliser des PWA dans Microsoft Edge
  • Installation d’une PWA dans Utiliser des PWA dans Microsoft Edge.
• Prise en main du développement d’une PWA
• Fichiers sources du convertisseur de température
• Émuler hors connexion dans la référence des fonctionnalités réseau DevTools.

Localhost :

• http://localhost:8080 - ou des URL équivalentes sorties par la npx http-server commande .

GitHub :

• Dépôt MicrosoftEdge / Demos .
  • Exemple de convertisseur de température hébergé à github.io.
• Dupliquer un dépôt
  • Duplication d’un dépôt dans Dupliquer un dépôt.
  • Clonage de votre dépôt dupliqué dans Dupliquer un dépôt.
• Clonage d’un dépôt

VS Code :

• Visual Studio Code

Git:

• Téléchargements sur git-scm.com.

Node.js :

• Node.js
• Télécharger Node.js