Service Workers e o futuro das aplicações no seu browser

Estratégias de cache das aplicações web hoje, são extremamente complicadas e impossíveis de se controlar via programação. ServiceWorkers, além de resolver esse problema, chega com features novas como interceptação de requests, sincronização em background e Push API.

Transcript

1. SERVICE WORKERS E O FUTURO DAS APLICAÇÕES NO SEU BROWSER
2. @eduardojmatos eduardomatos.me OI, EU SOU O EDU
3. Soluções de comunicação que aproximam médicos e pacientes
4. O QUE É UM WORKER
5. Primeira definição de Worker surgiu com o WebWorkers http://www.html5rocks.com/en/tutorials/ workers/basics/
6. BROWSER EXECUTANDO TAREFAS SEM BLOQUEAR A INTERFACE
8. BROWSER SUPPORT
9. 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)
10. E O SERVICE WORKER?
11. 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
13. OK, E AÍ?
14. OFFLINE CONTROL
15. APPLICATION CACHE
16. A forma de cachear arquivos parecia simples... http://diveintohtml5.info/offline.html
17. 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
18. 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.
20. 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
21. VAI SERVICE WORKER!!!!!
25. // 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); }); };
26. // /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' ]); }) ); });
27. // /sw-test/sw.js this.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request).catch(function () { return fetch(event.request); }) ); });
29. 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)
30. https://developers.google.com/web/fundamentals/getting- started/your-first-offline-web-app
31. https://refresh.sprite.com.br
32. E A SEGURANÇA DISSO? • Funciona apenas com https • Escopo por domains
33. ONDE FUNCIONA? https://jakearchibald.github.io/isserviceworkerready/
34. BackgroundSync 
 *specs: https://slightlyoff.github.io/BackgroundSync/spec/ Push Notifications
 *specs: https://w3c.github.io/push-api/ Geofencing [futuramente] Bluetooth [futuramente] FUTURO
35. 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...)
36. eduardo.matos@medicinia.com.br
 eduardoj.matos@gmail.com @eduardojmatos http://eduardomatos.me OBRIGADO ;) bit.ly/talk-service-workers