Criar um site offline com PWA

Com os recentes avanços na tecnologia Web, cada vez mais programadores estão a voltar a sua atenção para Aplicações Web progressivas (PWA). Os PWAs permitem que os sites funcionem offline, proporcionando aos utilizadores uma experiência perfeita, mesmo quando a conetividade de rede é limitada ou não está disponível. Nesta publicação do blogue, vamos explorar o que é um PWA, como implementar a funcionalidade offline e como configurar os ficheiros essenciais, manifest.json e sw.jspara que o seu sítio Web funcione offline.

O que é um PWA?

A Progressive Web App (PWA) é um tipo de aplicação que combina as vantagens das aplicações Web e nativas. Os PWAs proporcionam uma experiência de utilizador rápida, fiável e capaz de funcionar offline. Uma das caraterísticas de destaque de um PWA é a sua capacidade de funcionar offline, activada através de uma tecnologia conhecida como Trabalhador de serviço.

Progressivo: Funciona para todos os utilizadores, independentemente da sua escolha de browser, e melhora progressivamente com base nas capacidades do browser.
Responsivo: Adapta-se a vários dispositivos e tamanhos de ecrã.
Capacidade offline: Funciona mesmo em ambientes offline ou de baixa conetividade, melhorando a experiência do utilizador.
Experiência semelhante a uma aplicação: Proporciona uma experiência semelhante à das aplicações nativas, incluindo a capacidade de ser adicionado ao ecrã inicial e de enviar notificações push.
Sempre atualizado: Mantém automaticamente o conteúdo atualizado sem actualizações manuais.

Implementar a funcionalidade offline num PWA

A funcionalidade offline de um PWA é implementada principalmente utilizando um Trabalhador de serviço. Um service worker é um ficheiro JavaScript que é executado em segundo plano, intercepta pedidos de rede e serve recursos em cache quando a rede não está disponível. Para implementar isto, são necessários dois ficheiros essenciais:

manifest.json: Um ficheiro de metadados que define o nome da aplicação, os ícones, o URL de início e outras definições.
sw.js: Um ficheiro de trabalho de serviço que trata dos pedidos de cache e de rede.

Vamos analisar cada ficheiro em pormenor e dar exemplos.

`manifest.json` Ficheiro: Definir metadados da aplicação

O manifest.json contém definições para a sua aplicação, tais como o nome, os ícones, o URL de início e o modo de apresentação. Este ficheiro é crucial para tornar a sua aplicação Web instalável e acessível offline.

Exemplo: `manifest.json`

{
  "name": "PWA com capacidade offline",
  "short_name": "PWA",
  "description": "Uma aplicação Web progressiva com capacidades offline",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "cor_do_tema": "#0000ff",
  "ícones": [
    {
      "src": "/icons/icon-192x192.png",
      "tamanhos": "192x192",
      "tipo": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "tipo": "image/png"
    }
  ]
}

Neste exemplo:

start_url: Define o URL que será aberto quando o utilizador iniciar a aplicação a partir do ecrã inicial.
ecrã: Definir para autónomo para que a aplicação tenha o aspeto e a sensação de uma aplicação nativa sem a IU do browser.
ícones: Especifica os ícones a utilizar quando a aplicação é adicionada ao ecrã inicial.

O manifest.json deve ser ligado ao HTML da seguinte forma:

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

`sw.js` Ficheiro: Implementar a funcionalidade offline com um Service Worker

O service worker é um componente chave que permite que a sua aplicação web funcione offline. Ele intercepta solicitações de rede e serve recursos em cache, garantindo uma experiência tranquila mesmo quando a rede está inoperante.

Exemplo: `sw.js`

Eis um exemplo básico de um service worker para implementar a funcionalidade offline:

const CACHE_NAME = 'offline-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icons/icon-192x192.png',
  '/icons/icon-512x512.png'
];

// Evento de instalação para o trabalhador do serviço
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => {
        console.log('Cache aberta');
        return cache.addAll(urlsToCache); // Cache de recursos essenciais
      })
  );
});

// Evento de ativação para o trabalhador do serviço
self.addEventListener('activate', (event) => {
  console.log('Service Worker ativado');
  // A lógica para excluir caches antigos pode ser adicionada aqui
});

// Evento Fetch para intercetar pedidos de rede
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        if (response) {
          return response; // Retorna o recurso em cache
        }
        return fetch(event.request) // Buscar na rede
          .catch(() => caches.match('/offline.html')); // Fornecer página offline se a rede falhar
      })
  );
});

Neste exemplo:

Evento de instalação (instalar): O trabalhador do serviço coloca em cache os recursos especificados em urlsToCache quando é instalado pela primeira vez.
Ativar evento (ativar): É executado quando o trabalhador do serviço é ativado. Este evento pode ser utilizado para limpar caches antigos.
Evento Fetch (buscar): Intercepta pedidos de rede e devolve respostas em cache, se disponíveis; caso contrário, vai buscar recursos à rede. Se a rede não estiver disponível, serve uma página offline (por exemplo, /offline.html).

Para registar o service worker no seu ficheiro HTML, adicione o seguinte script:

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js')
        .then((registration) => {
          console.log('Service Worker registered with scope:', registration.scope);
        }, (error) => {
          console.error('Service Worker registration failed:', error);
        });
    });
  }
</script>

Este script verifica se o browser suporta service workers e regista o service worker no carregamento da página.

Conclusão

Os PWAs são particularmente úteis para proporcionar uma experiência Web fiável, mesmo em ambientes offline ou quando a conetividade de rede é instável. Ao definir as definições da sua aplicação no manifest.json e implementando estratégias de cache em sw.jspode criar um sítio Web que funcione offline e ofereça uma experiência rápida, semelhante a uma aplicação, aos seus utilizadores.

Agora, experimente aplicar o PWA ao seu projeto Web e ofereça uma aplicação Web acessível e robusta na qual os utilizadores podem confiar em qualquer altura e em qualquer lugar, mesmo sem uma ligação à Internet.

Em WordPress

Existe também um plugin chamado Super PWA. Este plugin facilita a transformação de um sítio Web WordPress numa aplicação Web progressiva (PWA) com um esforço mínimo. O Super PWA ajuda a implementar caraterísticas essenciais do PWA, como o suporte offline, a interface semelhante a uma aplicação e a capacidade de os utilizadores adicionarem o sítio Web ao seu ecrã inicial.

O Super PWA gera automaticamente o manifest.json e configura o sw.js (service worker) para si, o que simplifica o processo de transformar o seu site WordPress num PWA totalmente funcional. Ele também oferece opções de personalização para definir o nome do aplicativo, ícones, cor do tema e muito mais. Isto faz com que seja uma excelente escolha para os utilizadores do WordPress que procuram aproveitar os benefícios dos PWAs sem terem de mergulhar numa codificação complexa.

O que é um PWA?

Implementar a funcionalidade offline num PWA

manifest.json Ficheiro: Definir metadados da aplicação

Exemplo: manifest.json

sw.js Ficheiro: Implementar a funcionalidade offline com um Service Worker

Exemplo: sw.js