Categorias
JavaScript

O que é MobileNet?

MobileNet é uma simplificação de redes neurais para possibilitar o seu uso em aplicações web, com isso podemos criar rapidamente uma aplicação de reconhecimento de images. Inicialmente com um propósito mobile-first MobileNet passou a ser utilizada pelo tensorflow.js e ml5.js

Em mais detalhes, MobileNets são uma classe de convolução de redes neurais projetadas por pesquisadores do Google. Eles foram inicialmente projetados para facilitar o usos de recursos de seu aparelho móvel onde parte da informação é processada na nuvem assim economizando recursos computacionais de seu celular.

Convolução???

Na convolução as imagens em pixels são convertidas em dados numéricos, por exemplo, a imagine que você possui 512 por 512 pixels abaixo:

Foto fellyph cintra

Nós seres humanos classificamos da seguinte forma:

  1. Homem feio
  2. Barba falha
  3. Camisa listrada
  4. Sentado numa cadeira preta

No exemplo acima fazemos a convolução da imagem de 512×512 em 4 dados. Da mesma forma com machine learning essa image será divida em pequenos recortes e esses recortes serão analisados por um grupo de pequenas rede neurais, após esse processo as imagens será traduzida em números (lista de arrays) que classificam essa imagem.

Esse processo é repetido para cara bloco por várias redes neurais até chegar um grupo de números que definem a imagem.

O nível de precisão de uma MobileNet é menor que as redes neurais tradicionais, para agilizar o tempo de processamento. mas isso é compensado pela quantidade de amostras que a MobileNet possui na nuvem.

Por padrão MobileNet utilizar o dataset ImageNet com mais de 1500.000 de imagens divididas em 1.000 categorias. Mas Google fez o código fonte MobileNet aberto com 16 pontos de verificação, com isso podemos treinar o nosso próprio modelo reutilizando a estrutura da mobileNet.

Processo de identificação com ml5.js por exemplo é bem simples, podemos passar o dataset a partir de uma webcam e as imagens pode ser para infinitas finalidades:

  • Objetos
  • Expressões faciais
  • Cores
  • Letras
  • Posições de um corpo humano

Para o modelo não importa a finalidade os objetos serão classificados em números. Assim precisamos das imagens e as labels para classifição dessas imagens

Após o treinamento podemos dizer através de uma porcentagem o que a imagem se trata.

No próximo post iremos falar mais sobre como utilizar o nosso próprio dataset com ml5.js, se ainda não conferiu o post sobre ml5.js aqui vai o link: https://blog.fellyph.com.br/javascript/introducao-ao-ml5-js/

Categorias
JavaScript Tutoriais

Machine Learning descomplicado com ML5.js

Conhecida como uma biblioteca amigável para machine learning, ml5.js é uma das alternativas mais acessíveis para você que deseja se aventurar no mundo do Machine Learning. Meses atrás eu descobri esta biblioteca web através do canal coding train.

O que é machine Learning?

Antes de entramos em detalhe se você nunca ouviu falar em Machine Learning, algo que entrou no hype na computação com uma serie de recursos possíveis graça a computação na nuvem e a infinidade de dados que possuímos atualmente. Mas machine learning existe na computação desde a década de 40.

Quando umas das definições mais clássicas foram criadas por Arthur Samuels:

É o campo de estudo onde são dados aos computadores a capacidade de aprender algo sem ser explicitamente programado.

Uma ótima definição feita no canal coding train com uma simples comparação na programação clássica temos o seguinte algoritmo:

if(mouseX > 200) {
  console.log("lado direito");
} else {
  console.log("lado esquerdo");
}

Já com machine learning passamos uma série de dados:

  • 300 – direita
  • 401 – direita
  • 210 – direita
  • 100 – esquerda
  • 87 – esquerda
  • 24 – esquerda

A partir dessa série de dados o Machine Learning vai analisar esses dados e tentar fazer uma previsão de dados futuros nesse caso a quantidade de amostra é importante para o sucesso da nossa aplicação.

Dentro dos tutoriais sobre ML5.js vamos falar muito sobre três items:

  1. Redes neurais – os algoritmos responsáveis por processar tarefas de Machine learning, o de temos uma entrada de dados e fazemos uma série de cálculos para ter uma saída esperada. Para identificar padrões específicos.
  2. modelos pré-treinados – modelos pre-treinados é a parte que iremos abordar 90% dos casos por que são os items em mais evidência do momento, utilizado pelas grandes empresas para identificar usuários, moderação de texto, reconhecimento de voz entre outras funcionalidades.
  3. data sets – são os grupos de dados que utilizamos para treinar os nossos modelos.

Baseado nessa rápida de alguns pontos chaves, agora vamos falar sobre ML5, a idéia é criar mais posts sobre o assunto assim quando alguns pontos dos Machine learning forem abordados traremos mais descrições

ML5.js

Ml5.js foi construída em cima do tensorFlow.js que possibilita o uso machine learning na web com o processamento de dados através da GPU, geralmente utilizado para o processamento gráfico, Mas o tensorFlow.js utiliza desse recurso para não afetar o processamento da CPU.

Com ml5.js visa atingir uma audiência que trata machine learning em mais alto nível desenvolvedores web e artistas. A biblioteca possui algoritmos e modelos que realizam a classificação de três tipos da dados imagem, sons e textos.

Para cada grupo temos umas série de funções com diferentes funcionalidades, por exemplo, a função imageClassifier() através de redes neurais conseguimos reconhecer o conteúdo da image retornando um objeto com informações sobre a imagem vindo de um modelo pre-treinado

Mas com a função imageClassifier podemos treinar o nosso próprio modelo. Outra função interessante é poseNet(), com ela conseguimos identificar poses humanas, ela pode identificar uma única pose ou múltiplos integrantes.

No geral temos 10 funções para classificação de images e 2 funções para classificação de som e 4 funções para identificação de texto.

Tensorflow.js

É uma biblioteca criada pelo Google para trabalhar machine learning no JavaScript, foi construído baseado no TensorFlow biblioteca escrita em Python. Com tensorFlow.js podemos utilizar modelos pré-treinados, para classificação de imagens, detecção de objetos, detecção de texto tóxico e reconhecimento de comandos por voz.

Ou treinar o nosso próprio modelo, ele é uma biblioteca base do ML5.js possui uma estrutura mais complexa que o ML5.js

Exemplo prático

Agora que temos uma introdução desses três items chaves vamos fazer o nosso primeiro exercício com ML5.js, quando escrevi esse tutorial a lib estava na versão 0.3.1, agora vamos escolher uma foto para testar com ml5.js, sinta-se a vontade para escolher a sua foto:

Escolhi essa imagem para realizar meu teste

Agora temos a nossa imagem vamos criar o nosso primeiro classificador de imagens:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ML5JS project</title>
    <script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script>
</head>
<body>
    <img src="./assets/dublin.jpg" id="foto" />
    <script>
        // Passo 1: Criar uma classificador de imagems com mobileNet
        const classifier = ml5.imageClassifier('MobileNet', onModelReady);

        function onModelReady() {
            // Passo 2: Selecionar uma image
            const img = document.querySelector("#foto")

            // Passo 3: Fazer a predicção
            let prediction = classifier.predict(img, gotResults);
        }

        // Passo 4: Fazer algo quando tivemos o resultado!
        function gotResults(err, results) {
            console.log(results);
            // e aqui acontece toda a mágica
        }
    </script>
</body>
</html>

No código acima temos exemplo fazemos a classificação da imagem que escolhemos acima, primeiramente fazemos o carregamento da lib em uma CDN, após adicionamos a imagem com uma tag img em nosso markup, temos uma tag script com o código que irá analisar nossa imagem.

Dentro da tag script o primeiro comando faz a chamada de uma função imageClassifier dentro da biblioteca ML5 passando dois parâmetros:

  • modelo – nesse caso vamos utilizar o mobileNet esse modelo pre-treinado está na nuvem ele possui mais de 14 mil imagens em seu dataset
  • função de callback – o segudo parâmetro a função de callback que iremos chamar quando nosso classificador de imagens estiver pronto.

Quando nosso modelo estiver pronto vamos chamar a função onModelReady dentro dela selecionamos a imagem que queremos analisar e com o nosso classificador de imagens(classifier) requisitamos a previsão da imagem. novamente passando dois parâmetros a imagens que iremos analisar e a função de callback.

Quando executamos o nosso código em um browser o resultado será o seguinte:

screenshot to console do browser

Um resultado meio estranho se traduzirmos o resultado temos label como “mastro” ou “poste” com confidência de 0.76 ou seja 76%. Como podemos ver temos uma farbrica no fundo com duas chamines.

A escolha da imagem foi proposital para a gente entender como funciona a analise de images, como falamos anteriormente MobileNet é um modelo pré-treinado mas ele tem uma base de 14 mil imagens o problema nessa caso será que o dentro dessas 14 mil imagens não treinamos o nosso modelo para identificar fábricas.

Se fizermos um segundo teste com essa imagem:

Segunda tentativa

O resultado será o seguinte:

Agora temos o resultado classificado como “beer glass”(copo de cerveja) com uma confidência de 94%, então como podemos ver não existe uma mágica por trás do Machine Learning.

Com isso entendemos que precisão é baseada na quantidade de informação em que meu dataset detém. Por isso empresas que detem uma grande base de informação conseguem aplicar o tecnologia a várias soluções.

Caso queira conferir mais tutoriais sobre JavaScript aqui confira o link: https://blog.fellyph.com.br/category/javascript/

Para esse post vamos ficando por aqui a idéia que em breve estarei postando um vídeo em meu canal. Se ainda não segue o canal aqui está o link: https://www.youtube.com/user/fdangellys

Categorias
JavaScript Tutoriais

Introdução ao AMP

AMP ou Accelerated mobile pages surgiu para solucionar um problema antigo das aplicações web relacionado a performance, o fato que muitas das aplicações web são desenvolvidas nos grandes centro onde as empresas e usuários tem facilmente acesso a conexão rápida. Quando as aplicações são testadas nos grandes centros não levam em conta o tempo de carregamento da aplicação em uma conexão lenta, e um dos dos objetivos do AMP foi solucionar este problema e e entregar essa informação priorizando performance.

Sabemos conexões rápidas não se aplica ao resto do planeta muitas regiões ao redor do globo continuam tendo dificuldade de acessar conteúdo online. Como podemos promover a inclusão desses grupos preocupado com esse problema o time do Google criou o projeto open source chamado Accelerated Mobile Pages posteriormente chamado apenas de AMP.

Mas esse problema também afeta os grandes centros usuários mobile com conectividade limitada também tem sua experiência prejudicada, todos esses problemas aumentam o tempo de carregamento e na exibição de elementos na tela. Além do fato que aplicações de alta performance ajudam na taxa de conversão usuários, que tais usuários estão cada vez mais utilizando aplicações web através de dispositivos moveis.

AMP permite a criação de sua aplicação em um curto espaço de tempo, isso através de componentes criando um ambiente de fácil manutenção além promover melhores praticas como:

  • Performance
  • Acessibilidade
  • Confiabilidade
  • Design responsivo

Além disso AMP reduz a complexidade do seu código, mas sem perder o controle de sua aplicação você continua com a capacidade de adicionar código CSS para customizar sua aplicação. O set de componentes já existentes ajudam na agilidade na criação de novas aplicações presando a performance. AMP é um projeto open source a comunidade sem está criando novos componentes e novas versões da aplicação e a base do seu código sempre será atualizada

Como AMP funciona

AMP possui três pilares:

  • AMP HTML extende HTML básico criando novas tags criando novas features, por trás das cortinas ele trabalha com web components
  • AMP JS controla a execução de javascript também adicionando melhorias de performance como tree shaking.
  • AMP Cache armazena o conteúdo da aplicação.

A performance dentro de projetos AMP é possível por conta de alguns pontos chaves que iremos listar a seguir.

JavaScript assíncrono

com javascript podemos modificar todos os aspectos de uma página, mas também bloquear o seu processamento caso não especificarmos que o seu carregamento não afete a renderização da página. Nesse caso todo o carregamento de JavaScript em AMP é feito de forma assíncrona para não afetar a entrega do conteúdo.

Por isso AMP restringe o carregamento de JavaScript escrita pelo autor nesse caso temos que utilizar tags especiais para incluir interação com o usuário.

Evita que extensões de terceiros bloqueiem a renderização

AMP não permite que extensões como, lightboxes, instagram, embers, tweets bloqueiem a renderização do seu conteúdo. Muitos desses items enquanto fazem requisições para suas respectivas APIs bloqueiam a renderização da sua aplicação, mas isso não significa que que você não poderá utilizar esses recursos AMP tem uma série de componentes para interagir com outras plataformas.

Tamanho de todos os recursos estaticamente

Recursos como imagens, iframes ou anúncios, precisam informar seu tamanho no HTML, de modo que AMP possa determinar o tamanho e a posição de cada elemento antes que os recursos sejam baixados. AMP carrega o layout da página sem esperar o download de nenhum recurso.

AMP separa o layout HTML dos recursos externos, isso para priorizar a entregar com conteúdo mais rápido possível. Apenas uma solicitação HTTP é necessária para o todo o layout do documento (+ fontes). Como AMP é otimizado para evitar recálculos de estilo no seu navegador, não haverá nenhum novo layout após a ultima requisição.

Gerenciamento de Javascript de terceiros

AMP mantém todos os scripts de terceiros fora do caminho crítico da renderização das páginas. JS de terceiros gostam de usar carregamento síncrono para executar suas tarefas para garantir sua execução mas isso acaba aumentando o tempo de carregamento da aplicação.

Páginas AMP permitem o carregamento de scripts de terceiros mas apenas em iframes. Com isso o carregamento fica isolado e não afeta o processamento principal de nossas páginas. Mesmo que eles afetem o estilo da página o impacto será mínimo.

Atualizando o post enquanto estava escrevendo este post

CSS inline e com tamanho limitado

O CSS externo como sabemos bloqueia a renderização de nossa página, nas páginas AMP somente estilos inline são permitidos, com isso temos uma requisição a menos em nossa aplicação e uma renderização crítica de nossa aplicação web.

Além disso a folha de estilo in-line é limitada para um máximo de 50kb. Embora esse tamanho seja grande o suficiente para páginas muito sofisticadas, ele ainda exige que o autor mantenha o CSS limpo.

Carregamento eficiente de fontes

As fontes web são uma parte visual importante das nossas aplicações web, portanto, a otimização de fontes é um ponto crucial de nossa aplicação algumas web fonts são bem pesadas aumentando o tamanho total da nossa aplicação. AMP realiza optimização no carregamento de fontes e realiza o preload nossas fontes.

Animações somente utilizando a GPU

O único modo de ter uma aplicação de alta performance é realizado o uso eficiente dos recursos e utilização da GPU é um recurso importante para isso. Todas as animações com AMP são executadas pela GPU assim liberando a thread principal para processamento crítico de nossa aplicação.

Priorização do carregamento dos recursos

AMP controla o carregamento de todos recursos: com isso os recursos serão carregados quando realmente necessários utilizando técnicas como lazy-load e prefetch.

Além disso AMP possui uma lista de prioridade exemplo, imagens estão no topo da lista enquanto ads estão no final dessa lista. Outro fator importante para priorização é quais os recursos estão sendo exibidos para o usuário.

Utilização de novas API para reduzir o tempo de carregamento

A nova API preconnet API é usada intensamente para garantir as solicitações HTTP sejam feitas o mais rápido possível. Com isso a página pode ser pre carregada em background, por isso algumas vezes quando clicamos nos primeiros resultados de uma busca no Google temos o carregamento instantâneo.

Embora o pré-processamento possa ser aplicado a todo o conteúdo da web, ele também ajuda na largura de banda e o uso de CPU.

Web Components

Com AMP HTML temos a possibilidade de utilizar uma variedade de componentes web, utilizando somente elementos nativos da plataforma o framework disponibiliza uma série de componentes reutilizáveis para entregarmos uma aplicação interativa.

Esse são alguns dos items relevantes na plataforma a lista completa você pode encontrar na documentação em amp.dev. Em meu canal do youtube estarei rodando um curso sobre o framework onde você pode conferir a playlist do curso aqui: https://www.youtube.com/playlist?list=PLmIA3VZysEqQxsVcZ7u2ZHOnh78eIOKON

Também confira mais posts na página da categoria AMP.

Categorias
JavaScript PWA - Progressive web apps

Introdução a Workbox

Workbox é um conjunto de bibliotecas e módulos do node que simplifica o processo de cache de assets em nossa aplicação, assim agilizando o nosso trabalho na criação de uma Progressive Web Apps. Este tutorial será baseado na versão 4 da biblioteca. Workbox trabalha dois conceitos importantes sobre PWAs:

Performance: não espere por todos os arquivos de sua aplicação virem da internet, crie estratégias de cache para servir arquivos do armazenados em seu device.

Resiliência: Conexões móveis ou em regiões com fraca infra estrutura podem afetar a experiência do usuário, habilite sua aplicação administrar situações que a conectividade é limitada

Porquê Workbox?

Workbox é uma biblioteca reune as melhores práticas e toda a complexidade de trabalhar com service workers com por exemplo:

  • Precaching
  • Runtime caching
  • Estratégias de cache
  • Requisição de rotas
  • Background Sync
  • Ajuda no debug da aplicação

Opções de utilização

Para trabalhar com Workbox temos as seguintes alternativas:

  • Workbox CLI
  • node.js
  • webpack plugin

Lembrando que essas alternativas são independentes você deve escolher somente uma, então escolha a alternativa que melhor se adequa ao seu caso.

Workbox CLI

CLI nada mais é que uma acrônimo para Command line Interface(Interface de linha de comando) tem como objetivo trazer um grupo de comandos no terminal para possibilitar realizar uma terminada ação, seja criar novos projetos ou administrar recursos existentes. Mas tendo como foco principal reduzir o trabalho e a complexidade ao item aplicado.

Primeiro passo quando trabalhamos com um CLI é fazer sua instalação workbox-cli depende do node.js para funcionar, antes de rodar qualquer comando para o CLI precisamos instalar a versão mais recente do node.js, após a instalação do node rodamos os seguinte comando em nosso terminal:

npm install workbox-cli --global

Se tudo ocorrer bem seremos capazes de testar com o seguinte comando:

workbox --help

Se o terminal reconheceu o comando workbox sinaliza que a instalação foi bem sucedida, agora é hora de utilizar o comando:

workbox wizard

Ele irá nos dar um passo-a-passo para a configuração de nosso projeto com as seguintes perguntas:

  1. Qual é a pasta do nosso app onde se encontra a pasta em que iremos exportar nossa aplicação?
  2. Quais os tipos de arquivos em que gostaríamos de realizar o preache?
    1. svg, jpg, png, html, css, js, json
  3. Onde preferimos salvar o nosso service worker?
  4. Onde gostariamos de salvar nosso arquivo de configuração

Como podemos ver na imagem abaixo, no meu caso estou rodando a versão 4.3.1 do Workbox, versões anteriores ou futuras esse passos podem mudar um pouco mas o core sempre será quais arquivos queremos fazer o cache e qual será o nosso service worker.

Por fim ele exibe o comando necessário para gerar nosso service worker:

workbox generateSW workbox-config.js

Quando rodamos esse comando ele irá ler o arquivo de configuração gerado pelo wizard:

module.exports = {
  "globDirectory": "dist/",
  "globPatterns": [
    "**/*.{svg,jpg,png,html,css,js,json}"
  ],
  "swDest": "dist/sw.js"
};

Varrer e criar um cache para todos os arquivos com as extensões especificadas anteriormente. Você terá um retorno parecido com a mensagem a seguir.

The service worker was written to dist/sw.js
22 files will be precached, totalling 84.2 kB.

Esse comando será necessário toda a vezes em que alteramos os arquivos dentro de nossa aplicação, para agilizar esse processo podemos fazer uma integração com gulp ou webpack.

Gulp + workbox

Como mencionamos anteriormente podemos agilizar o processo de criação de service worker utilizando ferramentas de automatização de tarefas, basicamente vamos assistir as mudanças realizadas em nosso projeto quando algum arquivo for alterado o Gulp será responsável por gerar o nosso service worker

Instalação:

npm install workbox-build --save-dev

Exemplo

const workboxBuild = require('workbox-build');

// NOTE: Esse comando deve ser executado depois que os assets forem gerados
const buildSW = () => {
  // assim retornamos generateSW que retorna uma Promisse
  return workboxBuild.generateSW({
    globDirectory: 'build',
    globPatterns: [
      '**\/*.{html,json,js,css}',
    ],
    swDest: 'build/sw.js',
  });
}

webpack + workbox

Para webpack também temos um plugin especifico para trabalhar com workbox ele tem suporte precaching e runtime caching. Caso ainda não conheça webpack tenho um post de introdução aqui.

Para instalação do plugin na pasta de nosso projeto onde ficar o nosso arquico package.json executamos o seguinte comando em nosso terminal:

npm install workbox-webpack-plugin --save-dev

Depois de instalado precisamos configurar o nosso webpack, dentro do arquivo de configuração do webpack adicionamos o Plugin para workbox:

// dentro do webpack.config.js:
const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = {
  // Outras configurações...

  plugins: [
    // Outros plugins...
    new WorkboxPlugin.GenerateSW()
  ]
};

Após tudo configurado precisamos registrar nosso service worker:

<script>
// verificamos se o browser suporta service worker
if ('serviceWorker' in navigator) {
  // usamos o evento load para registrar nosso service worker
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}
</script>

Caso queira saber mais sobre service worker tenho um post de introdução a service worker também estou rodando um curso gratuito sobre PWA em meu canal no youtube. Qualquer dúvida só deixar um comentário e até o próximo post.

Categorias
JavaScript PWA - Progressive web apps

Estratégias de cache para PWAs

Continuando a série sobre PWA tivemos uma introdução sobre Service Worker. Vimos que o service worker permite o suporte a aplicações offline mas também podemos controlar as requisições feitas pelo o navegador isso nos dá a habilidade de pensar em diferentes estratégias de cache para a nossa aplicação e esse será o tema do nosso post.

Desenvolvendo uma aplicação web alguns dados dentro da nossa solução tem uma periodicidade maior ou menor de atualização, por exemplo a logo de nosso site é tipo de dado que pode passar anos sem alteração, já no caso de uma sessão de últimas notícias podem ter uma periodicidade de minutos. Com esse dois exemplo podemos ver situações distintas, assim com a partir desses exemplos vamos abordar as estratégias mais comum de cache.

Cache only

Nesse caso todos as requisições serão direcionadas para o cache.

  1. O service worker recebe a requisição
  2. Consulta se o conteúdo se encontra no cache
  3. Retorna o conteúdo requisitado para o usuário

Se não encontrado no cache a requisição irá falhar. Mas esse pattern assume que os conteúdos serão armazenados no cache durante a instalação do service worker.

Casos recomendados: esse padrão é ideal para assets que raramente são atualizados, por exemplo, logos, ícones de redes sociais e estilos. Mas isso não significa que eles nunca serão alterados, esse controle será feito pela versão do seu service worker.

Código:

self.addEventListener('fetch', event => {
  // todos os arquivos serão servidos pelo cache 
  event.respondWith(caches.match(event.request));
})

Cache first

Parecida com a estratégia anterior, mas com uma diferença, caso não ache o arquivo no cache ele irá realizar uma requisição na rede como podemos ver no código a seguir:

self.addEventListener('fetch', event => {
   
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

Network only

  1. O service worker irá analisar a requisição
  2. Irá requisitar na rede os arquivos requisitados
  3. O conteúdo requisitado é enviado para o usuário

Neste caso se a requisição a rede falhar não retornará nada.

Casos recomendados: Esse útil para requisições exemplo pings no servidor para análise de tráfego ou estatísticas.

Network first

Nessa situação primeiramente fazemos o request para a rede, caso a requisição falhe procuramos o arquivo no cache. Problema nessa requisição que perdemos muito tempo esperando um retorno de uma falha na requisição.

Casos recomendados Trabalhamos com essa estratégia quando temos a prioridade dos dados recentes. Ideal para áreas que tem atualizações constantes.

Código:

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).catch(() => {
      return caches.match(event.request);
    })
  );
});

Cache, then network

Essa estratégia carrega os dados imediatamente do cache enquanto verifica na rede se o conteúdo sofre alguma alteração. No momento que receber o retorno das informações da redes, o conteúdo será verificado caso precisa será atualizado.

Temos o benéfico de exibir o conteúdo imediatamente mas sempre fazemos duas requisições precisando ou não da informação. Por que nesse caso só sabemos se o conteúdo foi alterado se requisitamos a informação na rede, se nada mudou, fazemos uma requisição em vão. Outro desafio desse padrão é desenvolver uma interface que não pareça estranho a atualização do conteúdo.

Casos recomendados: Quando priorizamos a performance mas temos uma frequência constante de updates do conteúdo, aplicações com timeline de e game leader board.

Código (sw.js)

self.addEventListener('fetch', event => {
   event.respondWith(
     caches.open('mysite-dynamic').then(cache => {
        return fetch(event.request).then(response => {
          cache.put(event.request, response.clone());
          return response;
        })
     })
   );
 });

Código(main.js)

let networkDataReceived = false;
startSpinner()
const networkUpdate = fetch('/data.json').then(response => {
  if(!response) throw Error('no data');
  return response.json();
}).then(data => {
  if(!networkDataReceived);
  updatePage(data);
}).catch(() => {
  return networkUpdate;
}).catch(showErrorMessage).then(stopSpinner);

Stale while revalidate

Utilizamos essa técnica quando não temos prioridade do conteúdo mais recente mas queremos fazer atualizações periódicas. Essa estratégia é parecida com a cache first, mas com uma diferença os dados mais recentes não serão atualizados imediatamente, o cache será atualizado e a informação será exibida quando o usuário recarregar a página.

Casos recomendados: Logos, imagens do perfil do usuário.

Código

self.addEventListener('fetch', event => {
   event.respondWith(
     caches.open('mysite-dynamic').then(cache => {
        return cache.match(event.request).then(response => {
         const fetchPromise = fetch(event.request)
          .then(networkResponse => {
           cache.put(event.request, networkResponse.clone());
           return networkResponse;
          });
          return response || fetchPromise;
        })
     })
   );
 });

Generic fallback

Quando o usuário usuário não achar o conteúdo requisitado na rede ou no cache retomamos um conteúdo genérico. Por exemplo, quando não conseguimos encontrar uma imagem específica como um avatar, para não prejudicar nossa interface retornamos um avatar genérico, por exemplo, uma ilustração. Esse padrão pode ser combinado com as estratégias anteriores.

Código

self.addEventListener('fetch', event => {  
  event.respondWith(
    caches.match(event.request).then(response => {
     return response || fetch(event.request);
    }).catch(() => {
      return caches.match('/offline.html');
    })
  );
});

Esse são as principais estratégias de cache, além delas podemos combinar estratégias de cache, mas para esse post vamos abordar os mais populares nos próximos posts iremos abordar uma ferramenta que irá facilitar nossa vida: Workbox, mas isso é assunto para um novo post.

Caso tenha alguma dúvida deixe um comentário e até o próximo post.