service workers e o futuro das aplicações no seu browser

SERVICE WORKERSE O FUTURO DAS APLICAÇÕES

NO SEU BROWSER

@eduardojmatos eduardomatos.me

OI, EU SOU O EDU

Soluções de comunicação que aproximam médicos e pacientes

O QUE É UM WORKER

Primeira definição de Worker surgiu com o WebWorkers

http://www.html5rocks.com/en/tutorials/workers/basics/

BROWSER EXECUTANDO TAREFAS

SEM BLOQUEAR A INTERFACE

BROWSER SUPPORT

REGRAS COMUNS DE UM WORKER

• Não acessa o DOM

• Não acessa o window

• Não acessa o document

• Acessa o navigator

• Acessa o location (ready-only)

E O SERVICE WORKER?

SERVICE WORKER

• Usa o mesmo conceito do WebWorker de isolar execução de um script

• Controla programaticamente o cache da sua aplicação

• Serve como um proxy da sua aplicação

OK, E AÍ?

OFFLINE CONTROL

APPLICATION CACHE

A forma de cachear arquivos parecia simples...http://diveintohtml5.info/offline.html

CACHE MANIFEST

# Versão 1.0 # Sempre definimos versão ou uma - logo abaixo vou explicar o porquê

# aqui vão arquivos/caminhos a serem cacheados

CACHE /main/home /main/app.js

# aqui vão arquivos/caminhos que sempre "buscarão" a rede

NETWORK /files/download/1 /files/download/2

arquivo manifest.appcache

PROBLEMAS…• arquivos com parâmetros (querystrings) são considerados recursos diferentes;

• o html com o atributo manifesto sempre será cacheado;

• você precisa declarar TODOS os recursos do site pra que o offline funcione - uma alternativa é usar no NETWORK o * pra que ele considere tudo o que não foi listado dentro de CACHE ou FALLBACK como recurso disponível online;

• pra mudar algum asset que foi atualizado no servidor, você precisa gerar um novo manifesto com algum item de controle no topo do arquivo (como por exemplo uma data ou uma version - como eu fiz no exemplo anterior);

• se há alterações, o usuário precisa atualizar a página pra recebê-las;

• nada é controlado por API, tudo fica no arquivo;

• não dá pra atualizar UM arquivo. Se mudar o manifesto TUDO vai ser baixado de novo;

• se algo do FALLBACK fôr carregado online, sempre esse recurso será carregado online.

APPCACHE IS A DOUCHEBAG

http://alistapart.com/article/application-cache-is-a-douchebag http://sergiolopes.org/palestra-appcache-html5-offline

http://eduardomatos.me/appcache-manifest-e-serviceworker-as-partes-boas-e-ruins

VAI SERVICE WORKER!!!!!

// main.js

if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function (reg) { console.log(‘Success!. Scope is ' + reg.scope); }).catch(function (error) { console.log(‘Ops: ' + error); });

};

// /sw-test/sw.js

this.addEventListener('install', function (event) { event.waitUntil( caches.open('v1').then(function (cache) { return cache.addAll([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js' ]); }) ); });

// /sw-test/sw.js

this.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request).catch(function () { return fetch(event.request); }) ); });

EXEMPLOS DE SERVICE WORKER

https://developers.google.com/web/fundamentals/getting-started/your-first-offline-web-app/

https://jakearchibald.github.io/trained-to-thrill/

https://www.theguardian.com/info

https://refresh.sprite.com.br/ (brazuca! @lnfnunes)

https://developers.google.com/web/fundamentals/getting-started/your-first-offline-web-app

https://refresh.sprite.com.br

E A SEGURANÇA DISSO?

• Funciona apenas com https

• Escopo por domains

ONDE FUNCIONA?

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

BackgroundSync *specs: https://slightlyoff.github.io/BackgroundSync/spec/

Push Notifications *specs: https://w3c.github.io/push-api/

Geofencing [futuramente]

Bluetooth [futuramente]

FUTURO

PORQUE ESSE HYPE TODO?

• JavaScript chegando no app nativo

• Evolução e maior controle das aplicações

• Acesso a funcionalidades do sistema do usuário (bluetooth, push notifications...)

eduardo.matos@medicinia.com.br eduardoj.matos@gmail.com

@eduardojmatos

http://eduardomatos.me

OBRIGADO ;)

bit.ly/talk-service-workers