🧓🏽 🎯 🤫 Visualização do trabalho dos trabalhadores de serviço 👨‍👧 👃🏿 👨🏿‍🚒

Bom dia amigos

Muitos de vocês provavelmente já ouviram falar de uma inovação no ecossistema JavaScript como Service Workers, que são um elemento-chave do desenvolvimento moderno da Web. Os funcionários de serviços estão se tornando cada vez mais populares, principalmente devido à popularidade dos Aplicativos da Web Progressivos (PWA).

Quando ouvi falar deles pela primeira vez, perguntei-me: “Quando devemos usar trabalhadores de serviço? Em que cenários ou contexto podemos usá-los? ”

Neste artigo, consideraremos vários exemplos práticos de uso de trabalhadores de serviço, que mais tarde, atrevo-me a esperar, farão seus usuários felizes.

Acredito que, antes de analisar exemplos práticos, é necessário pelo menos esboçar os fundamentos teóricos do trabalho dos trabalhadores de serviços. Para iniciantes, essa será uma boa ajuda em empreendimentos futuros.

O que é um trabalhador de serviço?

Cersis Worker é um script executado por um navegador no processo em segundo plano. Lembre-se de que um profissional de serviço é completamente independente da página com a qual interage ou com a qual serve (para servir).

Em essência, um trabalhador de serviço é um servidor proxy entre um aplicativo Web, um navegador e uma rede.

Os funcionários do serviço permitem que aplicativos da Web funcionem como aplicativos nativos.

Alguns fatos sobre trabalhadores de serviço

Os funcionários do serviço não têm acesso direto ao DOM. Para fazer isso, eles usam o mecanismo para responder a solicitações por meio da interface postMessages.
Os funcionários de serviço são forçados a cancelar (parado) quando não estão em uso. Isso significa que eles são direcionados a eventos.
Os funcionários do serviço assumem o uso de promessas (promessas).
Devido aos excelentes recursos, os profissionais de serviço podem ser usados apenas via HTTPS. Em um servidor local, você pode fazer sem HTTPS.

Como os trabalhadores de serviço trabalham? Uma olhadela

Os funcionários do serviço permitem interceptar solicitações do servidor e armazená-las em cache para melhorar o desempenho do aplicativo. Assim, os ganhos de produtividade são alcançados através do armazenamento em cache de todo o conteúdo.

Mas é melhor vê-lo uma vez, então aqui está uma imagem mostrando o trabalho de um trabalhador de serviço:

Ciclo de vida do trabalhador de serviço

Como mencionei anteriormente, os funcionários de serviço trabalham independentemente da página de controle. Se você deseja instalar um trabalhador de serviço em seu aplicativo, a primeira coisa que você precisa fazer é registrá-lo.

Depois disso, o navegador que iniciou a instalação do trabalhador do serviço entra em segundo plano:

Casos de uso comuns

Agora que sabemos como os funcionários de serviço trabalham, é hora de falar sobre onde eles são usados.

Armazenamento em cache

Como observado acima, os trabalhadores do serviço podem ser usados para armazenar em cache. aqui estão alguns exemplos:

Somente cache - você tem conteúdo estático que nunca muda.
Rede ou cache - você deseja mostrar aos usuários conteúdo relevante com uma condição de download rápido.
Cache e atualização - você deseja exibir o conteúdo instantaneamente e não se importa com a sincronização periódica com o servidor.
Cache, atualização e reinicialização - você deseja mostrar o conteúdo o mais rápido possível, atualizando implicitamente suas partes individuais e exibindo-as de alguma maneira "integrada".

Web Push

O envio pela Web permite que os aplicativos enviem notificações por push e exibam o conteúdo recebido em resposta a essas notificações.

Envie e atualize o conteúdo - você deseja compartilhar (entregar e receber) o conteúdo disponível.
Push e conteúdo - você deseja operar não apenas com texto, mas também com outros tipos de informações que enriquecem suas mensagens.
Push saturado - você deseja exibir imagens, o processo de inicialização e outras coisas que melhoram a mensagem que deseja entregar.
Push e cliente - você deseja mostrar notificações, dependendo do estado do aplicativo.

Casos de uso mais complexos

API do Google Analytics

Eu tenho uma aplicação. E quero acrescentar a capacidade de monitorar o uso do aplicativo. Para fazer isso, eu uso uma API síncrona para atualizar os dados coletados de tempos em tempos.

Balanceador de carga

Suponha que você queira escolher o melhor provedor de conteúdo com base no desempenho do servidor. Nesse caso, você precisa de um trabalhador de serviço para interceptar solicitações e fazer uma seleção.

Eu recomendo que você visite o ServiceWorke.rs para obter uma visão mais aprofundada dos profissionais de serviço.

Nós praticamos habilidades

Como sempre digo: "Se você quer aprender a nadar, entre na água". Aprender uma teoria é uma coisa maravilhosa, mas até você sujar as mãos, você não aprenderá nada.

Registro de Operador de Serviço

Se voltarmos à ilustração do ciclo de vida de um trabalhador de serviço, veremos que, antes de tudo, precisamos instalá-lo. Para fazer isso, precisamos registrá-lo.

//   
if('serviceWorker' in navigator){
    console.log('- ')
    //     
    //      "load"
    window.addEventListener('load', () => {
        //  -
        navigator.serviceWorker
        .register('/service-worker.js')
        .then(registration => {
            //   
            console.log(`-  , scope: ${registration.scope}`) // scope -  ,     -
        })
    })
    .catch(error => {
        //  
        console.log(`    : ${error}`)
    })
}

Você pode verificar o trabalho do trabalhador do serviço acessando: Chrome: // inspecionar / # service-workers.

Além disso, informações sobre o status do trabalhador do serviço podem ser obtidas nas ferramentas do desenvolvedor: Aplicativo -> Trabalhadores do Serviço.

Qual é o próximo?

Agora precisamos armazenar todos os arquivos em cache. Podemos selecionar arquivos para armazenamento em cache. Aqui está o que parece:

//  
const CACHE_NAME = 'example.com-v1'
//    
const cacheAssets = ['index.html', 'about.html', 'js/main.js']
//    "install"
self.addEventListener('install', e => {
    console.log('- ')
    e.waitUntil(
        caches
            .open(CACHE_NAME)
            .then(cache => {
                console.log('  -:  ')
                cache.addAll(cacheAssets)
            })
            .then(() => {
                self.skipWaiting()
            })
    )
})

Aqui está o que acontece aqui:

Determinamos o nome do cache (exemplo.com-v1).
Selecionamos arquivos para armazenamento em cache. Para fazer isso, crie uma matriz.
Dentro do manipulador de eventos "install", solicitamos ao navegador que aguarde a conclusão da promessa e, em seguida, abra o cache, que será salvo com o nome "example.com-v1".
Por fim, adicione os arquivos selecionados ao cache.

Excluir cache não utilizado

Em seguida, precisamos remover as versões antigas do cache:

//    "activate"
self.addEventListener('activate', e => {
    console.log('- ')
    e.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.map(cache => {
                    if(cache !== CACHE_NAME){
                        console.log('   ')
                        return caches.delete(cache)
                    }
                })
            )
        })
    )
})

Receber resposta

Nenhuma das opções acima faz sentido se não tivermos como obter conteúdo em cache.

Pode ser obtido usando o manipulador de eventos de busca:

//    "fetch"
self.addEventListener('fetch', e => {
    e.respondWith(
        fetch(e.request)
            .then(res => {
                const copyCache = res.clone()
                caches.open(CACHE_NAME).then(cache => {
                    cache.put(e.request, copyCache)
                })
                return res
            })
            .catch(error => caches.match(e.request).then(res => res))
    )
})

Todo o código pode ser visto aqui .

Obrigado pela atenção.

Visualização do trabalho dos trabalhadores de serviço