Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebApps Offline com ServiceWorkers
Search
Joselito
January 13, 2016
Programming
2
190
WebApps Offline com ServiceWorkers
Hangout - GDG BH
Joselito
January 13, 2016
Tweet
Share
More Decks by Joselito
See All by Joselito
Apresentando window.ai
joselito
0
41
Virei Lead, como me manter Tech enquanto gerencio pessoas?
joselito
0
120
Você (provavelmente) não sabia que o Chrome DevTools tinha isso
joselito
1
78
Eleventy: Sites em 3 minutos ou seu dinheiro de volta
joselito
0
46
Dando rollback no site do governo
joselito
0
250
Chrome Dev Summit'18
joselito
0
66
Next.js: o desenvolvedor feliz de novo
joselito
0
150
Componentizando a Web
joselito
0
170
Firebase para se divertir com IoT
joselito
0
150
Other Decks in Programming
See All in Programming
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
130
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
5つのアンチパターンから学ぶLT設計
narihara
1
170
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Producing Creativity
orderedlist
PRO
346
40k
Code Reviewing Like a Champion
maltzj
524
40k
Agile that works and the tools we love
rasmusluckow
329
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Become a Pro
speakerdeck
PRO
29
5.4k
For a Future-Friendly Web
brad_frost
179
9.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Transcript
JOSELITO.NINJA WEB APPS OFFLINE Hangout - GDG Belo Horizonte
@joselitojunior1
MOBILE @joselitojunior1
NATIVO v WEB @joselitojunior1
NATIVO v WEB @joselitojunior1
@joselitojunior1
@joselitojunior1 PROGRESIVE APPS
@joselitojunior1 PROGRESIVE APPS offline first responsive fresh content https safe
indexable installable linkable engageble
@joselitojunior1 PROGRESIVE APPS offline first responsive fresh content https safe
indexable installable linkable engageble
Olá, Joselito • Modelo e atriz • Instrutor, palestrante •
Ex-BBB • GDG Organizer • Fã de F1 • Resolvedor® de problemas • #chrominho
@joselitojunior1 OFFLINE APPS
@joselitojunior1 hIps://speakerdeck.com/joselitojunior1
@joselitojunior1 OFFLINE === USER EXPERIENCE
SERVICE WORKERS @joselitojunior1
@joselitojunior1
SERVICE WORKERS @joselitojunior1 Registro do SW no navegador
@joselitojunior1 if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/ssw.js', { scope: '/'
}).then(function(reg) { // Service Worker registrado! }).catch(function(error) { // Não foi possível registrar o Service Worker console.log(error); }); };
@joselitojunior1 this.addEventListener('install', function(event) { event.waitUntil( caches.open('cache-versao-1').then(function(cache) { return cache.addAll([ '/public/',
'/public/index.html', '/public/estilo.css', '/public/app.js', '/public/image-list.js', '/public/info.json' ]); }) ); });
@joselitojunior1 this.addEventListener('fetch', function(event) { event.respondWith( // Mágica! ); });
@joselitojunior1 this.addEventListener('fetch', function(event) { event.respondWith( // Response() ); });
SERVICE WORKERS @joselitojunior1 Response()
@joselitojunior1 new Response('Hello from GDG Humildão');
@joselitojunior1 new Response('<p>Hello from GDG Humildão!</p>', { headers: { 'Content-Type':
'text/html' } })
@joselitojunior1 fetch(event.request)
@joselitojunior1 caches.match('/fallback.html');
@joselitojunior1 caches.match('/fallback.html');
SERVICE WORKERS @joselitojunior1 onfetch()
@joselitojunior1 self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response ||
fetch(event.request); }) ); });
@joselitojunior1 self.addEventListener('fetch', function(event) { event.respondWith( caches.open('mysite-dynamic').then(function(cache) { return cache.match(event.request).then(function (response)
{ return response || fetch(event.request).then(function(response) { cache.put(event.request, response.clone()); return response; }); }); }) ); });
@joselitojunior1 self.addEventListener('fetch', function(event) { event.respondWith( caches.open('mysite-dynamic').then(function(cache) { return cache.match(event.request).then(function(response) {
var fetchPromise = fetch(event.request).then(function(networkResponse) { cache.put(event.request, networkResponse.clone()); return networkResponse; }) return response || fetchPromise; }) }) ); });
SERVICE WORKERS @joselitojunior1 onsync()
@joselitojunior1 self.addEventListener('sync', function(event) { if (event.id == 'update-leaderboard') { event.waitUntil(
caches.open('mygame-dynamic').then(function(cache) { return cache.add('/leaderboard.json'); }) ); } });
SERVICE WORKERS @joselitojunior1 onactivate()
@joselitojunior1 self.addEventListener('activate', function(event) { // Service Worker funcionando! });
@joselitojunior1 self.onactivate = function(event) { event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all(
cacheNames.map(function(cacheName) { if (expectedCaches.indexOf(cacheName) == -1) { return caches.delete(cacheName); } }) ); }) ); };
SERVICE WORKERS @joselitojunior1 Debugando
@joselitojunior1
SERVICE WORKERS @joselitojunior1 Exemplos
@joselitojunior1 Wikipedia OTine github.com/jakearchibald/oTine-wikipedia
@joselitojunior1 DevFest Nordeste github.com/devfestne/2015-site
Obrigado (: JOSELITO.NINJA @joselitojunior1