Compartilhar via

Introdução ao desenvolvimento de um PWA

Uma Aplicação Web Progressiva (PWA) é uma aplicação que cria através de tecnologias Web como HTML, CSS e JavaScript, e que também pode ser instalada e executada em vários sistemas operativos de dispositivos, a partir de uma única base de código.

Ao utilizar este artigo juntamente com o exemplo de conversor de temperatura, que é feito para aprender a criar um PWA, poderá:

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

  • Crie o seu próprio PWA ao copiar e colar todo o diretório de exemplo e modificar extensivamente o código.

Consulte também:

A arquitetura de uma Aplicação Web Progressiva

O diagrama seguinte mostra a arquitetura de alto nível de uma Aplicação Web Progressiva (PWA):

Diagrama de arquitetura de um PWA

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

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

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. Isto acontece independentemente de a Aplicação Web Progressiva (PWA) ser utilizada como uma aplicação Web no browser ou como uma aplicação local instalada no dispositivo.

Tal como uma aplicação Web normal, uma Aplicação Web Progressiva é escrita com as linguagens de programação da Web: HTML, CSS e JavaScript e é distribuída aos seus utilizadores através de um servidor Web. Se a aplicação Web for uma Aplicação Web Progressiva, o utilizador vê inicialmente a aplicação Web num browser e a Barra de endereço também tem um botão Aplicação disponível que pede ao utilizador para instalar a aplicação localmente.

Implementar um PWA num servidor Web de produção

Para disponibilizar uma Aplicação Web Progressiva (PWA) aos utilizadores, implemente a Aplicação Web Progressiva (PWA) num servidor Web acessível através de HTTPS (ao contrário de um ambiente de desenvolvimento local). O servidor Web envia o código de front-end aos utilizadores e executa o código de back-end da aplicação Web.

Algumas partes da plataforma progressive Aplicativos Web (PWAs), como os trabalhadores de serviços, exigem a utilização de HTTPS.

Se a Aplicação Web Progressiva (PWA) não tiver código de back-end, a Aplicação Web Progressiva (PWA) pode ser servida a partir de um servidor Web estático. Por exemplo, o conversor de Temperatura em https://microsoftedge.github.io/Demos/temperature-converter/ utiliza o github.io servidor estático do GitHub.

O artigo Exemplo de conversor de temperatura faz com que execute e teste o exemplo de Aplicação Web Progressiva no servidor local. Quando a sua própria Aplicação Web Progressiva tiver sido testada e estiver pronta para ser distribuída, distribua o PWA testado aos seus utilizadores através de um servidor Web (um fornecedor de alojamento Web).

Para atualizar a Aplicação Web Progressiva, implemente novamente a nova versão no servidor Web.

Exemplo de anfitriões de servidor Web

Quando a Aplicação Web Progressiva (PWA) entrar em direto, tem de publicá-la 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 Azure. Se alojar o seu site no microsoft Serviço de Aplicativo do Azure, este é servido através de HTTPS por predefinição.

Também pode alojar o seu site no GitHub Pages (pages.github.com), que suporta HTTPS. Veja GitHub Pages documentação.

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

Ao utilizar um servidor Web de desenvolvimento local no localhost endereço, o URL normalmente começa com http, não httpscom . As principais partes da plataforma de Aplicativos Web Progressiva, como os trabalhadores de serviços, requerem a utilização de HTTPS e não HTTP.

Para fins de desenvolvimento e depuração, o Microsoft Edge (ou uma janela que aloja uma aplicação local do PWA) permite que o localhost endereço execute as APIs da Aplicação Web Progressiva (PWA) sem HTTPS.

Ficheiros de código de front-end (código de IU)

Uma Aplicação Web Progressiva (PWA) tem ficheiros de código de front-end que são enviados pelo servidor Web para o browser no dispositivo local.

O código de front-end são os recursos necessários para a aplicação ser instalada no dispositivo do utilizador, como CÓDIGO HTML, CSS e código JavaScript.

Normalmente, uma Aplicação Web Progressiva (PWA) inclui os seguintes ficheiros de código de front-end:

  • Um ficheiro 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.

  • Um ficheiro CSS para organizar o conteúdo HTML num esquema e fornecer estilos aos elementos.

  • Um ficheiro JavaScript para adicionar interações de utilizador à sua interface de utilizador.

  • Um ficheiro de manifesto JSON para descrever a sua aplicação ao sistema operativo anfitrião.

  • Um ficheiro de trabalho do serviço JavaScript para colocar em cache os ficheiros de código de front-end da aplicação e executar tarefas em segundo plano.

O código de front-end para uma Aplicação Web Progressiva (PWA) é executado com o browser do dispositivo. A IU do próprio browser não é visível quando a aplicação é executada numa janela autónoma, que é uma janela simplificada do browser com controlos mínimos de IU do browser.

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

Uma Aplicação Web Progressiva (PWA) tem potencialmente código de back-end que reside e é executado no servidor Web.

Tal como uma aplicação Web, uma Aplicação Web Progressiva pode incluir algum código de back-end (código do lado do servidor) que implementa quaisquer pontos finais da API do serviço Web que são necessários para a sua aplicação, quando ligada à Internet, para obter conteúdo dinâmico que possa ser armazenado numa base de dados no seu servidor.

O código de back-end de uma Aplicação Web Progressiva pode utilizar os idiomas do lado do servidor à sua escolha, tais como:

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

Os pontos finais da API do serviço Web do lado do servidor podem não ser necessários, consoante a aplicação que estiver a criar.

O exemplo de conversor de temperatura PWA 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.

As restantes secções explicam os ficheiros que compõem o exemplo do PWA.

O manifesto da aplicação Web (manifest.json)

Uma aplicação Web normal só é executada no browser. Ao adicionar um manifesto de aplicação Web, a aplicação Web torna-se uma Aplicação Web Progressiva (PWA). O manifesto da aplicação Web permite que os browsers que suportam PWAs instalem a aplicação Web como uma Aplicação Web Progressiva no dispositivo.

Um manifesto de aplicação Web é um ficheiro JSON que contém metadados sobre a Aplicação Web Progressiva, como o nome, descrição, ícones e as várias funcionalidades do sistema operativo que utiliza. O código JSON descreve a aplicação para o sistema operativo anfitrião. O ficheiro de manifesto fornece informações básicas sobre a Aplicação Web Progressiva, para o sistema operativo do dispositivo utilizar.

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

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:

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

Uma Aplicação Web Progressiva (PWA) pode utilizar um ficheiro JavaScript de trabalho de serviço (como sw.js), para colocar em cache ficheiros de front-end e IU para o dispositivo local. Uma função de trabalho de serviço é definida num ficheiro JavaScript dedicado que é carregado pela aplicação (diferente do ficheiro principal .js que contém a lógica da aplicação).

Uma função de trabalho de serviço é uma função de trabalho Web especializada que pode intercetar pedidos de rede a partir da sua Aplicação Web Progressiva. A função de trabalho de serviço permite cenários como:

  • Suporte offline, incluindo ligação intermitente à Internet.
  • Colocação em cache avançada no dispositivo.
  • Executar tarefas em segundo plano, como receber mensagens PUSH, adicionar distintivos ao ícone da aplicação ou obter dados de um servidor.

Uma função de trabalho de serviço é uma tecnologia fundamental que ajuda a tornar uma Aplicação Web Progressiva rápida e independente das condições de rede. A função de trabalho de serviço faz a aplicação:

  • Mais rápido.
  • Mais fiável.
  • Independente da rede; A aplicação continua a funcionar (de alguma forma), mesmo com uma ligação à Internet em falta ou intermitente.

Este ficheiro desw.js de exemplo é um trabalho de serviço que gere os ficheiros de colocação em cache que fazem parte do conversor de temperatura PWA, colocando os ficheiros em cache na unidade local e servindo-os quando não há ligação à 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
        }
    }
  })());
});

Esta função de trabalho de serviço coloca explicitamente em cache três ficheiros:

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

Dois ficheiros adicionais são colocados em cache automaticamente pelo browser:

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

Escutar o install evento

A função de trabalho de serviço escuta o install evento, que é acionado quando o utilizador instala a aplicação e o utiliza para colocar em cache os recursos de que a sua aplicação precisa para funcionar offline, tais como:

  • A página HTML inicial.
  • O ficheiro JavaScript principal da aplicação que contém a lógica da aplicação.
  • O ficheiro CSS da aplicação.

Para ativar a instalação da aplicação, um ficheiro de trabalho do serviço JavaScript torna a aplicação capaz de funcionar offline (sem ter sempre uma ligação à Internet), colocando em cache os ficheiros front-end necessários no dispositivo local.

Escutar o fetch evento

A função de trabalho de serviço interceta eventos fetch , que ocorrem sempre que a 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, a função de trabalho de serviço tenta transferir o ficheiro a partir do servidor.

Uma função de trabalho de serviço é opcional

Uma Aplicação Web Progressiva (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 incluir uma função de trabalho de serviço na sua própria Aplicação Web Progressiva para torná-la mais rápida e tornar a aplicação mais fiável, como quando o dispositivo tem uma ligação de rede intermitente ou está offline.

Consulte também:

Próximas etapas

Efetue os passos em Exemplo de conversor de temperatura. Em seguida, para criar a sua própria Aplicação Web Progressiva (PWA), pode copiar, colar e modificar o Demos\temperature-converter diretório. O exemplo do conversor de temperatura demonstra apenas uma pequena amostra do que o Progressive Aplicativos Web (PWAs) pode fazer. O exemplo demonstra código que é importante para qualquer Aplicação Web Progressiva (PWA), como trabalhar quando não há ligação à Internet.

Existem melhores práticas adicionais para os PWAs fazer com que uma Aplicação Web Progressiva (PWA) se sinta como uma aplicação nativa:

  • Integre a aplicação no sistema operativo, por exemplo, ao processar ficheiros.

  • Executar tarefas de computação nãotriviais.

  • Carregue a aplicação para as lojas de aplicações.

Consulte também

MDN:

Alojamento:

Exemplo:

  • Last updated on