Service Workers

Você no controle

Luan de Castro...

@castrolol

luan.castro.aleixo@gmail.com

Antes...

Service Workers

Um script que roda em plano de fundo no browser, desvinculado de uma página web.

O que podemos fazer!

• Interceptar e Controlar requisições (evento "fetch")
• Conteúdo offline & Cache Manual (API de Cache)
• Sincronização de Conteúdo (API de Sync)

• Envio de Push Notifications (Api de Push Notifications)

• Comunicação e Controle entre Janelas (Api de Client)

Coisas a se considerar...

• Sem Acesso ao DOM e recursos de Window
• Experimental e Pouco suportado
• Somente em HTTPS
• Deve ser um "Plus" na sua App

Getting Started

Instalando um Service Worker

Eventos

Install, Waiting, Activate

Debug

Firefox - about:debugging

Chrome - about:serviceworker-internals

Offline First

Let's Cache!

Conteudo Offline

• Parte Essencial em Cache
• Dados em Cache, caso Offline

https://castrolol.github.io/service-worker-gallery/

Inserindo a Estrutura no Cache

Interceptando Requisição

Interceptando Requisição

Cacheando Requisição

Usando na Aplicação...

Push Notifications

No Browser?

Push Notification

• Push Notification
• Atualização  das Páginas Abertas

https://castrolol.github.io/service-worker-push/

GCM & Manifesto

Cadastrar o App no https://developers.google.com/cloud-messaging/

manifest.json

no index.html

GCM & Manifesto

Cadastrar o App no https://developers.google.com/cloud-messaging/

manifest.json

no index.html

O Evento 'push'

Problemas Conhecidos

• Chrome somente com GCM
• Firefox geração de Chave em Cliente
• Implementação Diferente para cada Browser
• Payload ainda não implementado

Background Sync

(Bonus)

Emojoy!

https://jakearchibald-gcm.appspot.com/

Compatibilidade

https://jakearchibald.github.io/isserviceworkerready/

Quem já usa?