Fichiers sources du convertisseur de température

Fichiers sources pour 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 s’affichent dans l’interface utilisateur de l’application. Cet exemple de PWA n’a qu’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 ; Style de disposition de chaque contrôle de l’interface utilisateur dans la page principale de l’application. Le fichier logique de l’application JavaScript (converter.js)
converter.js Logique d’application, comme du code JavaScript. Le fichier logique de l’application JavaScript (converter.js)
manifest.json Informations de base sur l’application, que le système d’exploitation de l’appareil peut utiliser. Fichier manifeste qui rend l’application web progressive (PWA) installable sur l’appareil, contrairement à une application web classique. Le 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 Worker du service qui met en cache les fichiers frontaux sur l’appareil local et distribue les fichiers mis en cache lorsqu’il n’y a pas de connexion Internet. Le worker du service doit mettre en cache les fichiers de l’application sur l’appareil local (sw.js)
README.md De brèves informations sur l’application, pour les personnes qui consultent le répertoire de code source ; Contient un lien pour accéder à l’application en direct à partir du serveur Web github.io, ainsi qu’un lien vers le présent article. Le 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 la Progressive Web App (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 de fermeture </form> , un <script> élément se 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>

Inversement, converter.js fait référence au : du formulaire idconverter dans la ligne suivante :

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

Comment index.html fait référence au manifeste

A l’intérieur de la <head> balise, un <link> élément fait 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 commune, pas une exigence stricte. Par exemple, vous pouvez remplacer le nom du fichier manifeste par abcd.json, et modifier la ligne comme index.html suit :

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

Comment index.html référence le worker du service

Au sein d’un <script> élément à la fin de la <body> balise, le fichier sw.js du worker du service est enregistré 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>

Le fichier de feuille de style CSS (converter.css)

converter.css définit le style de la page web de l’application web progressive (PWA) à l’aide des règles de feuille de style en cascade (CSS) pour organiser le contenu HTML dans une mise en page 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 {
  ...
}

Le fichier logique de l’application JavaScript (converter.js)

Pour faire fonctionner le convertisseur de température, 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();
});

Le 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 peut utiliser. Le code JSON décrit l’application au 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 d’icône d’application de 512 x 512 pixels. Ce fichier image représente l’application web progressive (PWA), par exemple, dans la barre des tâches Windows et le menu Démarrer Windows :

Fichier d’icône

Le worker du service doit mettre en cache les fichiers de l’application sur l’appareil local (sw.js)

sw.js est un worker du service qui gère la mise en cache des fichiers qui font partie de l’application web progressive (PWA), en mettant en cache les fichiers sur le disque local et en les servant lorsqu’il n’y a pas 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 Worker du service ajoute trois fichiers au cache, explicitement (.html, .css, et .js). L’icône (.png) et le manifeste (.json) sont automatiquement mis en cache par le navigateur.

Voir aussi :

Le 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 ni le fichier Lisez-moi.

Voir aussi

Code source :

  • Last updated on