Archivos de origen del convertidor de temperatura

Archivos de origen del ejemplo de aplicación web progresiva (PWA) del convertidor de temperatura.

Vea también:

• /temperature-converter/ - directorio del código fuente.

Información general sobre los archivos de código fuente

La aplicación web progresiva (PWA) de ejemplo consta de los siguientes archivos en el directorio de /Demos/temperature-converter/ código fuente:

A continuación se muestran los detalles sobre cada archivo.

Página web inicial de la aplicación (index.html)

index.html define la primera página que ven los usuarios cuando acceden a la aplicación web progresiva (PWA).

index.html define el contenido de la página web de la aplicación web progresiva (PWA), incluido el texto, las imágenes, los campos de texto y los botones que aparecen en la interfaz de usuario.

<!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>

Cómo index.html hace referencia al archivo CSS

index.html hace referencia al converter.css archivo CSS a través de una línea de código que se encuentra dentro de la <head> etiqueta:

<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>

Cómo carga index.html el archivo JavaScript

En index.html, después de la etiqueta de cierre </form> , un <script> elemento carga 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>

Por el contrario, converter.js hace referencia al formato : idconverter en la siguiente línea:

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

Cómo index.html se hace referencia al manifiesto

Dentro de la <head> etiqueta, un <link> elemento hace referencia manifest.jsona :

<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>

Este <link rel="manifest" href="./manifest.json"> elemento vincula el archivo de manifiesto de la aplicación web a la aplicación, lo que convierte a la aplicación web en una aplicación web progresiva (PWA).

El nombre manifest.json de archivo es simplemente una convención común, no un requisito estricto. Por ejemplo, puede cambiar el nombre del archivo de manifiesto a abcd.jsony modificar la línea como index.html :

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

Cómo index.html hace referencia al trabajo de servicio

Dentro de un <script> elemento al final de la <body> etiqueta, el archivo sw.js de trabajo de servicio se registra llamando a 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>

Archivo de hoja de estilos CSS (converter.css)

converter.css define el estilo de la página web de la aplicación web progresiva (PWA) mediante reglas de hoja de estilos en cascada (CSS) para organizar el contenido HTML en un diseño y proporcionar estilos para los elementos.

La aplicación web tiene reglas de estilo CSS para que la aplicación sea visualmente atractiva.

El archivo CSS se encuentra converter.css en el directorio del ejemplo (/Demos/temperature-converter/), incluido el código siguiente:

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 {
  ...
}

El archivo lógico de la aplicación JavaScript (converter.js)

Para que el convertidor de temperatura funcione, en el ejemplo se usa código JavaScript, en converter.js. converter.js contiene la lógica de la aplicación para la aplicación web progresiva (PWA). El código JavaScript agrega interacciones del usuario a la interfaz de usuario.

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();
});

El manifiesto de la aplicación web (manifest.json)

manifest.json proporciona información básica sobre la aplicación web progresiva (PWA) para que la use el sistema operativo del dispositivo. El código JSON describe la aplicación en el sistema operativo host.

{
  "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"
      }
  ]
}

Vea también:

• El manifiesto de la aplicación web (manifest.json) en Introducción al desarrollo de una PWA.

El archivo de imagen para representar la aplicación (icon512.png)

icon512.png es una imagen de icono de aplicación de 512 x 512 píxeles. Este archivo de imagen representa la aplicación web progresiva (PWA), por ejemplo, en la barra de tareas de Windows y el menú Inicio de Windows:

El trabajo de servicio para almacenar en caché los archivos de la aplicación en el dispositivo local (sw.js)

sw.js es un trabajo de servicio que administra los archivos de almacenamiento en caché que forman parte de la aplicación web progresiva (PWA), almacena en caché los archivos en la unidad local y los sirve cuando no hay conexión a 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
        }
    }
  })());
});

El trabajo de servicio agrega tres archivos a la memoria caché, explícitamente (.html, .css, y .js). El explorador almacena en caché automáticamente el icono (.png) y el manifiesto (.json).

Vea también:

• El trabajo de servicio para almacenar en caché los archivos de la aplicación en el dispositivo local (sw.js) en Introducción al desarrollo de una PWA.

El archivo Léame para explicar el directorio de los archivos fuente (README.md)

README.md contiene una breve información sobre la aplicación web progresiva (PWA):

• Un vínculo para abrir la página web de la aplicación.
• Vínculo al artículo de ejemplo del convertidor de temperatura .

El directorio principal del código fuente de una aplicación web progresiva (PWA) puede contener un archivo Léame. Los usuarios finales de la aplicación no ven el directorio de código fuente ni el archivo Léame.

Vea también

• El manifiesto de la aplicación web (manifest.json) en Introducción al desarrollo de una PWA.
• El trabajo de servicio para almacenar en caché los archivos de la aplicación en el dispositivo local (sw.js) en Introducción al desarrollo de una PWA.
• Artículo de muestra de convertidor de temperatura .

Código fuente:

• /convertidor de temperatura/
  • index.html
  • converter.css
  • converter.js
  • manifest.json
  • icon512.png
  • sw.js
  • README.md