Como fazer seu PWA funcionar offline

Você provavelmente já sabe o que o Progressive Web App – juntamente com seus recursos que mudam o setor – já é, mas para fins de iteração, vamos repetir mais uma vez os recursos incríveis e exclusivos do PWA que podem revolucionar a experiência da Web, que é sua capacidade offline .

 Leitura recomendada: O que é um PWA?

Ao contrário da web normal, cuja visualização de conteúdo só está disponível com uma conexão, o Progressive Web App difere de tal forma que, uma vez que os service workers - um mecanismo embutido que é responsável por muitos dos recursos progressivos do PWA - carregam os arquivos necessários, a visualização offline será possível e os usuários poderão interagir com o aplicativo mesmo quando estiverem offline.

Aplicativos da Web progressivos e disponibilidade offline

Para saber do que se trata todo o alarido com os PWAs - especialmente a capacidade offline dele, talvez seja hora de experimentar em primeira mão uma visualização offline do nosso site principal, que também é um PWA por definição.

Com os Progressive Web Apps, toda a experiência offline não é diferente de sua experiência típica com uma conexão — e essa é a beleza disso. Esse é um recurso especialmente útil para lojas de comércio eletrônico que precisam de uma experiência de navegação ininterrupta, mesmo quando não há conexão.

Observações : Todo site PWA precisa de um cache inicial de recursos essenciais antes que a visualização offline seja disponibilizada ao usuário.

Como fazer seu PWA funcionar offline

Seria complicado entrar em todos os detalhes da construção de um Progressive Web App totalmente funcional e com capacidade offline, e é por isso que hoje começaríamos com o básico primeiro. Nosso objetivo é fazer um aplicativo da Web progressivo barebone que funcione offline .

Pré-requisitos

• Um site/aplicativo web simples. Qualquer coisa com um index.html , um index.js e um style.css servirá.

Depois de ter todos os pré-requisitos em ordem, é hora de fazer seu PWA barebone funcionar offline!

Criando um service worker básico

Antes de mais nada, você precisa criar seu sw.js que contém todo o código necessário para um service worker funcional.

 // sw.js
self.addEventListener("buscar", evento => {
    console.log("Você buscou " + event.url);
});

Depois de criar seu service worker, vamos verificar se seu navegador o suporta e referenciá-lo em seu index.js :

 // index.js
if ("serviceWorker" no navegador) {
    navigator.serviceWorker
        .register("sw.js")
        .then(() => console.log("trabalhador de serviço registrado!"));
}
// o resto do código da sua página...

O código acima deve ser simples o suficiente. Ele verifica se seu navegador oferece suporte a service workers e, em caso afirmativo, retorna um " service worker registrado! ”. Ao registrar os service workers, você está basicamente dizendo ao navegador para usar o sw.js como instruções para seus service workers e, por sua vez, associar o(s) novo(s) service worker(s) ao seu site.

Agora, de volta ao sw.js , adicione o seguinte código:

 // sw.js
self.addEventListener("buscar", evento => {
    console.log("Você buscou " + event.url);
});

O código adiciona um EventListener que é vital para nossa operação futura. Na verdade, muitos navegadores, incluindo o Chrome, não permitem que seu PWA seja instalado, a menos que haja um ouvinte de fetch registrado.

O addEventListener no código acima tem dois argumentos: os eventos a serem ouvidos e um retorno de chamada que recebe um objeto de evento. Depois que esse evento estiver em vigor, seu service worker começará a ouvir eventos de fetch que incluem solicitações de HTML, CSS, JS, áudio, imagens e quaisquer outras solicitações para APIs/outros sites do seu site.

Cache de seus recursos

Para que seu PWA seja compatível com o offline, os service workers pagam uma parte para fornecer o conteúdo , mas você também precisa armazenar em cache os recursos da sua página.

Para armazenar em cache os recursos da sua página, primeiro você precisa planejar o tamanho do seu armazenamento em cache, pois há um limite para isso.

Limite de armazenamento em cache

Cada navegador tem uma maneira diferente de lidar com o armazenamento em cache. Quase todos eles, no entanto, têm um limite para o tamanho do armazenamento em cache – esse limite geralmente é o motivo pelo qual você não vê sites grandes e obesos, como o Amazon, armazena em cache toda a loja usando service workers.

Agora, esse limite varia porque depende do dispositivo do usuário final; mas normalmente deve ser cerca de 20% do espaço máximo em disco do seu usuário. Para obter mais informações, consulte nosso gráfico abaixo ou o guia oficial do Google sobre armazenamento offline para Progressive Web Apps.

Agora que eliminamos esse limite de armazenamento em cache, vamos avançar para realmente armazenar em cache seus recursos .

Para armazenar em cache os recursos da sua página, precisamos de um array global que contenha todos os ativos que queremos armazenar:

 /* 
  Isso é tudo o que queremos salvar no cache.
  Para que o aplicativo funcione offline/seja instalável,
  temos que salvar não apenas imagens, mas nosso HTML, JS e CSS
  também - qualquer coisa que queiramos usar quando estiver offline.
*/
const ATIVOS = [
    "https://i.imgur.com/Kbkqr2n.png",
    "https://i.imgur.com/lgLaG0x.png",
    "https://i.imgur.com/0iL8mxP.png",
    "https://i.imgur.com/KDsdYeS.png",
    "https://i.imgur.com/mK50fqL.png",
    "https://i.imgur.com/KYGH2Qa.png",
    "/estilo.css",
    "/index.html",
    "/offline.html",
    "/"
];

É aqui que tudo o que você deseja usar offline é armazenado. No exemplo acima, as primeiras imagens são caminhos para o Imgur, onde uma variedade de logotipos do SimiCart está armazenada.

Com esta etapa, nossa lista de recursos necessários para uso offline está pronta. Vamos armazená-los em cache usando service workers.

Adicione esta parte superior na parte superior do seu sw.js:

 // sw.js

let cache_name = "SimiCart"; // A string usada para identificar nosso cache

self.addEventListener("instalar", evento => {
    console.log("instalando...");
    event.waitAté(
        esconderijos
            .open(cache_name)
            .then(cache => {
                return cache.addAll(ativos);
            })
            .catch(err => console.log(err))
    );
});

Essencialmente, este código instrui o navegador a esperar (usando a chamada waitUntil() ) pelo nosso cache.

Usando a API de cache, especificamente o addAll() , nosso array de ativos pode ser adicionado sem esforço ao cache, pronto para ser servido pelos service workers. Bem, pensando bem, não está tão pronto. Ainda precisaríamos modificar um pouco nosso manipulador de eventos de fetch .

É assim que vai ficar agora:

 self.addEventListener("buscar", evento => {
    if (event.request.url === "https://www.simicart.com/") {
        // ou qualquer que seja o URL do seu aplicativo
        event.respondWith(
            fetch(event.request).catch(err =>
                self.cache.open(cache_name).then(cache => cache.match("/offline.html"))
            )
        );
    } senão {
        event.respondWith(
            fetch(event.request).catch(err =>
                caches.match(event.request).then(response => response)
            )
        );
    }
});

Agora deve ficar claro no código acima que estamos tentando armazenar recursos em cache mesmo quando o aplicativo está offline. A lógica é a seguinte:

• Primeiro, o aplicativo tenta obter recursos online e responder com os recursos armazenados em cache se essa busca falhar (usando o respondWith() ).
• Dentro do respondWith() , chamamos fetch(event.request) para tentar buscar recursos da rede e, como fetch é baseado em Promise , o Promise rejeitará se falhar ao se conectar à rede e, por sua vez, acionará o catch() declaração.
• Na instrução catch() é onde você deseja chamar seus recursos em cache.

E é isso. Seu PWA agora deve poder trabalhar offline! Bem fácil, não é?

Conclusão

As coisas estão se movendo muito rápido no mundo tecnológico e quanto mais você esperar para converter para PWA ou integrar uma função vital, como recursos offline em seu PWA, maior será o custo de oportunidade para você e sua empresa.

Ainda assim, sempre há fornecedores de soluções prontamente disponíveis, como o SimiCart, que podem cuidar de todas as suas necessidades. Se, por acaso, você é um comerciante online e procura uma solução Magento PWA perfeita, você está no lugar certo. Somos um conhecido fornecedor de soluções para sites de comércio eletrônico Magento com mais de 5 anos de experiência em PWAs e aplicativos nativos.