Tweet
Tweet

Slide 1

Slide 1 text

Service Workers Front In maceió - novembro de 2014

Slide 2

Slide 2 text

Erick Belfort Coordenador de desenvolvimento na rc comunicação @erickbelfy

Slide 3

Slide 3 text

Conectividade Conectividade é um fator importante na experiência do usuário

Slide 4

Slide 4 text

Conectividade Se a conectividade for boa, você terá uma boa experiência de usuário

Slide 5

Slide 5 text

Conectividade Se a conectividade for baixa, A experiência de usuário sera baixa

Slide 6

Slide 6 text

Conectividade Se a conectividade for nula, não haverá experiência alguma

Slide 7

Slide 7 text

Conectividade Aplicações mobile A aplicação faz um cacheamento prévio do conteúdo Após o carregamento dos dados realiza-se a busca na internet

Slide 8

Slide 8 text

OFFline first

Slide 9

Slide 9 text

OFFline first antes de falarmos sobre o assunto principal, vamos contar um pouco de história…

Slide 10

Slide 10 text

OFFline first O appcache veio para suprir a carência que as aplicações web tinham para tratar os recursos de conectividade de seu ecossistemas. APPcache

Slide 11

Slide 11 text

Appcache

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Appcache

Slide 14

Slide 14 text

Appcache

Slide 15

Slide 15 text

Appcache

Slide 16

Slide 16 text

Appcache Apesar de todos os pontos citados… Possui um grande potêncial • permite cachear dados • Traça rotas de cacheamento • Possui boa compatibilidade em browsers recentes • Trata contingencia de dados (online/ offline)

Slide 17

Slide 17 text

Appcache O guia e para entender o comportamento do appcache é a documentação Leia como se não houvesse amanhã e quando terminar…

Slide 18

Slide 18 text

Leia novamente…

Slide 19

Slide 19 text

Service Worker

Slide 20

Slide 20 text

Service worker É uma nova especificação desenvolvida pelas grandes google, mozilla, samsung

Slide 21

Slide 21 text

Service worker • Ecossistema controlado, sem mágicas ou mandingas; • Nenhum estado é alterado sem que o agente (desenvolvedor) altere seu comportamento inicial • É um processo (thread), sem acesso ao DOM, provê serviços que a web limita por questões de segurança, performance, etc… • Network service, capacidade de interceptar sinais de rede em um ambiente "debugável" • Cache API, cache previsível e nunca expira

Slide 22

Slide 22 text

Service worker • Utiliza o javascript como linguagem de desenvolvimento

Slide 23

Slide 23 text

Service worker Para conferir o andamento das funcionalidades do service worker

Slide 24

Slide 24 text

Estrutura

Slide 25

Slide 25 text

usuário app Browser Service worker cache servidor

Slide 26

Slide 26 text

usuário app Browser Service worker cache servidor

Slide 27

Slide 27 text

Show me the code, Bitch!

Slide 28

Slide 28 text

HTTPS Só se instala um service worker no mesmo dominio da aplicação Use o github pages para fazer experimentos

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

Background sync

Slide 37

Slide 37 text

Push notifications

Slide 38

Slide 38 text

Então é isso pessoal!

Slide 39

Slide 39 text

Referências https://jakearchibald.github.io/isserviceworkerready/ https://html.spec.whatwg.org/#applicationcache https://github.com/slightlyoff/ServiceWorker/blob/master/explainer.md http://jakearchibald.com/2014/service-worker-first-draft/ https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/ Using_Service_Workers

Slide 40

Slide 40 text

Obrigado! @erickbelfy