Build Apps que funcionam off-line

Sep 11, 2025

Como

Por muito tempo, a funcionalidade offline, a sincronização de fundo e as notificações push têm aplicativos nativos diferenciados de suas contrapartes da Web. O API do trabalhador de serviço. é uma tecnologia que muda de jogo que eveno o campo de jogo. Neste tutorial, vamos usá-lo para criar uma página que possa servir conteúdo mesmo enquanto não há conexão com a Internet.

Baixe o código do arquivoilo

01. Um servidor HTTPS

A maneira mais fácil de pensar sobre os funcionários do serviço é como um código que é instalado por um site em uma máquina cliente, é executado em segundo plano e, posteriormente, permite que solicitações enviadas a esse site sejam interceptadas e manipuladas. Porque esta é uma capacidade tão poderosa, trabalhar com trabalhadores de serviço em um ambiente ao vivo, você precisa estar correndo por https. Isso garante que eles não possam ser explorados, certificando-se de que o trabalhador do serviço que o navegador recebe de uma página é genuína.

Para fins de desenvolvimento, no entanto, podemos correr sem https desde http: // localhost / é permitido como uma exceção a esta regra. A maneira mais simples de começar é com o NPM HTTP-Server pacote.

 NPM instalar http-server -g
HTTP-server -p 8000 -C-1

02. Configure uma página básica

Não há nada no servidor agora, então vamos fazer uma página básica para servir. Criaremos um novo arquivo index.html e quando executarmos o servidor, ele agora será acessível em http: // localhost: 8000 .

Nesta fase, você descobrirá que, se encerrar o servidor HTTP e atualizar a página no navegador, receberá uma página de erro desde que o site não pode ser alcançado. Isso é inteiramente esperado, já que ainda não criamos nenhum conteúdo off-line.

 & lt;! Doctype html & gt;
& lt; html & gt;
  & lt; head & gt;
  & lt; meta charset = "utf-8" / & gt;
  & lt; title & gt; trabalhador de serviço & lt; / title & gt;
  & lt; script src = "site.js" & gt; & lt; / script & gt;
  & lt; link rel = "Stylesheet" type = "text / css" href = "custom.css" & gt;
  & lt; / head & gt;
  & lt; corpo e gt;
  & lt; cabeçalho e gt;
  & lt; h1 & gt; welcome & lt; / h1 & gt;
  & lt; / header & gt;
  & lt; div id = "conteúdo" & gt;
  e lt; P & gt; conteúdo aqui e lt; / p & gt;
  & lt; img src = "kitty.jpg" largura = "100%" & gt;
  & lt; / div & gt;
  & lt; / corpo & gt;
& lt; / html & gt;

03. Registre um trabalhador de serviço

Agora temos uma página bastante invasewable, e é hora de começar a pensar em implementar um trabalhador de serviço. Antes de recebermos codificando, vale a pena dar um momento para entender o ciclo de vida dos trabalhadores de serviço.

O processo começa com o 'registro' de um trabalhador de serviço em seu JavaScript, que conta o navegador para começar a instalar o trabalhador - o primeiro passo do seu ciclo de vida. Ao longo do seu ciclo de vida, um trabalhador de serviço estará em um dos seguintes estados:

Instalando: Uma vez que um trabalhador de serviço foi registrado, sua instalação é normalmente usada para baixar e cache o conteúdo estático
Instalado: O trabalhador é teoricamente pronto para uso, mas não ativar imediatamente
Ativando: Um trabalhador de serviço instalado se ativará se não houver nenhum trabalhador de serviço existente, ou certas condições levarem o existente para expirar; A ativação é normalmente usada para limpar arquivos antigos do conteúdo offline armazenado em cache
Ativado: O trabalhador de serviço agora tem controle sobre o documento e lidar com solicitações
Redundante: Se o trabalhador do serviço não conseguiu instalar ou ativar, ou se for substituído por um trabalhador de serviço mais recente

04. Verifique se você está registrado

Vamos registrar um trabalhador de serviço. Isso aponta efetivamente o navegador para o arquivo JavaScript que define o comportamento do trabalhador do serviço. O registro é feito usando o objeto Serviceworker que é o ponto de entrada para a API. Também vamos verificar a API estará presente no navegador antes de tentar fazê-lo.

O registro() A função pode ser chamada com segurança toda vez que a página é carregada, e o navegador determinará se o trabalhador do serviço já foi registrado.

 se ('serviceworker' no navegador) {
  janela.addeventlistener ('carregar', função () {
  navigator.servicheworker.register ('servicorker.js', {escopo: './'.}).then(function(registration) {
  console.log ("trabalhador de serviço registrado com sucesso");
  }, função (erro) {
  console.log ("Erro ao registrar o funcionário do serviço:" + erro);
  });
  });
}

05. Implementar o trabalhador do serviço

Em seguida, precisamos implementar o trabalhador do serviço. Os trabalhadores do serviço podem ouvir uma gama de eventos relacionados ao seu próprio ciclo de vida e atividade na página. Os mais importantes são instalados, ativar e buscar.

Vamos começar criando um ouvinte para o instalar evento, que desencadeia uma vez que a instalação do trabalhador esteja concluída. Isso nos permite instruir o trabalhador de serviço a adicionar algum conteúdo offline na pasta atual a um cache. Também precisamos nomear nosso cache - já que os cache antigos podem persistir, atualizar / versionamento Este nome de cache permite que você atenda as versões mais recentes do conteúdo mais tarde.

 Var CurrentCache = 'Demo-cache';
self.addeventlistener ('install', event = & gt; {
  event.waituntil (
  Caches.Open (CurrentCache) .Ent (função (cache) {
  console.log ("adicionando conteúdo ao cache");
  Devolver cache.addall ([
  './index_offline.html',
  './kitty_offline.jpg',
  './CSS customizado'
  ]);
  })
  );
});

06. buscar evento

Nossa página agora irá cache o conteúdo quando carregado, mas precisamos de algum mecanismo para interceptar solicitações e redirecioná-los a esse cache. Para fazer isso, precisamos ouvir para buscar eventos, que são desencadeados quando uma solicitação, como obter nossa index.html. O arquivo é feito em toda a rede. Em seguida, combinamos com a solicitação contra o cache e servimos o recurso em cache, se encontrado. Caso contrário, voltamos a uma solicitação de API do FETCH para o servidor.

Vale a pena nesse ponto, observamos que temos uma forte dependência de Javascript promete trabalhar. Estes podem ser um pouco complicados, então vale a pena familiarizar se você não os usou antes.

 self.addeventlistener ('buscar', evento = & gt; {
  event.respondwith (
  caches.Match (event.request) .then (resposta = & gt; {
  Resposta de retorno ||. buscar (event.request);
  })
   );
    });

07. Extend Fetch Event

Se você testá-lo agora (termine o servidor HTTP e atualize a página), você deve descobrir que sua página funciona on-line e offline. É provável, no entanto, que você desejará mais comportamento offline inteligente, com diferentes conteúdos ou funcionalidades disponíveis quando o servidor estiver indisponível.

Para conseguir isso, podemos estender o nosso buscar Resposta do evento mais para verificar especificamente as solicitações de navegação e responder com uma página off-line diferente quando um é detectado. Esta index_offline.html. arquivo pode ser uma variação de sua página on-line, ou algo completamente diferente, e também pode usar outros recursos que você armazenou em cache, como CSS customizado .

 self.addeventlistener ('buscar', evento = & gt; {
  if (event.request.mode === 'navegar') {
  event.respondwith (
  fetch (event.request) .catch (error = & gt; {
  console.log ("página indisponível. Retornando conteúdo off-line");
  retorno caches.Match ('./ index_offline.html');
  })
  );
  } outro {
  event.respondwith (
  caches.Match (event.request) .then (resposta = & gt; {
  Resposta de retorno ||. buscar (event.request);
  })
  );
  }
});

08. Excluir cache

Há mais uma coisa que precisamos. Se você tentar modificar seu conteúdo off-line, descobrirá que não é atualizado quando você testa sua página - você ainda recebe a versão antiga! Isso ocorre porque os arquivos mais antigos ainda são armazenados em cache.

Você precisa implementar algo para limpar arquivos desatualizados do cache para impedir que eles estejam sendo servidos. Isso é feito respondendo a um ativar Evento e excluindo todos os caches que não correspondem ao nome especificado no CurrentCache. Você pode então adicionar um número de versão a CurrentCache toda vez que você modificar seu conteúdo off-line, para garantir que ele seja atualizado.

 este.addeventlistener ('ativar', evento = & gt; {
  var activecaches = [Currentcache];
  console.log ("trabalhador de serviço ativado. Cache de verificação está atualizado.");
  event.waituntil (
  caches.keys (). Então (lista de teclas = & gt; {
  return promise.all (keylist.map (key = & gt; {
  if (activecaches.indexof (chave) === -1) {
  console.log ("excluindo o antigo cache" + tecla);
  retorno caches.delete (chave);
  }
  }));
  })
  );
});

Este artigo foi publicado na edição da revista Web Designer # 268. Inscreva-se agora.

Consulte Mais informação:

Guia de um codificador para APIs
Comece com webgl usando três.js
12 enormes tendências de design web para 2018

Build Apps que funcionam off-line

01. Um servidor HTTPS

02. Configure uma página básica

03. Registre um trabalhador de serviço

04. Verifique se você está registrado

05. Implementar o trabalhador do serviço

06. buscar evento

07. Extend Fetch Event

08. Excluir cache

Como - Artigos mais populares

é o seu armazenamento da Apple Icloud completo? Veja como liberar espaço

Criar um efeito de fundo paralaxe controlado por mouse

Crie uma imagem multi-exposição com Adobe CC

Como enfatizar o ponto focal de uma imagem

Como começar a pintura a óleo

Criar pôr do sol sensacional no Photoshop

Construa layouts complexos com postcss-flexbox

Desenvolva suas habilidades de caricatura

Categorias