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.js
para 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 paraautó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 emurlsToCache
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.js
pode 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.