Partager via

Fichiers sources du convertisseur de température

L’exemple d’application web progressive (PWA) du convertisseur de température

Voir aussi :

Vue d’ensemble des fichiers de code source

L’exemple d’application web progressive (PWA) se compose des fichiers suivants, dans le répertoire de /Demos/temperature-converter/ code source :

Fichier Description Section ci-dessous
index.html Page web initiale définissant le contenu et les contrôles qui apparaissent dans l’interface utilisateur de l’application. Cet exemple de PWA a une seule page web. Page web initiale de l’application (index.html)
converter.css Le fichier CSS (Cascading Style Sheets) définit le style de la page web de l’application ; le style de disposition de chaque contrôle d’interface utilisateur dans la page principale de l’application. Fichier logique d’application JavaScript (converter.js)
converter.js Logique d’application, en tant que code JavaScript. Fichier logique d’application JavaScript (converter.js)
manifest.json Informations de base sur l’application, que le système d’exploitation de l’appareil doit utiliser. Fichier manifeste qui rend l’application web progressive (PWA) installable sur l’appareil, contrairement à une application web standard. Manifeste de l’application web (manifest.json)
icon512.png Fichier image pour représenter l’application dans le navigateur et sur l’appareil local. Fichier image pour représenter l’application (icon512.png)
sw.js Service Worker qui met en cache les fichiers frontaux sur l’appareil local et traite les fichiers mis en cache lorsqu’il n’y a pas de connexion Internet. Le service Worker pour mettre en cache les fichiers de l’application sur l’appareil local (sw.js)
README.md Informations brèves sur l’application, pour les personnes qui examinent le répertoire du code source ; contient un lien pour accéder à l’application en direct à partir du serveur web github.io et un lien vers le présent article. Fichier Lisez-moi pour expliquer le répertoire des fichiers sources (README.md)

Vous trouverez ci-dessous des détails sur chaque fichier.

Page web initiale de l’application (index.html)

index.html définit la première page que les utilisateurs voient lorsqu’ils accèdent à l’application web progressive (PWA).

index.html définit le contenu de la page web de l’application web progressive (PWA), y compris le texte, les images, les champs de texte et les boutons qui apparaissent dans l’interface utilisateur.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" type="image/png" href="./icon512.png">
    <link rel="stylesheet" href="./converter.css">
    <link rel="manifest" href="./manifest.json">
    <title>Temperature converter</title>
  </head>
  <body>
    <form id="converter">
       ...
    </form>
    <script src="./converter.js"></script>
    <script>
      if('serviceWorker' in navigator) {
        navigator.serviceWorker.register('./sw.js', { scope: './' });
      }
    </script>
  </body>
</html>

Comment index.html référence le fichier CSS

index.html fait référence au converter.css fichier CSS via une ligne de code qui se trouve à l’intérieur de la <head> balise :

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" type="image/png" href="./icon512.png">
  <link rel="stylesheet" href="./converter.css">
  <link rel="manifest" href="./manifest.json">
  <title>Temperature converter</title>
</head>

Comment index.html charge le fichier JavaScript

Dans index.html, après la balise fermante </form> , un <script> élément charge converter.js:

  <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
</form>
<script src="./converter.js"></script>

À l’inverse, converter.js fait référence à : du idconverter formulaire dans la ligne suivante :

const form = document.getElementById('converter');

Comment index.html référence le manifeste

À l’intérieur de la <head> balise, un <link> élément référence manifest.json:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" type="image/png" href="./icon512.png">
  <link rel="stylesheet" href="./converter.css">
  <link rel="manifest" href="./manifest.json">
  <title>Temperature converter</title>
</head>

Cet <link rel="manifest" href="./manifest.json"> élément lie le fichier manifeste de l’application web à l’application, ce qui fait de l’application web une application web progressive (PWA).

Le nom manifest.json de fichier est simplement une convention courante, et non une exigence stricte. Par exemple, vous pouvez remplacer le nom abcd.jsondu fichier manifeste par et modifier la ligne dans index.html comme suit :

<link rel="manifest" href="./abcd.json">

Comment index.html référence le service Worker

Dans un <script> élément à la fin de la <body> balise, le fichier sw.js worker de service est inscrit en appelant navigator.serviceWorker.register():

    <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
  </form>
  <script src="./converter.js"></script>
  <script>
    if('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./sw.js', { scope: './' });
    }
  </script>
</body>

Fichier de feuille de style CSS (converter.css)

converter.css définit le style de la page web de l’application web progressive (PWA), en utilisant des règles CSS (Cascading Style Sheet) pour organiser le contenu HTML dans une disposition et fournir des styles pour les éléments.

L’application web a des règles de style CSS, pour rendre l’application visuellement attrayante.

Le fichier CSS se trouve converter.css dans le répertoire de l’exemple (/Demos/temperature-converter/), y compris le code suivant :

html {
  background: rgb(243, 243, 243);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 15pt;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
}

#converter {
  ...
}

#converter input, #converter select {
  ...
}

#converter #output-temp {
  ...
}

Fichier logique d’application JavaScript (converter.js)

Pour que le convertisseur de température fonctionne, l’exemple utilise du code JavaScript, dans converter.js. converter.js contient la logique d’application pour l’application web progressive (PWA). Le code JavaScript ajoute des interactions utilisateur à l’interface utilisateur.

const inputField = document.getElementById('input-temp');
const fromUnitField = document.getElementById('input-unit');
const toUnitField = document.getElementById('output-unit');
const outputField = document.getElementById('output-temp');
const form = document.getElementById('converter');

function convertTemp(value, fromUnit, toUnit) {
  if (fromUnit === 'c') {
    ...
    return value;
  }
  throw new Error('Invalid unit');
}

form.addEventListener('input', () => {
  const inputTemp = parseFloat(inputField.value);
  ...
  outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase();
});

Manifeste de l’application web (manifest.json)

manifest.json fournit des informations de base sur l’application web progressive (PWA) que le système d’exploitation de l’appareil doit utiliser. Le code JSON décrit l’application sur le système d’exploitation hôte.

{
  "lang": "en-us",
  "name": "Temperature converter app",
  "short_name": "Temperature converter",
  "description": "A basic temperature converter application that can convert to and from Celsius, Kelvin, and Fahrenheit",
  "start_url": "./",
  "background_color": "#2f3d58",
  "theme_color": "#2f3d58",
  "orientation": "any",
  "display": "standalone",
  "icons": [
      {
          "src": "./icon512.png",
          "sizes": "512x512"
      }
  ]
}

Voir aussi :

Fichier image pour représenter l’application (icon512.png)

icon512.png est une image icône d’application de 512 x 512 pixels. Ce fichier image représente l’application web progressive (PWA), comme dans la barre des tâches windows et le menu Démarrer de Windows :

Fichier d’icône

Le service Worker pour mettre en cache les fichiers de l’application sur l’appareil local (sw.js)

sw.js est un worker de service qui gère la mise en cache des fichiers qui font partie de l’application web progressive (PWA), la mise en cache des fichiers sur le lecteur local et leur distribution en l’absence de connexion Internet.

const CACHE_NAME = `temperature-converter-v1`;
    
// Use the install event to pre-cache all initial resources.
self.addEventListener('install', event => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    cache.addAll([
      './',
      './converter.js',
      './converter.css'
    ]);
  })());
});

self.addEventListener('fetch', event => {
  event.respondWith((async () => {
    const cache = await caches.open(CACHE_NAME);

    // Get the resource from the cache.
    const cachedResponse = await cache.match(event.request);
    if (cachedResponse) {
      return cachedResponse;
    } else {
        try {
          // If the resource was not in the cache, try the network.
          const fetchResponse = await fetch(event.request);
    
          // Save the resource in the cache and return it.
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        } catch (e) {
          // The network failed
        }
    }
  })());
});

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.

Voir aussi :

Fichier Lisez-moi pour expliquer le répertoire des fichiers sources (README.md)

README.md contient de brèves informations sur l’application web progressive (PWA) :

Le répertoire principal du code source d’une application web progressive (PWA) peut contenir un fichier Lisez-moi. Les utilisateurs finaux de l’application ne voient pas le répertoire de code source ou le fichier Lisez-moi.

Voir aussi

Code source:

  • Last updated on