Começar a trabalhar com Aplicativos Web Progressivos

Artigo
07/16/2024

As Aplicações Web Progressivas (PWAs) são aplicações que cria através de tecnologias Web e que podem ser instaladas e executadas em todos os dispositivos, a partir de uma base de código.

Para saber mais sobre o que são PWAs e os seus benefícios, veja Descrição geral das Aplicações Web Progressivas (PWAs).

Este guia destina-se a programadores Web que querem aprender a criar PWAs. Para saber mais sobre como instalar e executar PWAs, consulte Instalar um PWA em Utilizar Aplicações Web Progressivas no Microsoft Edge.

Neste guia, vai aprender primeiro como funcionam os PWAs e, em seguida, criar o seu primeiro PWA simples, que será uma aplicação de conversor de temperatura e, em seguida, saber mais sobre como criar grandes PWAs.

Pode encontrar o código fonte final da aplicação que irá criar neste guia no repositório da aplicação de demonstração de introdução ao PWA.

Pré-requisitos

Instale o Visual Studio Code para editar o código fonte do PWA.
Instale Node.js para utilizá-lo como servidor Web local.
O conhecimento prático de HTML, CSS e JavaScript também é uma vantagem.

A arquitetura de um PWA

As Aplicações Web Progressivas são escritas com as linguagens de programação da Web: HTML, CSS e JavaScript e são distribuídas aos seus utilizadores através de servidores Web.

Para disponibilizar a sua aplicação aos utilizadores, implemente-a num servidor Web acessível através de HTTPS. O servidor contém:

Código de back-end: os pontos finais necessários para a sua aplicação, quando ligado à Internet, para obter conteúdo dinâmico que pode ser armazenado numa base de dados no seu servidor.
Código de front-end: os recursos necessários para a aplicação ser instalada no dispositivo do utilizador, como HTML, CSS e código JavaScript.

O código de back-end pode utilizar as linguagens do lado do servidor à sua escolha, como ASP.NET, Java, Node.js ou PHP. No entanto, tenha em atenção que os pontos finais do lado do servidor podem nem ser necessários consoante a aplicação que estiver a criar. O PWA que criar neste tutorial não tem nenhum código do lado do servidor, porque a aplicação é executada exclusivamente no dispositivo onde está instalada e não precisa de dados do lado do servidor.

O código de front-end utiliza apenas HTML, CSS, JavaScript e um manifesto JSON.

Utilize HTML para descrever o conteúdo na sua aplicação, como o texto, imagens, campos de texto ou botões que aparecem na interface de utilizador. Em seguida, utilize o CSS para organizar o conteúdo HTML num esquema e fornecer estilos aos elementos. Pode utilizar o JavaScript para adicionar interações do utilizador à interface de utilizador. Por fim, utilize um ficheiro de manifesto JSON que descreva a sua aplicação para o sistema operativo anfitrião.

Embora o código de front-end seja executado através do browser do dispositivo, a interface de utilizador do browser poderá não estar visível, uma vez que a aplicação pode optar por ser executada numa janela autónoma.

Além do código da interface de utilizador, também pode utilizar JavaScript para tornar a sua aplicação mais rápida, fiável e independente da rede através de um ficheiro de trabalho de serviço. Por fim, o código de front-end também contém um ficheiro de manifesto JSON que descreve a sua aplicação para o sistema operativo anfitrião.

O diagrama seguinte mostra a arquitetura de alto nível de um PWA. O servidor Web está num dos lados do PWA e o dispositivo está do outro lado. O dispositivo contém o código de front-end, incluindo HTML, CSS, JavaScript, a função de trabalho de serviço e o manifesto:

Diagrama de arquitetura de um PWA

Passo 1 – Iniciar um servidor Web

Os PWAs são distribuídos aos utilizadores através de servidores Web. Quando a sua aplicação estiver pronta, implemente-a na Web com um fornecedor de alojamento Web. Em seguida, pode atualizar a sua aplicação simplesmente ao implementar novamente a nova versão no servidor Web.

Para começar a desenvolver o seu PWA, pode utilizar um servidor Web local. Para iniciar um servidor local:

Crie uma nova pasta no seu computador onde o servidor Web será executado.

Pode fazê-lo ao abrir uma linha de comandos e escrever:
```
cd path/to/your/dev/folder
mkdir MySamplePWA
cd MySamplePWA
```
Inicie o servidor com a http-server biblioteca de Node.js:
```
npx http-server
```

Tem agora um servidor Web local simples em execução em http://localhost:8080.

As principais partes da plataforma Aplicações Web Progressivas, como os trabalhadores de serviços, exigem a utilização de HTTPS. Quando o PWA entrar em direto, tem de publicá-lo num URL HTTPS. Muitos anfitriões utilizam HTTPS por predefinição, mas se o seu anfitrião não oferecer HTTPS, o Let's Encrypt oferece uma alternativa gratuita para criar os certificados necessários.

Por exemplo, pode criar uma conta gratuita do Azure. Se alojar o seu site no Serviço de Aplicações do Microsoft Azure, este será servido através de HTTPS por predefinição.

Também pode alojar o seu site no GitHub Pages , que também suporta HTTPS.

Para fins de depuração, o Microsoft Edge também permite que um localhost servidor Web utilize as APIs do PWA sem HTTPS.

Passo 2 – Criar a página inicial da aplicação

Até ao momento, não existem conteúdos disponíveis no servidor Web. Comece por criar a primeira página que os utilizadores verão quando acederem à sua aplicação conversor de temperatura.

Abra o Visual Studio Code, selecione Ficheiro>Abrir Pasta e, em seguida, selecione o MySamplePWA diretório que criou no passo anterior.

Crie um novo ficheiro no projeto ao premir Ctrl+N, adicione o seguinte conteúdo e guarde o ficheiro como index.html:

<!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="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" />
    <title>Temperature converter</title>
  </head>
  <body>
    <h1>Temperature converter</h1>
  </body>
</html>

Aceda a http://localhost:8080 para ver a sua aplicação:

A aplicação é executada no browser por enquanto e não pode ser instalada. Para tornar a aplicação instalável, a aplicação precisa de um manifesto de aplicação Web.

Passo 3 – Criar um manifesto de aplicação Web

Um manifesto de aplicação Web é um ficheiro JSON que contém metadados sobre a sua aplicação, como o respetivo nome, descrição, ícones e as várias funcionalidades do sistema operativo que utiliza. Para obter detalhes, veja Utilizar um manifesto de aplicação Web para integrar um PWA no SO.

Para adicionar um manifesto de aplicação à sua aplicação:

No Visual Studio Code, prima Ctrl+N para criar um novo ficheiro com o seguinte conteúdo e guarde o ficheiro como manifest.json.

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

Adicione uma imagem de ícone de aplicação de 512x512 píxeis com o nome icon512.png ao seu projeto. Pode utilizar a imagem de exemplo para fins de teste.
No Visual Studio Code, abra index.htmle adicione o seguinte código dentro da <head> etiqueta.
```
<link rel="manifest" href="/manifest.json">
```

O fragmento de código acima liga o novo ficheiro de manifesto da aplicação Web ao seu site.

O projeto do VS Code deverá agora ter um aspeto semelhante ao seguinte:

Captura de ecrã do VS Code a mostrar o projeto PWA de exemplo, com os ficheiros index.html, manifest.json e ícone

Passo 4 – Continuar a criar a interface de utilizador da sua aplicação

Agora que a sua aplicação tem um ficheiro de manifesto de aplicação Web e uma página inicial, está na altura de criar a funcionalidade principal da aplicação.

Neste passo do tutorial, vamos criar uma aplicação de conversão de unidade de temperatura.

Para criar o conteúdo da interface de utilizador principal, copie o seguinte código HTML e cole-o no index.html ficheiro, substituindo a <h1> etiqueta HTML:

<form id="converter">
  <label for="input-temp">temperature</label>
  <input type="text" id="input-temp" name="input-temp" value="20" />
  <label for="input-unit">from</label>
  <select id="input-unit" name="input-unit">
    <option value="c" selected>Celsius</option>
    <option value="f">Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <label for="output-unit">to</label>
  <select id="output-unit" name="output-unit">
    <option value="c">Celsius</option>
    <option value="f" selected>Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
  <output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
</form>

O código HTML acima contém um formulário com vários elementos de entrada que a sua aplicação irá utilizar para converter um valor de temperatura de uma unidade para outra unidade.

Para que o conversor funcione, utilize o código JavaScript. Crie um novo ficheiro com o nome converter.js no seu projeto e adicione o seguinte código ao mesmo:

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') {
    if (toUnit === 'f') {
      return value * 9 / 5 + 32;
    } else if (toUnit === 'k') {
      return value + 273.15;
    }
    return value;
  }
  if (fromUnit === 'f') {
    if (toUnit === 'c') {
      return (value - 32) * 5 / 9;
    } else if (toUnit === 'k') {
      return (value + 459.67) * 5 / 9;
    }
    return value;
  }
  if (fromUnit === 'k') {
    if (toUnit === 'c') {
      return value - 273.15;
    } else if (toUnit === 'f') {
      return value * 9 / 5 - 459.67;
    }
    return value;
  }
  throw new Error('Invalid unit');
}

form.addEventListener('input', () => {
  const inputTemp = parseFloat(inputField.value);
  const fromUnit = fromUnitField.value;
  const toUnit = toUnitField.value;

  const outputTemp = convertTemp(inputTemp, fromUnit, toUnit);
  outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase();
});

Abra novamente o index.html ficheiro e adicione o seguinte código após a etiqueta de fecho </form> para carregar o ficheiro JavaScript:
```
<script src="converter.js"></script>
```

Agora, adicione algum estilo CSS à aplicação para torná-la visualmente mais apelativa. Crie um novo ficheiro chamado converter.css no seu projeto e adicione o seguinte código ao mesmo:

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 {
  width: 15rem;
  padding: 2rem;
  border-radius: .5rem;
  box-shadow: 0 0 2rem 0 #0001;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#converter input, #converter select {
  font-family: inherit;
  font-size: inherit;
  margin-block-end: 1rem;
  text-align: center;
  width: 10rem;
}

#converter #output-temp {
  font-size: 2rem;
  font-weight: bold;
}

Abra index.html novamente e referencie o novo ficheiro CSS no mesmo ao adicionar o seguinte código dentro da <head> etiqueta:
```
<link rel="stylesheet" href="converter.css">
```
O projeto do Visual Studio Code deverá agora ter um aspeto semelhante ao seguinte:
Aceda a http://localhost:8080 para ver a sua aplicação:

A sua aplicação faz algo útil agora e pode ser instalada como uma aplicação autónoma pelos utilizadores. Antes de instalar a aplicação, crie uma função de trabalho de serviço para que a aplicação funcione offline.

Passo 5 – Adicionar uma função de trabalho de serviço

Os trabalhadores de serviços são uma tecnologia fundamental que ajuda a tornar os PWAs rápidos e independentes das condições de rede.

Uma função de trabalho de serviço é uma função de trabalho Web especializada que pode intercetar pedidos de rede a partir do seu PWA e permite cenários como:

Suporte offline, incluindo ligações intermitentes.
Colocação em cache avançada.
Executar tarefas em segundo plano, como receber mensagens PUSH, adicionar distintivos ao ícone da aplicação ou obter dados de um servidor.

Um PWA não precisa de ter uma função de trabalho de serviço para o Microsoft Edge poder instalar a aplicação. No entanto, recomendamos que adicione uma função de trabalho de serviço ao seu PWA para a tornar mais rápida e para tornar o seu PWA mais fiável, como quando o dispositivo tem uma ligação de rede intermitente ou está offline.

Uma função de trabalho de serviço é definida num ficheiro JavaScript carregado pela sua aplicação. Para adicionar uma função de trabalho de serviço ao seu projeto:

No Visual Studio Code, crie um novo ficheiro (Ctrl+N), adicione o seguinte conteúdo e guarde o ficheiro como sw.js:

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 sw.js ficheiro funcionará como a função de trabalho de serviço do PWA. O código acima escuta o install evento, que é acionado quando o utilizador instala a sua aplicação e o utiliza para colocar em cache os recursos de que a sua aplicação precisa para funcionar offline, como a página HTML inicial, o ficheiro JavaScript do conversor e o ficheiro CSS do conversor.

O código também interceta eventos fetch , que ocorrem sempre que a sua aplicação envia um pedido ao servidor e aplica uma estratégia de cache-first. A função de trabalho de serviço devolve recursos em cache para que a sua aplicação possa funcionar offline e, se isso falhar, tentará transferir a partir do servidor.

Abra index.html e adicione o seguinte código no final da etiqueta para registar a <body> sua função de trabalho de serviço:
```
<script>
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', { scope: '/' });
}
</script>
```

Para confirmar que a função de trabalho de serviço está em execução:

No Microsoft Edge, aceda a http://localhost:8080.
Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.
Abra a ferramenta Aplicação e, em seguida, clique em Funções de trabalho de serviço. Se a função de trabalho de serviço não for apresentada, atualize a página.
Veja a cache da função de trabalho de serviço ao expandir o Armazenamento em Cache e selecionar temperature-converter-v1. Todos os recursos colocados em cache pela função de trabalho de serviço devem ser apresentados. Os recursos colocados em cache pela função de trabalho de serviço incluem o ícone da aplicação, o manifesto da aplicação e a página inicial.
Experimente o PWA como uma aplicação offline. Em DevTools, abra a ferramenta Rede e altere o valor Limitação para Offline.
Atualize a sua aplicação. Deve continuar a aparecer corretamente no browser, utilizando recursos em cache servidos pela função de trabalho de serviço.

Passo 6 – Instalar a aplicação

Agora que a sua aplicação tem um manifesto de aplicação Web, os browsers de suporte podem instalar a sua aplicação como um PWA.

No Microsoft Edge, assim que atualizar a sua aplicação, o botão Aplicação disponível é apresentado na barra de endereço. Clicar no botão Aplicação disponível pede-lhe para instalar a aplicação localmente.

Clique em Instalar para instalar a aplicação localmente. Após a conclusão da instalação, a sua aplicação é apresentada na sua própria janela e o respetivo ícone de aplicação na Barra de Tarefas.

O PWA de exemplo, instalado e em execução na sua própria janela

Para saber mais sobre como instalar PWAs, consulte Utilizar Aplicações Web Progressivas no Microsoft Edge.

Próximas etapas

O conversor de temperatura PWA que criou até agora é apenas uma pequena amostra do que os PWAs podem fazer. Os passos anteriores são pré-requisitos importantes para qualquer PWA, mas existem melhores práticas importantes que farão com que o seu PWA se sinta como uma aplicação real quando instalado.

Quando os utilizadores instalam aplicações, têm determinadas expectativas sobre o que estas aplicações podem fazer; Por exemplo:

Os utilizadores esperam que as aplicações funcionem offline.
Os utilizadores esperam que as aplicações se integrem no sistema operativo, por exemplo, ao processar ficheiros.
Os utilizadores esperam que as aplicações executem tarefas de computação não triviais.
Os utilizadores esperam encontrar aplicações nas lojas de aplicações.

Para criar um excelente PWA, veja Melhores práticas para PWAs.

Consulte também

Introdução às Aplicações Web Progressivas (Workshop).

Compartilhar via