Inscreva-se em minha Newsletter
Um Progressive Web App, ou PWA, usa recursos da web para oferecer uma experiência semelhante a um aplicativo. Qualquer site pode ser um PWA, veja como fazer uma PWA.
Transformar um site básico em um PWA não é tão difícil e tem muitos benefícios, então quero dar uma olhada nas três principais etapas necessárias para tornar seu site em uma PWA.
Mas primeiro, deixe-me citar alguns erros comuns:
Sua aplicação não precisa ser um “Aplicativo” para ser uma PWA
Uma PWA pode ser facilmente um blog, um site institucional, uma loja ou uma coleção de memes de gatos. Na essência, um PWA é apenas uma maneira de otimizar seu código para uma entrega melhor e mais rápida. Você pode e deve aproveitar essas novas possibilidades, independentemente do seu conteúdo.
O termo “Aplicativo” em PWA é muito debatido, pois algumas pessoas acham que ele comunica a idéia errada. Na minha opinião é apenas um nome, hoje em dia é difícil definir a diferença entre sites e “web apps”.
Você não precisa ser uma Single Page Application baseada em JavaScript Mesmo se você não possuir uma SPA de última geração não há razão para não usar essa tecnologia. Meu site é baseado no Nuxt.js, um Framework do Vue.js e é uma PWA. Se você possui qualquer tipo de aplicação web poderá se tornar uma PWA.
As PWAs não são feitas especificamente para o Google ou Android
A beleza disso é que as PWAs oferecem o melhor dos dois mundos - links diretos e URLs da www, acesso offline, notificações push e muito mais a partir de aplicativos nativos, enquanto permanecem completamente independentes da plataforma. Nenhuma loja de aplicativos, nenhuma base de código iOS / Android separada, apenas a web.
As PWAs estão prontas e seguras para uso atualmente
O “P” significa progressivo, o que significa que tudo nele pode ser visto como uma camada extra de aprimoramento. Se um navegador antigo não o suportar, ele não será interrompido; ele volta ao padrão: um site comum.
Porque desenvolver uma PWA?
Transformar seu site em um PWA oferece algumas vantagens:
- Uma experiência do usuário mais rápida e segura
- Uma melhor classificação na SERP (SEO)
- Melhor usabilidade
- Melhor performance
- Acesso offline
Mesmo se você não espera que seus usuários “instalem” sua PWA (colocar um atalho na tela inicial), ainda há muito a ganhar. De fato, todas as etapas necessárias para criar uma PWA melhorarão o seu site e são consideradas práticas recomendadas.
Passo 1: O Manifesto
Um manifesto é apenas um arquivo JSON que descreve todos os metadados do seu PWA. Coisas como o nome, o idioma e o ícone do seu aplicativo estão aí. Essas informações informam aos navegadores como exibir seu aplicativo quando ele é salvo como um atalho. Parece algo como isto:
{
"lang": "pt",
"dir": "ltr",
"name": "Meu site em PWA",
"short_name": "sitePWA",
"icons": [
{
"src": "\/assets\/images\/touch\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png"
}
],
"theme_color": "#1a1a1a",
"background_color": "#1a1a1a",
"start_url": "/",
"display": "standalone",
"orientation": "natural"
}
Isso geralmente é chamado de manifest.json e inserido a partir da <head> do seu site:
<link rel="manifest" href="manifest.json">
🔥 Dica: você não precisa escrever esse arquivo. Existem diferentes tamanhos de ícones para diferentes sistemas, e fazer tudo certo pode ser entediante. Em vez disso, basta criar uma imagem de 500 x 500 do ícone do seu aplicativo (provavelmente o seu logotipo) e acessar o Real Favicon Generator.
Eles processam todos os tamanhos comuns, fornecem metatags e geram um arquivo de manifesto para você. É incrível!
Passo 2: HTTPS
As PWAs precisam estar uma conexão segura, seu site precisa estar utilizando o protocolo HTTPS. O HTTPS criptografa os dados que os usuários enviam ao seu servidor e evita que os invasores violem sua conexão. O Google favorece sites em HTTPS.
Para mudar para HTTPS, você precisará de um certificado SSL de uma autoridade confiável. Para obtê-los depende da sua hospedagem, mas geralmente existem duas maneiras comuns de fazer isso:
- Se você opera seu próprio servidor ou tem acesso
root, consulte LetsEncrypt. É uma autoridade de certificação gratuita, aberta e direta que permite que qualquer pessoa comece a usar HTTPS. É muito fácil de configurar e é tão confiável quanto outras. - Se você está em uma hospedagem compartilhada, infelizmente muitos fornecedores não permitem o nível de controle necessário para usar o LetsEncrypt. Em vez disso, eles geralmente oferecem certificados SSL por uma taxa mensal ou anual. Se você não tiver certeza de como obter um certificado, entre em contato com seu provedor de hospedagem. Muitos também oferecem de forma gratuita.
Depois de obter um certificado, pode haver alguns ajustes que você precisa fazer no seu código para que todos os recursos sejam oferecidos ao navegador utilizando o protocolo HTTPS. Para obter mais informações sobre o processo, veja como redirecionar de http para https via htaccess.
Se tudo correr como planejado, você verá isso ao lado de sua URL:
Passo 3: Service Worker
É aqui que a mágica acontece. Um Service Worker é essencialmente um código Javascript que atua como intermediário entre o navegador e o host. Ele se instala automaticamente nos navegadores suportados, pode interceptar solicitações feitas no seu site e responder a elas de maneiras diferentes.
Você pode configurar um novo Service Worker simplesmente criando um arquivo Javascript no diretório raiz do seu projeto. Vamos chamá-lo de sw.js. O conteúdo desse arquivo depende do que você deseja alcançar, chegaremos a isso em breve.
Para que o navegador saiba que pretendemos usar esse arquivo com nosso Service Worker, precisamos registrá-lo primeiro. No script principal do seu site, inclua uma função como esta:
function registerServiceWorker() {
// registrando o service worker para navegadores com suporte
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js', { scope: '/' }).then(() => {
console.log('Service Worker registrado com sucesso.');
}).catch(error => {
console.log('Service Worker falhou:', error);
});
}
}
O parâmetro scope define quais solicitações o Service Worker deve interceptar. É um caminho relativo para a raiz do domínio. Por exemplo, se você definir isso como /artigos, poderá controlar solicitações para dominio.com/artigos/post, mas não para dominio.com/contato.
Off-line é incrível
Há várias coisas legais que você pode fazer com Service Workers. Uma delas é a capacidade de armazenar seu conteúdo em cache, armazená-lo localmente e, assim, disponibilizá-lo quando o usuário estiver offline. Mesmo se estiverem online, isso terá um enorme impacto no tempo de carregamento da página, pois as solicitações podem simplesmente ignorar a rede e os recursos da página são disponibilizados instantaneamente.
Além do cache tradicional do navegador, você pode definir uma lista de recursos para armazenar em cache quando o Service Worker estiver instalado, para que um usuário não tenha a necessidade de navegar em uma página para que a mesma seja armazenada em cache. Exemplo:
// sw.js
self.addEventListener('install', e => {
e.waitUntil(
// depois que o Service Worker estiver instalado,,
// abra um novo cache
caches.open('my-pwa-cache').then(cache => {
// adicione todas as URLs de recursos que queremos armazenar em cache
return cache.addAll([
'/',
'/index.html',
'/sobre.html',
'/images/logo.jpg',
'/styles/main.min.css',
'/scripts/main.min.js',
]);
})
);
});
🔥 Dica: Se você deseja carregar o offline primeiramente, recomendo o uso do sw-precache. Essa é uma ferramenta criada pelo pessoal do Google que se integra ao seu processo de criação Gulp ou Grunt existente para gerar o arquivo do Service Worker para você.
Você pode simplesmente passar uma lista de arquivos e ele irá rastrear automaticamente todas as alterações e manterá o cache do Service Worker atualizado. Como o sw-precache se integra ao seu ambiente desenvolvimento, você pode usar wildcards para cachear todos os recursos que correspondem a um padrão específico, por exemplo:
import gulp from 'gulp';
import path from 'path';
import swPrecache from 'sw-precache';
const rootDir = '/';
gulp.task('generate-service-worker', callback => {
swPrecache.write(path.join(rootDir, 'sw.js'), {
staticFileGlobs: [
// rastreia e armazena em cache todos os arquivos que correspondem a esse padrão
rootDir + '/**/*.{js,html,css,png,jpg,gif}',
],
stripPrefix: rootDir
}, callback);
});
Execute esta tarefa em sua build e nunca mais precisará se preocupar com a invalidação de cache!
Para sites menores, principalmente sites estáticos, é possível cachear todos os arquivos de imagem, HTML, JavaScript e CSS. Para sites com muito conteúdo dinâmico ou muitas imagens grandes que nem sempre são necessárias, você pode cachear somente partes do site que fizer mais sentido.
Testando sua PWA
A extensão do Chrome chamada Lighthouse é uma ferramenta de teste para verificar as PWAs quando nos referimos ao desempenho, acessibilidade e conformidade com as especificações da PWA.
Ele testa seu site em diferentes viewports e velocidades de rede, mede o tempo de carregamento do conteúdo renderizado na primeira tela e outros fatores de desempenho e fornece conselhos para áreas que ainda precisam ser aprimoradas. É uma boa referência para medir desempenho de sites em geral.
Você também pode acessar essa ferramenta diretamente no navegador Chrome pressionando a tecla F12 e clicando na guia Audits, em um página web.
Espero que este artigo tenha lhe motivado a começar com as PWAs. Se você quiser mergulhar mais fundo, aqui estão alguns lugares para aprender mais:
Comentários