Cache

CACHE, além do F5 e CTRL + SHIFT + R

github.com/labcodes twitter.com/labcodes labcodes.com.br

ESTÚDIO DE SOFTWARE DE RECIFE PARA O MUNDO

JARDIM AO AR LIVRE <3

github.com/thulioph twitter.com/thulioph_ thulioph.com

+15 PALESTRAS

+5 ESTADOS

NÃO SE PREOCUPE COM LINKS, TODOS ESTÃO NOS SLIDES.

TODO O MATERIAL SERÁ DISPONIBILIZADO

TOME NOTA DE ALGUNS TERMOS, PODEM SER ÚTEIS PARA PESQUISAS
FUTURAS.

COMUNIQUE-SE!

– Apresentador da palestra “Onde o cache pode ser útil?”

UX OFFLINE

UX OFFLINE PERFORMANCE

APPCACHE goo.gl/BJpy2S

DEFINIÇÃO Simples arquivo de texto (.txt) ou qualquer outra extensão
(.dale) / App Cache

(.dale) O mimetype deve ser text/cache-manifest / App Cache

(.dale) O mimetype deve ser text/cache-manifest. Normalmente utiliza-se a extensão .appcache / App Cache

caniuse.com

MANIFESTO

CACHE MANIFEST # 16-12-2017:v2 CACHE: index.html js/main.js css/main.css img/logo.png NETWORK:
login.php /myapi http://api.twitter.com FALLBACK: images/large/ images/offline.png *.html /offline.html

CACHE MANIFEST CACHE MANIFEST

CACHE MANIFEST CACHE MANIFEST # 16-12-2017:v2

CACHE CACHE: index.html js/main.js css/main.css img/logo.png

NETWORK NETWORK: login.php /myapi http://api.twitter.com

NETWORK NETWORK *

FALLBACK FALLBACK: images/large/ images/offline.png  *.html /offline.html

CACHE MANIFEST # 16-12-2017:v2 index.html js/main.js css/main.css img/logo.png

MANIFEST <html manifest=“manifest.appcache"> ... </html>

MP3 DE FAROESTE CABOCLO ~ 8MB

UMA MÚSICA DE 4MIN NO SPOTIFY ~ 6.5MB

devdocs.io

COMO ATUALIZAR O CACHE?

EVENTOS não os do facebook appCache.addEventListener('cached', handleCacheEvent); appCache.addEventListener('checking', handleCacheEvent); appCache.addEventListener('downloading',
handleCacheEvent); appCache.addEventListener('error', handleCacheError); appCache.addEventListener('noupdate', handleCacheEvent); appCache.addEventListener('obsolete', handleCacheEvent); appCache.addEventListener('progress', handleCacheEvent); appCache.addEventListener('updateready', handleCacheEvent);

COMO ATUALIZAR O CACHE O usuário limpe o armazenamento de
dados do navegador para o seu site. / Appcache

COMO ATUALIZAR O CACHE O usuário limpe o armazenamento de
dados do navegador para o seu site. O arquivo de manifesto seja modiﬁcado. / Appcache

alistapart.com/article/application-cache-is-a-douchebag

SERVICE WORKER goo.gl/7jzKUn

Página SW Network

caniuse.com

– Algum site que eu não lembro “Service Worker é
um dos conceitos mais importantes por trás das Progressive Web Apps.”

PUSH NOTIFICATION

PUSH NOTIFICATION BACKGROUND SYNC

PUSH NOTIFICATION BACKGROUND SYNC OFFLINE EXPERIENCE

ESTRATÉGIAS DE CACHEAMENTO goo.gl/1TVRTz

CACHE FIRST

Página SW Cache Network

CACHE FIRST Ideal para assets que nunca mudam. / Pontos
Positivos

CACHE FIRST Ideal para assets que nunca mudam. Possuem uma
resposta muito mais rápida. / Pontos Positivos

CACHE FIRST Caso um asset não esteja descrito no cache,
ele não será adicionado automaticamente após a requisição. / Pontos Negativos

github.com/facebookincubator/create-react-app

NETWORK FIRST

Página SW Network Cache

NETWORK FIRST A aplicação sempre irá fornecer o conteúdo mais
atual disponível. / Pontos Positivos

NETWORK FIRST A aplicação sempre irá fornecer o conteúdo mais
atual disponível. O usuário ofﬂine tem acesso, através de uma versão do cache. / Pontos Positivos

NETWORK FIRST Se o usuário não tiver uma boa conexão,
pode ser prejudicado e comprometer a experiência do uso. / Pontos Negativos

CACHE E NETWORK

Página SW Network Cache

CACHE E NETWORK Apenas troque o conteúdo atual pelo novo.
/ Pontos Positivos

CACHE E NETWORK Não "desapareça" com nada na tela que
permita que o usuário interaja (botão, imagem, etc) / Pontos Negativos

FALLBACK GENÉRICO

Página SW Cache Network Genérica

FALLBACK GENÉRICO Ideal para imagens de avatar, requisições POST que
falharam, etc. / Pontos Positivos

FALLBACK GENÉRICO Necessidade de desenvolver uma página genérica para cada
tipo diferente de "resposta incompleta” / Pontos Negativos

VOCÊ NO CONTROLE!

USUÁRIO NO CONTROLE!

– Um dev bêb@d0 “Cache, Performance e Ofﬂine também são
UX.”

FERRAMENTAS

Chrome Developer Tools -> Application -> Service Worker

Chrome Developer Tools -> Application -> Cache -> Cache Storage

github.com/GoogleChromeLabs/sw-toolbox

github.com/GoogleChromeLabs/sw-precache

github.com/NascHQ/dsw

INTERNET DESCENTRALIZADA?

goo.gl/P7bjvh

OBRIGADO! THULIO PHILIPE @thulioph_ www.labcodes.com.br speakerdeck.com/thulioph/cache

Cache

Cache

More Decks by Thulio Philipe

Other Decks in Programming

Featured

Transcript