Arquivos de origem do conversor de temperatura

O exemplo de Conversor de temperatura Aplicativo Web Progressivo (PWA)

Veja também:

Visão geral dos arquivos de código-fonte

O PWA (Aplicativo Web Progressivo) de exemplo consiste nos seguintes arquivos, no diretório de /Demos/temperature-converter/ código-fonte:

Arquivo Descrição Seção abaixo
index.html A página da Web inicial que define o conteúdo e os controles que aparecem na interface do usuário do aplicativo. Este PWA de exemplo tem uma única página da Web. A página da Web inicial do aplicativo (index.html)
converter.css O arquivo CSS (Folhas de Estilos em Cascata) define o estilo da página da Web do aplicativo; o estilo de layout de cada controle de interface do usuário na página principal do aplicativo. O arquivo lógico do aplicativo JavaScript (converter.js)
converter.js Lógica do aplicativo, como código JavaScript. O arquivo lógico do aplicativo JavaScript (converter.js)
manifest.json Informações básicas sobre o aplicativo para uso do sistema operacional do dispositivo. Arquivo de manifesto que torna o PWA (Aplicativo Web Progressivo) instalável no dispositivo, ao contrário de um aplicativo Web normal. O manifesto do aplicativo Web (manifest.json)
icon512.png Arquivo de imagem para representar o aplicativo no navegador e no dispositivo local. O arquivo de imagem para representar o aplicativo (icon512.png)
sw.js Trabalho de serviço que armazena em cache arquivos front-end no dispositivo local e serve os arquivos armazenados em cache quando não há conexão com a Internet. O trabalho de serviço para armazenar em cache os arquivos do aplicativo no dispositivo local (sw.js)
README.md Breve informação sobre o aplicativo, para pessoas que estão olhando para o diretório do código-fonte; Contém um link para acessar o aplicativo ao vivo do servidor Web github.io e um link para o presente artigo. O arquivo Leiame para explicar o diretório dos arquivos de origem (README.md)

Os detalhes sobre cada arquivo estão abaixo.

A página da Web inicial do aplicativo (index.html)

index.html define a primeira página que os usuários veem quando acessam o PWA (Aplicativo Web Progressivo).

index.html define o conteúdo da página da Web do PWA (Aplicativo Web Progressivo), incluindo texto, imagens, campos de texto e botões que aparecem na interface do usuário.

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

Como index.html referências ao arquivo CSS

index.html faz referência ao converter.css arquivo CSS por meio de uma linha de código que está dentro da <head> marca:

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

Como index.html carrega o arquivo JavaScript

Em index.html, após a tag de fechamento </form> , um <script> elemento carrega 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 outro lado, converter.js faz referência ao formato id: converter na seguinte linha:

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

Como index.html faz referência ao manifesto

Dentro da <head> tag, um <link> elemento faz referência 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>

Esse <link rel="manifest" href="./manifest.json"> elemento vincula o arquivo de manifesto do aplicativo Web ao aplicativo, tornando o aplicativo Web um PWA (Aplicativo Web Progressivo).

O nome do manifest.json arquivo é apenas uma convenção comum, não um requisito estrito. Por exemplo, você pode alterar o nome do arquivo de manifesto para abcd.jsone modificar a linha como index.html :

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

Como index.html faz referência ao trabalho de serviço

Dentro de um <script> elemento no final da tag, o arquivo sw.js de trabalho do <body> serviço é registrado chamandonavigator.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>

O arquivo de folha de estilos CSS (converter.css)

converter.css define o estilo da página da Web do PWA (Progressive Web App), usando regras CSS (Folha de Estilos em Cascata) para organizar o conteúdo HTML em um layout e fornecer estilos para elementos.

O aplicativo Web tem regras de estilo CSS, para torná-lo visualmente atraente.

O arquivo CSS está converter.css no diretório da amostra (/Demos/temperature-converter/), incluindo o seguinte código:

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

O arquivo lógico do aplicativo JavaScript (converter.js)

Para fazer o conversor de temperatura funcionar, o exemplo usa código JavaScript, no converter.jsformato . converter.js contém a lógica do aplicativo para o PWA (Aplicativo Web Progressivo). O código JavaScript adiciona interações do usuário à interface do usuário.

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

O manifesto do aplicativo Web (manifest.json)

manifest.json fornece informações básicas sobre o PWA (Aplicativo Web Progressivo) para uso do sistema operacional do dispositivo. O código JSON descreve o aplicativo para o sistema operacional do 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"
      }
  ]
}

Veja também:

O arquivo de imagem para representar o aplicativo (icon512.png)

icon512.png é uma imagem de ícone de aplicativo de 512x512 pixels. Esse arquivo de imagem representa o PWA (Aplicativo Web Progressivo), como na barra de tarefas do Windows e no menu Iniciar do Windows:

Arquivo de ícone

O trabalho de serviço para armazenar em cache os arquivos do aplicativo no dispositivo local (sw.js)

sw.js é um trabalho de serviço que gerencia arquivos de cache que fazem parte do PWA (Progressive Web App), armazenando os arquivos em cache na unidade local e servindo-os quando não há conexão com 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
        }
    }
  })());
});

O trabalho de serviço adiciona três arquivos ao cache, explicitamente (.html, .csse .js). O ícone (.png) e o manifesto (.json) são armazenados em cache automaticamente pelo navegador.

Veja também:

O arquivo Leiame para explicar o diretório dos arquivos de origem (README.md)

README.md contém informações resumidas sobre o PWA (Progressive Web App):

O diretório principal do código-fonte de um Progressive Web App (PWA) pode conter um arquivo Leiame. Os usuários finais do aplicativo não veem o diretório do código-fonte ou o arquivo Leiame.

Confira também

Código-fonte:

  • Last updated on