1. Boas-vindas
Neste laboratório, você vai pegar um aplicativo da Web e fazer com que ele funcione off-line. Este é o primeiro de uma série de codelabs complementares para o workshop de Progressive Web App. Há mais sete codelabs nesta série.
O que você vai aprender
- Criar um service worker manualmente
- Adicionar um service worker a um aplicativo da Web
- Usar o service worker e a API Storage para disponibilizar recursos off-line
O que você precisa saber
- HTML básico e JavaScript
O que é necessário
- Um navegador que é compatível com service workers
2. Começar a configuração
Comece clonando ou fazendo o download do código inicial necessário para concluir este codelab:
Se você clonar o repositório, verifique se está no branch starter. O arquivo ZIP também contém o código desse branch.
Essa base de código exige o Node.js 14 ou mais recente. Depois de ter o código disponível, execute npm ci na linha de comando na pasta do código para instalar todas as dependências necessárias. Em seguida, execute npm start para iniciar o servidor de desenvolvimento do codelab.
O arquivo README.md do código-fonte fornece uma explicação para todos os arquivos distribuídos. Além disso, estes são os principais arquivos com que você vai trabalhar neste codelab:
Arquivos principais
js/main.js- Arquivo JavaScript do aplicativo principalservice-worker.js- Arquivo de service worker do aplicativo
3. Testar off-line
Antes de fazer qualquer mudança, vamos testar para mostrar que o app da Web não funciona off-line. Para fazer isso, coloque o computador off-line e recarregue o app da Web ou, se estiver usando o Chrome:
- Abra as Ferramentas para Desenvolvedores do Chrome.
- Mude para a guia "Aplicativo".
- Mude para a seção "Service workers".
- Marque a caixa de seleção "Off-line".
- Atualize a página sem fechar as Ferramentas para Desenvolvedores do Chrome.
Com o site testado e com falha no carregamento off-line, é hora de adicionar algumas funcionalidades on-line. Desmarque a caixa de seleção off-line e continue para a próxima etapa.
4. Colocar off-line
É hora de adicionar um service worker básico. Isso vai acontecer em duas etapas: registrar o service worker e armazenar recursos em cache.
Registrar um service worker
Já existe um arquivo de service worker vazio. Para garantir que as mudanças apareçam, vamos registrá-lo no aplicativo. Para fazer isso, adicione o código a seguir à parte de cima de js/main.js:
// Register the service worker
if ('serviceWorker' in navigator) {
// Wait for the 'load' event to not block other work
window.addEventListener('load', async () => {
// Try to register the service worker.
try {
// Capture the registration for later use, if needed
let reg;
// Use ES Module version of our Service Worker in development
if (import.meta.env?.DEV) {
reg = await navigator.serviceWorker.register('/service-worker.js', {
type: 'module',
});
} else {
// In production, use the normal service worker registration
reg = await navigator.serviceWorker.register('/service-worker.js');
}
console.log('Service worker registered! 😎', reg);
} catch (err) {
console.log('😥 Service worker registration failed: ', err);
}
});
}
Explicação
Esse código registra o arquivo de service worker service-worker.js vazio depois que a página é carregada e somente se o site oferecer suporte a service workers.
Recursos de pré-cache
Para que o app da Web funcione off-line, o navegador precisa responder a solicitações de rede e escolher para onde encaminhá-las. Para fazer isso, adicione o seguinte a service-worker.js
// Choose a cache name
const cacheName = 'cache-v1';
// List the files to precache
const precacheResources = ['/', '/index.html', '/css/style.css', '/js/main.js', '/js/app/editor.js', '/js/lib/actions.js'];
// When the service worker is installing, open the cache and add the precache resources to it
self.addEventListener('install', (event) => {
console.log('Service worker install event!');
event.waitUntil(caches.open(cacheName).then((cache) => cache.addAll(precacheResources)));
});
self.addEventListener('activate', (event) => {
console.log('Service worker activate event!');
});
// When there's an incoming fetch request, try and respond with a precached resource, otherwise fall back to the network
self.addEventListener('fetch', (event) => {
console.log('Fetch intercepted for:', event.request.url);
event.respondWith(
caches.match(event.request).then((cachedResponse) => {
if (cachedResponse) {
return cachedResponse;
}
return fetch(event.request);
}),
);
});
Agora, volte ao navegador, feche a guia de visualização e abra-a novamente. Você vai encontrar console.logs correspondentes aos diferentes eventos no service worker.
Em seguida, fique off-line novamente e atualize o site. Ele será carregado mesmo que você esteja off-line.
Explicação
Durante o evento de instalação do service worker, um cache nomeado é aberto usando a API Storage de Cache. Os arquivos e rotas especificados em precacheResources são carregados no cache usando o método cache.addAll. Isso é chamado de pré-cache porque armazena em cache o conjunto de arquivos durante o tempo de instalação, em vez de armazená-los quando eles são necessários ou solicitados.
Depois que o service worker estiver controlando o site, os recursos solicitados vão passar pelo service worker como um proxy. Cada solicitação aciona um evento de busca que, nesse service worker, pesquisa o cache em busca de uma correspondência e, se houver, responde com o recurso armazenado em cache. Se não houver uma correspondência, o recurso será solicitado normalmente.
O armazenamento de recursos em cache permite que o app funcione off-line, evitando solicitações de rede. Agora, o app pode responder com um código de status 200 quando estiver off-line.
5. Parabéns!
Você aprendeu a colocar seu app da Web off-line usando service workers e a API Cache Storage.
O próximo codelab da série é Trabalhar com o Workbox