service workers e o futuro das aplicações no seu browser
TRANSCRIPT
SERVICE WORKERSE O FUTURO DAS APLICAÇÕES
NO SEU BROWSER
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...)
[email protected] [email protected]
@eduardojmatos
http://eduardomatos.me
OBRIGADO ;)
bit.ly/talk-service-workers