As Maravilhas do Service Worker

Venha descobrir o que é o Service Worker e como adicioná-lo aos seus apps. Chega de depender da internet para ter o seu app rodando. by Leonn Leite (https://www.linkedin.com/in/leonnleite)

Transcript

1. As maravilhas do Service worker Transformando um site em uma aplicação offline
3. LEONN LEITE PHPDF PHPESTE MAJOR EM PHP MINOR EM JS SEXY SEM SER VULGAR @LEONN LEITE IRMÃO DO LENON PARA DIFEREN CIAR ELE É MAIS GORDO FAMILIA AMAZO- NENSE +LEONN LEITE /LEONN LEITE MAS SOU BRASILI- ENSE
4. Imagine a wifi em um apartamento
9. Na cama do casal a internet funciona assim:
12. PELO MENOS DÁ PRA JOGAR ¯\_(ツ)_/¯
13. MOSTRAR OFFLINE É MELHOR QUE NÃO DAR RESPOSTA
14. QUANDO NÃO SE ESTÁ OFFLINE, MAS NÃO TEM RESPOSTA …
15. É CONHECIDO POR:
16. EU CHAMO DE:
17. EU CHAMO DE:
19. TELA BRANCA
20. SOLUÇÕES?!
21. Criar um app na app store ou google play
24. VENCEMOS!
26. UMA OUTRA SOLUÇÃO
32. leonnleite.com/phpeste
35. leonnleite.com/phpeste
36. leonnleite.com/phpeste
37. leonnleite.com/phpeste
40. PODE MELHORAR
41. ISSO NÃO PARECE UM APP
42. VAMOS ADICIONAR ALGUMAS COISAS
46. VAMOS SUBSTITUIR TUDO ISSO
49. manifest.json
70. Vamos testar, sem conexão?
77. UAI, MAS NÃO IA FUNCIONAR OFFLINE?
78. CALMA, EU POSSO EXPLICAR
79. CADE O SERVICE WORKER?!
80. navigator.serviceWorker.register('sw.js');
81. if (navigator.serviceWorker) { navigator.serviceWorker.register('sw.js'); }
82. ISSO PORQUE TEM UM BROWSER QUE AINDA NÃO DÁ SUPORTE
83. ADIVINHA QUAL
86. PENSOU QUE ERA O IE, NÉ?
87. PENSOU QUE ERA O IE, NÉ?
89. VOLTANDO AO ASSUNTO SW
90. if (navigator.serviceWorker) { navigator.serviceWorker.register('sw.js'); }
91. VOCÊ PODE VER QUE ESTÁ FUNCIONANDO, NO DEVELOPER TOOLS
97. AGORA TEMOS UM SERVICE WORKER
98. sw.js self.addEventListener('fetch', event => { debugger; });
99. sw.js self.addEventListener('fetch', event => { debugger; }); HABILITA O DEBBUGER NO EVENTO FETCH OU SEJA, EM CADA REQUISIÇÃO
100. TEMOS VÁRIOS OUTROS EVENTOS: • FETCH • INSTALL • PUSH • ACTIVATE
105. MOSTRA O REQUEST COMPLETO
106. sw.js self.addEventListener('fetch', event => { event.respondWith( new Response('Hello PHPeste') ); });
107. sw.js self.addEventListener('fetch', event => { event.respondWith( new Response('Hello PHPeste') ); }); EM QUALQUER REQUISIÇÃO, VAI MOSTRAR A MENSAGEM HELLO PHPESTE
109. POSSO ALTERAR SÓ PARTE DO CONTEÚDO
110. VAMOS ALTERAR SÓ AS IMAGENS
112. sw.js self.addEventListener('fetch', event => { var url = new URL(event.request.url); if (url.pathname.endsWith('.jpg')) { event.respondWith( fetch('/toy-story.gif') ) } });
113. sw.js self.addEventListener('fetch', event => { var url = new URL(event.request.url); if (url.pathname.endsWith('.jpg')) { event.respondWith( fetch('/toy-story.gif') ) } });
115. PODEMOS MODIFICAR TELAS DE ERROR
116. 404 POR EXEMPLO
117. sw.js self.addEventListener('fetch', event => { event.respondWith( fetch(event.request).then(response => { if (response.status === 404) { return fetch ('404.png'); } ) } });
118. sw.js self.addEventListener('fetch', event => { event.respondWith( fetch(event.request).then(response => { if (response.status === 404) { return fetch ('404.png'); } ) } });
120. UAU, MAS SE ESTIVER OFFLINE?
123. sw.js self.addEventListener('fetch', event => { event.respondWith( fetch(event.request).catch(error => { return new Response('Ixi, deu ruim... ' + 'Você está offline e eu' + ' não posso fazer nada'); ) } });
126. Desculpe o transtorno, preciso falar do Cache Duvivier, Gregorio
133. sw.js caches.open('phpeste-v1') // return promise
134. sw.js caches.open('phpeste-v1') // return promise ABRE A COLEÇÃO DO CACHE. SE NÃO TIVER, CRIA.
135. sw.js caches.open('phpeste-v1').then(function(cache) { return cache.addAll([ ... ]); }
136. sw.js caches.open('phpeste-v1').then(function(cache) { return cache.addAll([ ... ]); } NO ADDALL ADICIONA ELEMENTOS AO CACHE
137. GERALMENTE POPULAMOS SÓ NO INSTALL
138. sw.js self.addEventListener('install', event => { event.waitUntil( caches.open('phpeste-v1').then(function(response) { return cache.addAll([ ... ]); }) ); });
139. NO EVENT INSTALL DO SERVICE WORKER sw.js self.addEventListener('install', event => { event.waitUntil( caches.open('phpeste-v1').then(function(response) { return cache.addAll([ ... ]); }) ); });
140. sw.js caches.delete('phpeste-v1');
141. sw.js caches.delete('phpeste-v1'); DELETA UMA COLEÇÃO DO CACHE
142. sw.js caches.keys(); // return promise
143. sw.js caches.keys(); // return promise RETORNA TODOS OS CACHENAME
144. caches.keys().then(function(cacheNames) { cacheNames.filter(function(cacheName) { return cacheName.startsWith('phpeste-') && cacheName != 'phpeste-v1'; }).map(function(cacheName) { return caches.delete(cacheName); }); })
145. REMOVE TODOS OS CACHES, QUE COMEÇAM COM PHPESTE- E QUE NÃO SEJA O PHPESTE-V1 caches.keys().then(function(cacheNames) { cacheNames.filter(function(cacheName) { return cacheName.startsWith('phpeste-') && cacheName != 'phpeste-v1'; }).map(function(cacheName) { return caches.delete(cacheName); }); })