`Service Worker` em JavaScript

Articles

Este artigo explica o conceito de Service Worker em JavaScript.

Vamos explicar passo a passo desde o básico do Service Worker até o controle de cache na prática.

YouTube Video

offline.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>Offline</title>
 6</head>
 7<body>
 8  <h1>You are offline</h1>
 9  <p>This is the offline fallback page.</p>
10</body>
11</html>

style.css

1body {
2  font-family: sans-serif;
3  background-color: #f0f0f0;
4  padding: 20px;
5}
6h1 {
7  color: #333;
8}

javascript-service-worker.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container">
105        <h1>JavaScript Console</h1>
106        <button id="executeBtn">Execute</button>
107        <div id="output"></div>
108    </div>
109
110    <div class="container">
111        <h2>HTML Sample</h2>
112        <button id="fetchBtn">Fetch Test</button>
113    </div>
114
115    <script>
116        // Override console.log to display messages in the #output element
117        (function () {
118            // Override console.log
119            const originalLog = console.log;
120            console.log = function (...args) {
121                originalLog.apply(console, args);
122                const message = document.createElement('div');
123                message.textContent = args.map(String).join(' ');
124                output.appendChild(message);
125            };
126
127            // Override console.error
128            const originalError = console.error;
129            console.error = function (...args) {
130                originalError.apply(console, args);
131                const message = document.createElement('div');
132                message.textContent = args.map(String).join(' ');
133                message.style.color = 'red'; // Color error messages red
134                output.appendChild(message);
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-service-worker.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-service-worker.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-service-worker.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

`Service Worker` em JavaScript

Service Worker é um recurso do JavaScript que atua entre o navegador e a rede, permitindo o cache de requisições e suporte offline. É uma tecnologia central das PWAs (Progressive Web Apps) e proporciona uma experiência semelhante à de aplicativos nativos nas aplicações web.

O que é um `Service Worker`?

Service Worker é um arquivo JavaScript que roda em uma thread de fundo do navegador. Ele roda em uma thread separada da página, não pode acessar a interface do usuário, mas pode interceptar requisições de rede, gerenciar caches e lidar com notificações push.

As principais características de um Service Worker incluem:.

Funciona apenas por HTTPS, exceto em localhost.
Utiliza uma API assíncrona baseada em Promise.
É orientado a eventos, utilizando eventos como install, activate, fetch e push.

Registrando um `Service Worker`

Primeiro, vamos escrever o código para registrar um Service Worker no navegador.

 1if ('serviceWorker' in navigator) {
 2    window.addEventListener('load', () => {
 3        navigator.serviceWorker.register('/sw.js')
 4        .then(registration => {
 5            console.log(
 6                'Service Worker registered with scope:',
 7                registration.scope
 8            );
 9        })
10        .catch(error => {
11            console.error('Service Worker registration failed:', error);
12        });
13    });
14}

Explicação

Use navigator.serviceWorker.register() para registrar /sw.js (o arquivo do Service Worker).
Você pode usar then para tratar o sucesso e catch para tratar erros durante o registro.
registration.scope representa o intervalo de caminhos (escopo) afetados pelo Service Worker.
Por padrão, o escopo é o diretório onde o arquivo registrado (neste caso, /sw.js) está localizado e seus subdiretórios.

Escopo do `Service Worker`

Se você quiser limitar o escopo, pode especificar o scope usando o segundo argumento de register.

1navigator.serviceWorker.register('/sw.js', { scope: '/app/' })
2.then(registration => {
3    console.log(
4        'Service Worker registered with scope:',
5        registration.scope
6    );
7});

Explicação

Com esta configuração, apenas as páginas sob /app/ serão controladas pelo Service Worker.

Criando o arquivo `Service Worker`

Em seguida, crie um arquivo chamado sw.js e implemente os eventos básicos.

1// sw.js
2const CACHE_NAME = 'my-cache-v1';
3const urlsToCache = [
4    '/',
5    '/index.html',
6    '/styles.css',
7    '/script.js',
8    '/offline.html'
9];

Este código define uma lista de recursos a serem armazenados em cache.

Papéis e mecanismos de cada evento

`install`

 1// Install event (initial caching)
 2self.addEventListener('install', event => {
 3    console.log('[ServiceWorker] Install');
 4    event.waitUntil(
 5        caches.open(CACHE_NAME).then(cache => {
 6            console.log('[ServiceWorker] Caching app shell');
 7            return cache.addAll(urlsToCache);
 8        })
 9    );
10});

self.addEventListener('install') é acionado quando o Service Worker é registrado pela primeira vez. Nesta etapa, os arquivos necessários são pré-armazenados em cache.

`activate`

 1// Activation event (delete old caches)
 2self.addEventListener('activate', event => {
 3    console.log('[ServiceWorker] Activate');
 4    event.waitUntil(
 5        caches.keys().then(keyList => {
 6            return Promise.all(keyList.map(key => {
 7                if (key !== CACHE_NAME) {
 8                    console.log('[ServiceWorker] Removing old cache:', key);
 9                    return caches.delete(key);
10                }
11            }));
12        })
13    );
14    return self.clients.claim();
15});

No evento activate, caches antigos são excluídos para otimizar o armazenamento. Apenas o cache da nova versão é mantido.

`fetch`

1// Fetch event (cache-first strategy)
2self.addEventListener('fetch', event => {
3  console.log('[ServiceWorker] Fetch', event.request.url);
4    event.respondWith(
5        caches.match(event.request).then(response => {
6            return response || fetch(event.request).catch(() => caches.match('/offline.html'));
7        })
8    );
9});

Todas as requisições HTTP são interceptadas—se existir uma versão em cache, ela é retornada; caso contrário, é buscada da rede. Quando estiver offline, uma página alternativa (por exemplo, offline.html) é retornada.

Confirmando a operação

Vamos realmente verificar como o Service Worker funciona.

 1document.getElementById('fetchBtn').addEventListener('click', () => {
 2    fetch('/style.css')
 3        .then(response => response.text())
 4        .then(data => {
 5            console.log('Fetched data:', data);
 6        })
 7        .catch(error => {
 8            console.error('Fetch failed:', error);
 9        });
10});

Aqui, verificamos o registro do Service Worker e o comportamento ao buscar recursos clicando no botão de teste.

Exemplos de estratégias de cache

As estratégias de cache comuns são as seguintes:.

Cache Primeiro

Aqui está um exemplo de implementação para a estratégia Cache Primeiro:.

1self.addEventListener('fetch', event => {
2    event.respondWith(
3        caches.match(event.request).then(response => {
4            return response || fetch(event.request);
5        })
6    );
7});

Este código implementa uma estratégia cache-first, em que o recurso solicitado é retornado do cache se estiver disponível; caso contrário, ele é buscado na rede.

Rede Primeiro

Aqui está um exemplo de implementação para a estratégia Rede Primeiro:.

 1self.addEventListener('fetch', event => {
 2    event.respondWith(
 3        fetch(event.request)
 4            .then(response => {
 5                return caches.open(CACHE_NAME).then(cache => {
 6                    cache.put(event.request, response.clone());
 7                    return response;
 8                });
 9            })
10            .catch(() => caches.match(event.request))
11    );
12});

Este código implementa uma estratégia network-first, em que o recurso solicitado é buscado primeiro na rede e, se isso falhar, ele é recuperado do cache.

Cache apenas de estilos e JavaScript, acesso às APIs em tempo real

Aqui está um exemplo de implementação em que estilos e JavaScript são armazenados em cache, enquanto as APIs são acessadas em tempo real:.

 1self.addEventListener('fetch', event => {
 2    if (event.request.url.includes('/api/')) {
 3        // Fetch API responses in real-time without caching
 4        return;
 5    }
 6
 7    // Use cache-first strategy for static files
 8    event.respondWith(
 9        caches.match(event.request).then(response => {
10            return response || fetch(event.request);
11        })
12    );
13});

Este código sempre acessa as requisições de API em tempo real e aplica uma estratégia cache-first para arquivos estáticos como folhas de estilo e JavaScript.

Fluxo de atualização

O fluxo de atualização de um Service Worker é o seguinte:.

Um novo sw.js é detectado.
O evento install é acionado.
Aguarda até que o Service Worker anterior fique inativo.
O evento activate é acionado.
Alterna para o novo Service Worker.
O evento controllerchange é disparado.

Detecção de atualização

Uma vez que um Service Worker é instalado, o antigo continua a ser usado até a próxima visita. Para aplicar atualizações, é comum utilizar um código que detecta atualizações e recarrega a página.

1navigator.serviceWorker.addEventListener('controllerchange', () => {
2    window.location.reload();
3});

O evento controllerchange é disparado quando o controlador do Service Worker, ou seja, o Service Worker que controla a página atual, é alterado.
As páginas que já estão abertas continuam a usar o Service Worker atual, e o novo Service Worker instalado não entra em vigor imediatamente nessas páginas. Portanto, utiliza-se uma técnica em que o evento controllerchange é usado para detectar que um novo controlador ficou ativo e, em seguida, a página é recarregada para aplicar imediatamente a atualização.

Cuidados e melhores práticas

Ao usar um Service Worker, tenha os seguintes pontos em mente:.

HTTPS Obrigatório Devido a restrições de segurança, não funciona sobre http:// exceto em localhost.
Nomes de arquivos com hash O nome do cache pode incluir o nome do arquivo, a URL e informações de versão.
Comunicação com clientes Use postMessage para comunicar entre o Service Worker e o JavaScript da página.

Resumo

Service Worker é uma tecnologia essencial para suporte offline e melhorias de desempenho em aplicativos web. Ao compreender o fluxo básico de instalação, ativação e tratamento de requisições, e implementar estratégias de cache adequadas, você pode criar aplicações web de melhor qualidade.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Web Workers em JavaScript

`Service Worker` em JavaScript

YouTube Video

Service Worker em JavaScript

O que é um Service Worker?

Registrando um Service Worker

Explicação

Escopo do Service Worker

Explicação

Criando o arquivo Service Worker

Papéis e mecanismos de cada evento

install

activate

fetch

Confirmando a operação

Exemplos de estratégias de cache

Cache Primeiro

Rede Primeiro

Cache apenas de estilos e JavaScript, acesso às APIs em tempo real

Fluxo de atualização

Detecção de atualização

Cuidados e melhores práticas

Resumo

YouTube Video

`Service Worker` em JavaScript

O que é um `Service Worker`?

Registrando um `Service Worker`

Escopo do `Service Worker`

Criando o arquivo `Service Worker`

`install`

`activate`

`fetch`