Compartilhar via

Ficheiros de origem do conversor de temperatura

O conversor de temperatura de exemplo Progressive Web App (PWA)

Veja também:

Descrição geral dos ficheiros de código fonte

O exemplo de Aplicação Web Progressiva (PWA) consiste nos seguintes ficheiros, no diretório de /Demos/temperature-converter/ código fonte:

Arquivo Descrição Secção abaixo
index.html A página Web inicial que define o conteúdo e os controlos que aparecem na IU da aplicação. Este PWA de exemplo tem uma única página Web. A página Web inicial da aplicação (index.html)
converter.css O ficheiro Folhas de Estilos em Cascata (CSS) define o estilo para a página Web da aplicação; o estilo de esquema de cada controlo de IU na página principal da aplicação. O ficheiro de lógica da aplicação JavaScript (converter.js)
converter.js Lógica da aplicação, como código JavaScript. O ficheiro de lógica da aplicação JavaScript (converter.js)
manifest.json Informações básicas sobre a aplicação, para o sistema operativo do dispositivo utilizar. Ficheiro de manifesto que torna a Aplicação Web Progressiva (PWA) instalável no dispositivo, ao contrário de uma aplicação Web normal. O manifesto da aplicação Web (manifest.json)
icon512.png Ficheiro de imagem para representar a aplicação no browser e no dispositivo local. O ficheiro de imagem a representar a aplicação (icon512.png)
sw.js Função de trabalho de serviço que coloca ficheiros de front-end em cache no dispositivo local e serve os ficheiros em cache quando não existe ligação à Internet. A função de trabalho de serviço para colocar em cache os ficheiros da aplicação no dispositivo local (sw.js)
README.md Informações breves sobre a aplicação, para pessoas que estão a ver o diretório de código fonte; contém uma ligação para aceder à aplicação em direto a partir do servidor Web github.io e uma ligação para o artigo atual. O ficheiro Readme para explicar o diretório de ficheiros de origem (README.md)

Os detalhes sobre cada ficheiro estão abaixo.

A página Web inicial da aplicação (index.html)

index.html define a primeira página que os utilizadores veem quando acedem à Aplicação Web Progressiva (PWA).

index.html define o conteúdo da página Web da Aplicação Web Progressiva (PWA), incluindo o texto, imagens, campos de texto e botões que aparecem na interface de utilizador.

<!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 referencia o ficheiro CSS

index.html referencia o converter.css ficheiro CSS através de uma linha de código que está dentro da <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>

Como index.html carrega o ficheiro JavaScript

Em index.html, após a etiqueta de fecho </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 a : converter do idformulário na seguinte linha:

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

Como index.html referencia o manifesto

Dentro da <head> etiqueta, um <link> elemento referencia 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>

Este <link rel="manifest" href="./manifest.json"> elemento liga o ficheiro de manifesto da aplicação Web à aplicação, tornando a aplicação Web uma Aplicação Web Progressiva (PWA).

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

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

Como index.html referencia a função de trabalho de serviço

<script> Num elemento no final da etiqueta, o ficheiro sw.js de <body> trabalho de serviço é registado ao chamar 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>

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

converter.css define o estilo da página Web da Aplicação Web Progressiva (PWA), ao utilizar regras CSS (Cascading Style Sheet) para organizar o conteúdo HTML num esquema e fornecer estilos para elementos.

A aplicação Web tem regras de estilo CSS para tornar a aplicação visualmente apelativa.

O ficheiro CSS está converter.css no diretório do exemplo (/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 ficheiro de lógica da aplicação JavaScript (converter.js)

Para que o conversor de temperatura funcione, o exemplo utiliza código JavaScript, em converter.js. converter.js contém a lógica da aplicação para a Aplicação Web Progressiva (PWA). O código JavaScript adiciona interações do utilizador à interface de utilizador.

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 da aplicação Web (manifest.json)

manifest.json fornece informações básicas sobre a Aplicação Web Progressiva (PWA), para o sistema operativo do dispositivo utilizar. O código JSON descreve a aplicação para o sistema operativo anfitrião.

{
  "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 ficheiro de imagem a representar a aplicação (icon512.png)

icon512.png é uma imagem de ícone de aplicação de 512x512 píxeis. Este ficheiro de imagem representa a Aplicação Web Progressiva (PWA), como na barra de tarefas do Windows e no Menu Iniciar do Windows:

Ficheiro de ícone

A função de trabalho de serviço para colocar em cache os ficheiros da aplicação no dispositivo local (sw.js)

sw.js é uma função de trabalho de serviço que gere ficheiros de colocação em cache que fazem parte da Aplicação Web Progressiva (PWA), colocando os ficheiros em cache na unidade local e servindo-os quando não há ligação à 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
        }
    }
  })());
});

A função de trabalho de serviço adiciona três ficheiros à cache, explicitamente (.html, .css, e .js). O ícone (.png) e o manifesto (.json) são colocados em cache automaticamente pelo browser.

Veja também:

O ficheiro Readme para explicar o diretório de ficheiros de origem (README.md)

README.md contém informações breves sobre a Aplicação Web Progressiva (PWA):

  • Uma ligação para abrir a página Web da aplicação.
  • Uma ligação para o artigo De exemplo conversor de temperatura .

O diretório principal do código fonte de uma Aplicação Web Progressiva (PWA) pode conter um ficheiro Readme. Os utilizadores finais da aplicação não veem o diretório de código fonte ou o ficheiro Readme.

Confira também

Código fonte:

  • Last updated on