DEV Community

Cover image for Progressive Web apps: O futuro do desenvolvimento web
Henrique Rodrigues
Henrique Rodrigues

Posted on

3

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Não se esqueça de adicionar o link do manifest no arquivo HTML

<link rel="manifest" href="manifest.json">
Enter fullscreen mode Exit fullscreen mode

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))
    );
});
Enter fullscreen mode Exit fullscreen mode

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));
    });
}
Enter fullscreen mode Exit fullscreen mode

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)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️