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
180
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
35
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
43
Dando rollback no site do governo
joselito
0
240
Chrome Dev Summit'18
joselito
0
65
Next.js: o desenvolvedor feliz de novo
joselito
0
140
Componentizando a Web
joselito
0
160
Firebase para se divertir com IoT
joselito
0
150
Other Decks in Programming
See All in Programming
Road to Ruby for A Linguistics Nerd
hayat01sh1da
PRO
0
370
Global Azure 2025 @ Kansai / Hyperlight
kosmosebi
0
160
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1k
事業KPIを基に価値の解像度を上げる
nealle
0
150
AIコーディングの理想と現実
tomohisa
38
40k
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
140
LRパーサーはいいぞ
ydah
7
1.5k
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.6k
はじめてのPDFKit.pdf
shomakato
0
110
医療系ソフトウェアのAI駆動開発
koukimiura
1
140
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
270
Носок на сок
bo0om
0
1.4k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Practical Orchestrator
shlominoach
187
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Side Projects
sachag
453
42k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Automating Front-end Workflow
addyosmani
1370
200k
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