Quelldateien für Temperaturkonverter

Quelldateien für das PWA-Beispiel (Progressive Web App) des Temperaturwandlers.

Siehe auch:

• /temperature-converter/ – Quellcodeverzeichnis.

Übersicht über Quellcodedateien

Die Progressive Web App (Progressive Web App, PWA) für ein Beispiel besteht aus den folgenden Dateien im /Demos/temperature-converter/ Quellcodeverzeichnis:

Details zu jeder Datei finden Sie unten.

Anfängliche Webseite der App (index.html)

index.html definiert die erste Seite, die Benutzern angezeigt wird, wenn sie auf die Progressive Web App (PWA) zugreifen.

index.html definiert den Inhalt der Webseite der Progressive Web App (PWA), einschließlich Text, Bilder, Textfelder und Schaltflächen, die auf der Benutzeroberfläche angezeigt werden.

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

Wie index.html auf die CSS-Datei verweist

index.htmlverweist über eine Codezeile innerhalb des <head> Tags auf die converter.css CSS-Datei:

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

So lädt index.html die JavaScript-Datei

In index.htmlwird nach dem schließenden </form> Tag ein <script> Element geladen 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>

Umgekehrt converter.js verweist er in der folgenden Zeile auf den Namen des converter Formularsid:

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

Wie index.html auf das Manifest verwiesen wird

Innerhalb des <head> Tags verweist ein <link> Element auf 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>

Dieses <link rel="manifest" href="./manifest.json"> Element verknüpft die Web-App-Manifestdatei mit der App, wodurch die Web-App zu einer progressiven Web-App (PWA) wird.

Der Dateiname manifest.json ist lediglich eine gängige Konvention, keine strikte Anforderung. Sie können z. B. den Namen der Manifestdatei in abcd.jsonändern und die Zeile in index.html wie folgt ändern:

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

Wie index.html auf den Service Worker verweist

Innerhalb eines <script> Elements am Ende des <body> Tags wird die Service-Worker-Datei sw.js registriert, indem Folgendes aufgerufen navigator.serviceWorker.register()wird:

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

Die CSS-Stylesheetdatei (converter.css)

converter.css definiert das Styling für die Webseite der Progressive Web App (PWA) mithilfe von CSS-Regeln (Cascading Style Sheet), um den HTML-Inhalt in einem Layout zu organisieren und Stile für Elemente bereitzustellen.

Die Web-App verfügt über CSS-Stilregeln, um sie optisch ansprechend zu gestalten.

Die CSS-Datei befindet converter.css sich im Beispielverzeichnis (/Demos/temperature-converter/), einschließlich des folgenden Codes:

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

Die JavaScript-App-Logikdatei (converter.js)

Damit der Temperaturwandler funktioniert, verwendet das Beispiel JavaScript-Code in converter.js. converter.js enthält die App-Logik für die Progressive Web App (PWA). Der JavaScript-Code fügt der Benutzeroberfläche Benutzerinteraktionen hinzu.

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

Das Web-App-Manifest (manifest.json)

manifest.json enthält grundlegende Informationen zur Progressive Web App (PWA), die vom Betriebssystem des Geräts verwendet werden können. Der JSON-Code beschreibt die App für das Hostbetriebssystem.

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

Siehe auch:

• Das Web-App-Manifest (manifest.json) in Erste Schritte bei der Entwicklung einer PWA.

Die Bilddatei zur Darstellung der App (icon512.png)

icon512.png ist ein App-Symbolbild mit 512 x 512 Pixeln. Diese Bilddatei stellt die Progressive Web App (PWA) dar, z. B. in der Windows-Taskleiste und im Windows-Startmenü:

Der Service Worker, der die Dateien der App auf dem lokalen Gerät zwischenspeichert (sw.js)

sw.js ist ein Service Worker, der das Zwischenspeichern von Dateien verwaltet, die Teil der Progressive Web App (PWA) sind, die Dateien auf dem lokalen Laufwerk zwischenspeichert und bereitstellt, wenn keine Internetverbindung besteht.

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

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

Siehe auch:

• Der Service Worker, der die Dateien der App auf dem lokalen Gerät zwischenspeichert (sw.js) in Erste Schritte bei der Entwicklung einer PWA.

Die Infodatei zur Erläuterung des Verzeichnisses der Quelldateien (README.md)

README.md enthält kurze Informationen zur Progressive Web App (PWA):

• Ein Link zum Öffnen der App-Webseite.
• Ein Link zum Beispielartikel Temperaturkonverter .

Das Hauptverzeichnis für den Quellcode einer progressiven Web-App (PWA) kann eine Infodatei enthalten. Den Endbenutzern der App wird weder das Quellcodeverzeichnis noch die Infodatei angezeigt.

Siehe auch

• Das Web-App-Manifest (manifest.json) in Erste Schritte bei der Entwicklung einer PWA.
• Der Service Worker, der die Dateien der App auf dem lokalen Gerät zwischenspeichert (sw.js) in Erste Schritte bei der Entwicklung einer PWA.
• Beispielartikel Temperaturwandler .

Quellcode:

• /Temperaturumrichter/
  • index.html
  • converter.css
  • converter.js
  • manifest.json
  • icon512.png
  • sw.js
  • README.md