Progressive Web apps: O futuro do desenvolvimento web

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.

Blog