Sobre o que é todo esse zumbido sobre o PWA?
Imagina isso: Você está no metrô, tenta entrar em um site no seu celular, mais o sinal da internet fica caindo. Frustrante, não?
Nisso entra o Progressive Web App, o super-herói do mundo web. Ele funciona offline, carrega na velocidade da luz e até envia notificações. É como dar superpoderes ao seu website!
A origem do PWA
Vamos voltar no tempo (tipo, em 2015), as opções eram: construir um website ou construir um app. Isso era com escolher entre uma bicicleta ou um carro. Mais então, algumas pessoas inteligentes da Google pensaram, "Porque não os dois?" e assim, nasceu o PWA!
Vamos construir nosso primeiro PWA: Começando a aventura
Vamos arregaçar as mangas e construir juntos um PWA simples.
Vamos criar uma aplicação de "Piadas ruins" porque, bem, quem não gosta de uma piada ruim?
Parte 1: O Básico - Apenas uma simples webpage
Primeiro, vamos criar um HTML básico. Esta é nossa "bicicleta" - funciona, mais ainda não é super poderosa.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dad Jokes PWA</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Dad Jokes</h1>
<p id="joke">Click the button for a dad joke!</p>
<button id="jokeBtn">Get New Joke</button>
<script src="app.js"></script>
</body>
</html>
Parte 2: Adicionar alguns estilos - Porque toda piada ruim precisa de um visual bom.
Vamos adicionar um toque de CSS para tornar a nossa aplicação mais elegante:
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
#joke {
margin: 20px 0;
font-style: italic;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
Parte 3: A magia do javascript = Request piadas ruins
Agora, vamos adicionar um pouco de javaScript para fazer um request em uma API que vai retornar as piadas:
const jokeElement = document.getElementById('joke');
const jokeBtn = document.getElementById('jokeBtn');
async function fetchJoke() {
try {
const response = await fetch('https://icanhazdadjoke.com/', {
headers: {
'Accept': 'application/json'
}
});
const data = await response.json();
jokeElement.textContent = data.joke;
} catch (error) {
jokeElement.textContent = "Oops! Looks like the joke got stuck in dad's old briefcase.";
}
}
jokeBtn.addEventListener('click', fetchJoke);
// Faz o request na API quando a página carrega
fetchJoke();
Passo 4: Transformando em PWA - Uma pitada de superpoderes
Agora, vamos transformar o nosso site normal num PWA. Primeiro, precisamos de um ficheiro manifesto. Crie um ficheiro chamado manifest.json:
{
"name": "Dad Jokes PWA",
"short_name": "DadJokes",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#4285f4",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
Não se esqueça de adicionar o link do manifest no arquivo HTML
<link rel="manifest" href="manifest.json">
Passo 5: O molho secreto: Service Workers
Service workers são como pequenos mordomos invisíveis da web. Armazenam os seus ativos em cache e até funcionam offline. Crie um ficheiro chamado service-worker.js:
const CACHE_NAME = 'dad-jokes-cache-v1';
const urlsToCache = [
'/',
'/index.html',
'/style.css',
'/app.js',
'/icon.png'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => cache.addAll(urlsToCache))
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});
Agora, registre o service worker no seu arquivo app.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
.then(registration => console.log('ServiceWorker registered'))
.catch(error => console.log('ServiceWorker registration failed:', error));
});
}
Testando os superpoderes do PWA
- Modo Offline: Desligue a internet e atualize a página. A sua aplicação ainda deve funcionar!
- Prompt de instalação: nos browsers compatíveis, verá uma opção para instalar o seu PWA.
- Auditoria Lighthouse: Utilize a ferramenta Lighthouse do Chrome para verificar os superpoderes do seu PWA.
O futuro é progressivo
Parabéns! Acabou de construir o seu primeiro PWA. É como ver o seu filho dar os primeiros passos, não é? (Por falar em piadas de ruim...)
À medida que avançamos para 2024, os PWAs estão a tornar-se mais poderosos. Podem aceder a funcionalidades do dispositivo, trabalhar offline e proporcionar uma experiência semelhante à de uma aplicação, sem o incómodo das lojas de aplicações.
Assim, da próxima vez que alguém lhe perguntar se pode criar um website ou uma aplicação, pode dizer: “Porque não os dois?” e apresente-os ao maravilhoso mundo dos PWAs!
Créditos
Progressive Web Apps: The Future of Web Development, escrito originalmente por Baransel
Obrigado por ler este artigo. Espero poder fornecer-lhes algumas informações úteis. Se sim, eu ficaria muito feliz se você recomendasse este post e clicasse no botão do ♥ para que mais pessoas possam ver isso.
Top comments (0)