Introdução ao desenvolvimento de um PWA

Um Progressive Web App (PWA) é um aplicativo que você cria usando tecnologias da Web, como HTML, CSS e JavaScript, e que também pode ser instalado e executado em vários sistemas operacionais de dispositivos, a partir de uma única base de código.

Usando este artigo junto com o exemplo de conversor de temperatura, que é feito para aprender a criar um PWA, você poderá:

  • Personalize o conversor de temperatura PWA fazendo pequenas modificações no código do exemplo.

  • Crie seu próprio PWA copiando e colando todo o diretório de exemplo e modificando extensivamente o código.

Consulte também:

A arquitetura de um Aplicativo Web Progressivo

O diagrama a seguir mostra a arquitetura de alto nível de um PWA (Aplicativo Web Progressivo):

Diagrama de arquitetura de um PWA

À esquerda, o dispositivo que executa o front-end do PWA tem os arquivos para o código de front-end de um PWA.

À direita, o servidor Web executa o código de back-end (ou conteúdo do banco de dados) de um PWA.

O dispositivo contém o código de front-end, incluindo HTML, CSS, JavaScript, o trabalho de serviço e o manifesto. Isso ocorre independentemente de o PWA (Aplicativo Web Progressivo) ser usado como um aplicativo Web no navegador ou como um aplicativo local instalado no dispositivo.

Como um aplicativo Web normal, um Aplicativo Web Progressivo é escrito usando as linguagens de programação da Web: HTML, CSS e JavaScript, e é distribuído aos seus usuários usando um servidor Web. Se o aplicativo Web for um Aplicativo Web Progressivo, o usuário inicialmente verá o aplicativo Web em um navegador da Web e a barra de endereços também terá um botão Aplicativo disponível que solicita que o usuário instale o aplicativo localmente.

Implantando um PWA em um servidor Web de produção

Para disponibilizar um PWA (Aplicativo Web Progressivo) aos usuários, implante-o em um servidor Web que seja acessível via HTTPS (ao contrário de um ambiente de desenvolvimento local). O servidor Web envia o código de front-end aos usuários e executa o código de back-end para o aplicativo Web.

Algumas partes da plataforma de Aplicativos Web Progressivos (PWAs), como trabalhadores de serviço, exigem o uso de HTTPS.

Se o Aplicativo Web Progressivo (PWA) não tiver código de back-end, o Aplicativo Web Progressivo (PWA) poderá ser servido de um servidor Web estático. Por exemplo, o conversor de temperatura em https://microsoftedge.github.io/Demos/temperature-converter/ usa o servidor estático github.io do GitHub.

O artigo Exemplo de conversor de temperatura faz com que você execute e teste o exemplo de Progressive Web App em seu servidor local. Quando seu próprio Progressive Web App foi testado e está pronto para ser distribuído, você distribui o PWA testado para seus usuários por meio de um servidor web (um provedor de hospedagem web).

Para atualizar seu Progressive Web App, implante a nova versão em seu servidor Web novamente.

Hosts de servidor Web de exemplo

Quando seu Aplicativo Web Progressivo (PWA) for publicado, você deverá publicá-lo em uma URL HTTPS. Muitos hosts usam HTTPS por padrão, mas se o host não oferecer HTTPS, o Let's Encrypt 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 Serviço de Aplicativo do Azure da Microsoft, ele será servido por HTTPS por padrão.

Você também pode hospedar seu site no GitHub Pages (pages.github.com), que dá suporte a HTTPS. Confira a documentação do GitHub Pages.

Sobre localhost (http) vs. servidor de produção (https)

Ao usar um servidor Web de desenvolvimento local no localhost endereço, a URL geralmente começa com , não https.http As principais partes da plataforma de Aplicativos Web Progressivos, como trabalhadores de serviço, exigem o uso de HTTPS, não HTTP.

Para fins de desenvolvimento e depuração, o Microsoft Edge (ou uma janela que hospeda um aplicativo local do PWA) permite que o localhost endereço execute as APIs do PWA (Aplicativo Web Progressivo) sem HTTPS.

Arquivos de código de front-end (código de interface do usuário)

Um Aplicativo Web Progressivo (PWA) tem arquivos de código de front-end que são enviados pelo servidor Web para o navegador no dispositivo local.

O código de front-end são os recursos necessários para que o aplicativo seja instalado no dispositivo do usuário, como código HTML, CSS e JavaScript.

Um PWA (Aplicativo Web Progressivo) normalmente inclui os seguintes arquivos de código de front-end:

  • Um arquivo HTML para descrever o conteúdo do seu aplicativo, como texto, imagens, campos de texto ou botões que aparecem na interface do usuário.

  • Um arquivo CSS para organizar o conteúdo HTML em um layout e fornecer estilos aos elementos.

  • Um arquivo JavaScript para adicionar interações do usuário à interface do usuário.

  • Um arquivo de manifesto JSON para descrever seu aplicativo para o sistema operacional do host.

  • Um arquivo de trabalho de serviço JavaScript para armazenar em cache os arquivos de código de front-end do aplicativo e executar tarefas em segundo plano.

O código de front-end para um Aplicativo Web Progressivo (PWA) é executado usando o navegador da Web do dispositivo. A própria interface do usuário do navegador não fica visível quando o aplicativo é executado em uma janela autônoma, que é uma janela simplificada do navegador com controles mínimos de interface do usuário.

Código de back-end, arquivos, pontos de extremidade e dados (código do lado do servidor)

Um PWA (Aplicativo Web Progressivo) potencialmente tem código de back-end que reside e é executado no servidor Web.

Como um aplicativo Web, um Progressive Web App pode incluir algum código de back-end (código do lado do servidor) que implementa qualquer ponto de extremidade de API de serviço Web necessário para seu aplicativo, quando conectado à Internet, para recuperar conteúdo dinâmico que pode ser armazenado em um banco de dados em seu servidor.

O código de back-end de um Aplicativo Web Progressivo pode usar os idiomas do lado do servidor de sua escolha, como:

  • ASP.NET
  • Java
  • Node.js
  • PHP

Os pontos de extremidade da API do serviço Web do lado do servidor podem não ser necessários, dependendo do aplicativo que você está criando.

O exemplo de conversor de temperatura PWA não tem nenhum código do lado do servidor, porque o aplicativo é executado exclusivamente no dispositivo em que está instalado e não precisa de dados do lado do servidor.

As seções restantes explicam os arquivos que compõem o exemplo do PWA.

O manifesto do aplicativo Web (manifest.json)

Um aplicativo Web normal só é executado no navegador. Ao adicionar um manifesto do aplicativo Web, o aplicativo Web se torna um PWA (Aplicativo Web Progressivo). O manifesto do aplicativo Web permite que navegadores compatíveis com PWAs instalem o aplicativo Web como um Aplicativo Web Progressivo no dispositivo.

Um manifesto de aplicativo Web é um arquivo JSON que contém metadados sobre o Progressive Web App, como nome, descrição, ícones e os vários recursos do sistema operacional que ele usa. O código JSON descreve o aplicativo para o sistema operacional do host. O arquivo de manifesto fornece informações básicas sobre o Aplicativo Web Progressivo, para uso do sistema operacional do dispositivo.

O nome do manifest.json arquivo é uma convenção comum, não um requisito estrito.

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

Consulte também:

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

Um PWA (Aplicativo Web Progressivo) pode usar um arquivo JavaScript de trabalho de serviço (como sw.js), para armazenar em cache arquivos de interface do usuário de front-end no dispositivo local. Um trabalho de serviço é definido em um arquivo JavaScript dedicado que é carregado pelo aplicativo (diferente do arquivo principal .js que contém a lógica do aplicativo).

Um service worker é um web worker especializado que pode interceptar solicitações de rede do seu Progressive Web App. O trabalho de serviço permite cenários como:

  • Suporte offline, incluindo conexão intermitente com a Internet.
  • Cache avançado no dispositivo.
  • Executar tarefas em segundo plano, como receber mensagens PUSH, adicionar selos ao ícone do aplicativo ou buscar dados de um servidor.

Um service worker é uma tecnologia fundamental que ajuda a tornar um Progressive Web App rápido e independente das condições da rede. O trabalho de serviço faz com que o aplicativo:

  • Mais rápido.
  • Mais confiável.
  • Independente de rede; O aplicativo continua funcionando (de alguma forma), mesmo com uma conexão de internet ausente ou intermitente.

Este arquivo desw.js de exemplo é um trabalho de serviço que gerencia arquivos de cache que fazem parte do conversor de temperatura PWA, armazenando os arquivos em cache na unidade local e servindo-os quando não há conexão com a Internet.

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

Esse trabalho de serviço armazena três arquivos em cache explicitamente:

  • ./ significa index.html
  • ./converter.js
  • ./converter.css

Dois arquivos adicionais são armazenados em cache automaticamente pelo navegador:

  • O arquivo de ícone (.png).
  • O arquivo de manifesto (.json).

Escutando o install evento

O trabalho de serviço escuta o install evento, que é acionado quando o usuário instala o aplicativo, e o usa para armazenar em cache os recursos de que seu aplicativo precisa para funcionar offline, como:

  • A página HTML inicial.
  • O arquivo JavaScript principal do aplicativo que contém a lógica do aplicativo.
  • O arquivo CSS do aplicativo.

Para habilitar a instalação do aplicativo, um arquivo de trabalho do serviço JavaScript permite que o aplicativo funcione offline (sem sempre ter uma conexão com a Internet), armazenando em cache os arquivos de front-end necessários no dispositivo local.

Escutando o fetch evento

O trabalho de serviço intercepta fetch eventos, que acontecem toda vez que seu aplicativo envia uma solicitação ao servidor, e aplica uma estratégia de cache primeiro.

O trabalho de serviço retorna recursos armazenados em cache para que seu aplicativo possa funcionar offline e, se isso falhar, o trabalho de serviço tentará baixar o arquivo do servidor.

Um trabalho de serviço é opcional

Um PWA (Aplicativo Web Progressivo) não precisa ter um trabalho de serviço para que o Microsoft Edge possa instalar o aplicativo. No entanto, recomendamos incluir um service worker em seu próprio Progressive Web App para torná-lo mais rápido e confiável, como quando o dispositivo tem uma conexão de rede intermitente ou está offline.

Consulte também:

Próximas etapas

Execute as etapas em Amostra do conversor de temperatura. Em seguida, para criar seu próprio Progressive Web App (PWA), você pode copiar, colar e modificar o Demos\temperature-converter diretório. O exemplo do conversor de temperatura demonstra apenas um pequeno exemplo do que os PWAs (Aplicativos Web Progressivos) podem fazer. O exemplo demonstra o código que é importante para qualquer PWA (Aplicativo Web Progressivo), como funcionar quando não há conexão com a Internet.

Existem práticas recomendadas adicionais para PWAs para fazer com que um PWA (Aplicativo Web Progressivo) pareça um aplicativo nativo:

  • Integre o aplicativo ao sistema operacional, por exemplo, manipulando arquivos.

  • Execute tarefas de computação não triviais.

  • Carregue o aplicativo nas lojas de aplicativos.

Consulte também

MDN:

Hospedagem:

amostra:

  • Last updated on