Começar a trabalhar com Aplicativos Web Progressivos

  • Artigo

PWAs (Aplicativos Web progressivos) são aplicativos que você cria usando tecnologias Web e que podem ser instalados e podem ser executados em todos os dispositivos, a partir de uma base de código.

Para saber mais sobre quais PWAs são e seus benefícios, confira Visão geral do APLICATIVOS WEB Progressivo (PWAs).

Este guia é direcionado a desenvolvedores Web que desejam aprender a criar PWAs. Para saber mais sobre como instalar e executar PWAs, confira Instalando um PWA no Use Progressive Aplicativos Web no Microsoft Edge.

Neste guia, primeiro você aprende como as PWAs funcionam e, em seguida, cria seu primeiro PWA simples, que será um aplicativo conversor de temperatura e, em seguida, aprenderá mais sobre como fazer grandes PWAs.

Você pode encontrar o código-fonte final do aplicativo que você criará neste guia sobre o repositório de aplicativos de demonstração de demonstração do PWA.

Pré-requisitos

  • Instale Visual Studio Code para editar seu código-fonte PWA.
  • Instale Node.js para usá-lo como seu servidor Web local.
  • O conhecimento de trabalho de HTML, CSS e JavaScript também é uma vantagem.

A arquitetura de um PWA

Os Aplicativos Web progressivos são escritos usando as linguagens de programação da Web: HTML, CSS e JavaScript e são distribuídos aos usuários usando servidores Web.

Para disponibilizar seu aplicativo aos usuários, você o implantará em um servidor Web acessível por meio do HTTPS. Seu servidor contém:

  • Código de back-end: os pontos de extremidade necessários pelo seu aplicativo, quando conectados à Internet, para recuperar conteúdo dinâmico que pode ser armazenado em um banco de dados em seu servidor.
  • Código de front-end: os recursos necessários para que o aplicativo seja instalado no dispositivo do usuário, como código HTML, CSS e JavaScript.

Seu código de back-end pode usar os idiomas do lado do servidor de sua escolha, como ASP.NET, Java, Node.js ou PHP. Observe, no entanto, que os pontos de extremidade do lado do servidor podem nem ser necessários dependendo do aplicativo que você está criando. O PWA que você cria neste tutorial não tem nenhum código do lado do servidor, pois o aplicativo é executado exclusivamente no dispositivo em que está instalado e não precisa de dados do lado do servidor.

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

Você usa HTML para descrever o conteúdo em seu aplicativo, como o texto, imagens, campos de texto ou botões que aparecem na interface do usuário. Em seguida, você usa o CSS para organizar o conteúdo HTML em um layout e fornecer estilos aos elementos. Você usa o JavaScript para adicionar interações do usuário à interface do usuário. Por fim, você usa um arquivo de manifesto JSON que descreve seu aplicativo para o sistema operacional host.

Observe que, embora o código de front-end seja executado usando o navegador da Web do dispositivo, a interface do usuário do navegador pode não estar visível, pois seu aplicativo pode optar por executar em uma janela autônoma.

Além do código de interface do usuário, você também usa JavaScript para tornar seu aplicativo mais rápido, confiável e independente de rede usando um arquivo de trabalho de serviço. Por fim, o código de front-end também contém um arquivo de manifesto JSON que descreve seu aplicativo para o sistema operacional host.

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

Diagrama de arquitetura de um PWA

Etapa 1 – Iniciar um servidor Web

As PWAs são distribuídas aos usuários usando servidores Web. Depois que seu aplicativo estiver pronto, implante-o na Web usando um provedor de hospedagem Web. Em seguida, você pode atualizar seu aplicativo simplesmente implantando a nova versão no servidor Web novamente.

Para começar a desenvolver seu PWA, você pode usar um servidor Web local. Para iniciar um servidor local:

  1. Crie uma nova pasta no computador em que o servidor Web será executado.

    Você pode fazer isso abrindo um prompt de comando e digitando:

    cd path/to/your/dev/folder
mkdir MySamplePWA
cd MySamplePWA

  2. Inicie o servidor usando a http-server biblioteca de Node.js:

    npx http-server

Agora você tem um servidor Web local simples em execução em http://localhost:8080.

As principais partes da plataforma de Aplicativos Web progressiva, como Os Trabalhadores de Serviço, exigem o uso de HTTPS. Quando o PWA entrar em operação, você deve publicá-lo em uma URL HTTPS. Muitos hosts agora oferecem HTTPS por padrão, mas se o host não o fizer, vamos criptografar oferece uma alternativa gratuita para criar os certificados necessários.

Por exemplo, você pode criar uma conta gratuita do Azure. Se você hospedar seu site no Microsoft Serviço de Aplicativo do Azure, ele será servido por https por padrão.

Você também pode hospedar seu site no GitHub Pages que também dá suporte a HTTPS.

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

Etapa 2 – Criar sua página inicial do aplicativo

Até agora, não há conteúdo disponível em seu servidor Web. Comece criando a primeira página que os usuários verão quando acessarem o aplicativo conversor de temperatura.

  1. Abra Visual Studio Code, selecionePasta AbrirArquivo> e selecione o MySamplePWA diretório que você criou na etapa anterior.

  2. Crie um novo arquivo no projeto pressionando Ctrl+N, adicione o conteúdo a seguir e salve o arquivo 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>

  3. Acesse para http://localhost:8080 exibir seu aplicativo:

    Executando seu novo PWA em localhost

O aplicativo é executado no navegador por enquanto e não pode ser instalado. Para tornar o aplicativo instalável, o aplicativo precisa de um manifesto do aplicativo Web.

Etapa 3 – Criar um manifesto de aplicativo Web

Um Manifesto do Aplicativo Web é um arquivo JSON que contém metadados sobre seu aplicativo, como seu nome, descrição, ícones e os vários recursos do sistema operacional que ele usa.

Para adicionar um manifesto de aplicativo ao seu aplicativo:

  1. Em Visual Studio Code, pressione Ctrl+N para criar um novo arquivo com o conteúdo a seguir e salve o arquivo 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"
        }
    ]
}

  2. Adicione uma imagem de ícone de aplicativo de 512x512 pixels nomeada icon512.png ao seu projeto. Você pode usar a imagem de exemplo para fins de teste.

  3. Em Visual Studio Code, abra index.htmle adicione o código a seguir dentro da <head> marca.

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

O snippet de código acima vincula o novo arquivo de manifesto do aplicativo Web ao seu site.

Seu projeto VS Code agora deve ser um pouco parecido com este:

Captura de tela do VS Code mostrando o projeto PWA de exemplo, com os arquivos index.html, manifest.json e ícone

Etapa 4 – Continuar criando a interface do usuário do seu aplicativo

Agora que seu aplicativo tem um arquivo de manifesto do aplicativo Web e uma página inicial, é hora de compilar a funcionalidade do aplicativo main.

Nesta etapa do tutorial, criaremos um aplicativo de conversão de unidade de temperatura básica.

  1. Para criar o conteúdo da interface do usuário main, copie o seguinte código HTML e cole-o no index.html arquivo, substituindo a <h1> marca 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 seu aplicativo usará para converter um valor de temperatura de uma unidade para outra unidade.

  2. Para fazer o conversor funcionar, use o código JavaScript. Crie um novo arquivo nomeado converter.js em seu projeto e adicione o seguinte código a ele:

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

  3. Abra o index.html arquivo novamente e adicione o seguinte código após a marca de fechamento </form> para carregar o arquivo JavaScript:

    <script src="converter.js"></script>

  4. Agora, adicione um pouco de estilo CSS ao aplicativo, para torná-lo mais interessante visualmente. Crie um novo arquivo chamado converter.css em seu projeto e adicione o seguinte código a ele:

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

  5. Abra index.html novamente e referencie o novo arquivo CSS nele adicionando o seguinte código dentro da <head> marca:

    <link rel="stylesheet" href="converter.css">

    Seu projeto de Visual Studio Code agora deve ser semelhante a este:

    O projeto PWA de exemplo no Visual Studio Code, com os arquivos index.html, converter.js, converter.css e manifest.json

  6. Acesse para http://localhost:8080 exibir seu aplicativo:

    Executando seu novo PWA, com o código de front-end, em localhost

Seu aplicativo faz algo útil agora, mas ainda não pode ser instalado, porque não há nenhum funcionário de serviço. Você tornará seu aplicativo instalável na próxima etapa, criando um trabalho de serviço.

Etapa 5 – Adicionar um trabalho de serviço

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

Os trabalhadores do serviço são trabalhadores Web especializados que interceptam solicitações de rede do seu PWA e habilitam cenários anteriormente limitados a aplicativos nativos, incluindo:

  • Suporte offline.
  • Cache avançado.
  • Executar tarefas em segundo plano, como receber mensagens PUSH, adicionar selos ao ícone do aplicativo ou buscar dados de um servidor.

Para que o Microsoft Edge possa instalar o aplicativo, seu aplicativo deve ter um arquivo de trabalho de serviço.

Um trabalho de serviço é definido em um arquivo JavaScript carregado pelo seu aplicativo. Para adicionar um trabalho de serviço ao seu projeto:

  1. Em Visual Studio Code, crie um novo arquivo (Ctrl+N), adicione o seguinte conteúdo e salve o arquivo 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 arquivo atuará como o trabalho de serviço da PWA. O código acima escuta o evento e o install usa para armazenar em cache todos os recursos que o aplicativo precisa para funcionar: a página HTML inicial, o arquivo JavaScript conversor e o arquivo CSS do conversor.

    O código também intercepta fetch eventos, que acontecem sempre que seu aplicativo envia uma solicitação para o servidor e aplica uma estratégia de cache primeiro. O trabalhador do serviço retorna recursos armazenados em cache para que seu aplicativo possa funcionar offline e, se isso falhar, tente baixar do servidor.

  2. Abra index.html e adicione o seguinte código no final da marca para registrar seu <body> trabalho de serviço:

    <script>
if('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', { scope: '/' });
}
</script>

Para confirmar se o trabalho de serviço está em execução:

  1. No Microsoft Edge, acesse http://localhost:8080.

  2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

  3. Abra a ferramenta Aplicativo e, em seguida, Os Trabalhadores de Serviço. Se o trabalho de serviço não for exibido, atualize a página.

    A ferramenta Aplicativo DevTools, mostrando o painel Trabalhos de Serviço, com o novo sw.js trabalho em execução

  4. Exiba o cache do trabalho de serviço expandindo o Armazenamento de Cache e selecionando o conversor de temperatura-v1. Todos os recursos armazenados em cache pelo trabalhador do serviço devem ser exibidos. Os recursos armazenados em cache pelo trabalhador do serviço incluem o ícone do aplicativo, o manifesto do aplicativo e a página inicial.

    DevTools, mostrando onde exibir os recursos armazenados em cache

  5. Experimente seu PWA como um aplicativo offline. Em DevTools, abra a ferramenta Rede e altere o valor de limitação para Offline.

  6. Atualize seu aplicativo. Ele ainda deve aparecer corretamente no navegador, usando recursos armazenados em cache atendidos pelo trabalhador do serviço.

    DevTools, mostrando onde alternar o valor de limitação para Offline

Etapa 6 – Instalar o aplicativo

Agora que seu aplicativo tem um manifesto de aplicativo Web e um funcionário do serviço, os navegadores de suporte podem instalá-lo como um PWA.

No Microsoft Edge, depois de atualizar seu aplicativo, o botão Aplicativo disponível será exibido na barra de endereços. Clicar no botão Aplicativo disponível solicita que você instale o aplicativo localmente.

Microsoft Edge, com o PWA de exemplo em uma guia. O botão Aplicativo disponível na barra de endereços foi clicado e o prompt de instalação é exibido

Clique em Instalar para instalar o aplicativo localmente. Após a conclusão da instalação, seu aplicativo será exibido em sua própria janela e seu próprio ícone de aplicativo na barra de tarefas.

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

Para saber mais sobre como instalar PWAs, consulte Usar Aplicativos Web Progressivo no Microsoft Edge.

Próximas etapas

O conversor de temperatura simples PWA que você criou até agora apenas arranha a superfície do que pwas podem fazer. As etapas anteriores são pré-requisitos importantes para qualquer PWA, mas há práticas recomendadas importantes que farão seu PWA se sentir como um aplicativo real quando instalado.

Quando os usuários instalam aplicativos, eles têm certas expectativas do que esses aplicativos podem fazer; por exemplo:

  • Os usuários esperam que os aplicativos funcionem offline.
  • Os usuários esperam que os aplicativos se integrem ao sistema operacional, como manipulando arquivos.
  • Os usuários esperam que os aplicativos executem tarefas de computação não triviais.
  • Os usuários esperam encontrar aplicativos em lojas de aplicativos.

Para criar um grande PWA, consulte Melhores práticas para PWAs.

Consulte também