Save 37% off PRO during our Black Friday Sale! »

As Maravilhas do Service Worker

07000b7876375ae5f03a063db8ef5dec?s=47 PHP DF
October 19, 2016

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)

07000b7876375ae5f03a063db8ef5dec?s=128

PHP DF

October 19, 2016
Tweet

Transcript

  1. As maravilhas do Service worker Transformando um site em uma

    aplicação offline
  2. None
  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

  5. None
  6. None
  7. None
  8. None
  9. Na cama do casal a internet funciona assim:

  10. None
  11. None
  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:

  18. None
  19. TELA BRANCA

  20. SOLUÇÕES?!

  21. Criar um app na app store ou google play

  22. None
  23. None
  24. VENCEMOS!

  25. None
  26. UMA OUTRA SOLUÇÃO

  27. None
  28. None
  29. None
  30. None
  31. None
  32. leonnleite.com/phpeste

  33. None
  34. None
  35. leonnleite.com/phpeste

  36. leonnleite.com/phpeste

  37. leonnleite.com/phpeste

  38. None
  39. None
  40. PODE MELHORAR

  41. ISSO NÃO PARECE UM APP

  42. VAMOS ADICIONAR ALGUMAS COISAS

  43. None
  44. None
  45. None
  46. VAMOS SUBSTITUIR TUDO ISSO

  47. None
  48. None
  49. manifest.json

  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. Vamos testar, sem conexão?

  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  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

  84. None
  85. None
  86. PENSOU QUE ERA O IE, NÉ?

  87. PENSOU QUE ERA O IE, NÉ?

  88. None
  89. VOLTANDO AO ASSUNTO SW

  90. if (navigator.serviceWorker) { navigator.serviceWorker.register('sw.js'); }

  91. VOCÊ PODE VER QUE ESTÁ FUNCIONANDO, NO DEVELOPER TOOLS

  92. None
  93. None
  94. None
  95. None
  96. None
  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
  101. None
  102. None
  103. None
  104. None
  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
  108. None
  109. POSSO ALTERAR SÓ PARTE DO CONTEÚDO

  110. VAMOS ALTERAR SÓ AS IMAGENS

  111. None
  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') ) } });
  114. None
  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'); } ) } });
  119. None
  120. UAU, MAS SE ESTIVER OFFLINE?

  121. None
  122. None
  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'); ) } });
  124. None
  125. None
  126. Desculpe o transtorno, preciso falar do Cache Duvivier, Gregorio

  127. None
  128. None
  129. None
  130. None
  131. None
  132. None
  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); }); })