Google Developer Expert
+12 years developing for the
web
In love with JS :)
Co-founder of
BrazilJS and Nasc
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Let's talk
nerdy things!
Slide 9
Slide 9 text
Three main technologies
- Open Web APIs
- Service Workers
- Manifest
Slide 10
Slide 10 text
Good practices
- Responsive Design
- Fluid animations
- Accessible
- Makes sense
Slide 11
Slide 11 text
Service Workers
Slide 12
Slide 12 text
Special powers
@felipenmoura
Slide 13
Slide 13 text
Special powers
- Redirects
@felipenmoura
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Special powers
- Redirects
- Intercepting requests
@felipenmoura
Slide 16
Slide 16 text
@felipenmoura
Slide 17
Slide 17 text
Special powers
@felipenmoura
- Redirects
- Intercepting requests
- Cache control
Slide 18
Slide 18 text
@felipenmoura
Slide 19
Slide 19 text
Special powers
@felipenmoura
- Redirects
- Intercepting requests
- Cache control
- Version control
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Special powers
@felipenmoura
- Redirects
- Intercepting requests
- Cache control
- Version control
- Progressive evolution/adoption
Slide 22
Slide 22 text
PROGRESSIVE
Slide 23
Slide 23 text
How?
- Based on Web Technologies
- Open source Technologies
- Asynchronous (promises, lots of promises)
- Safe (HTTPS, inside the Service Worker scope)
@felipenmoura
Slide 24
Slide 24 text
WEB
Slide 25
Slide 25 text
What for?
- To be supported in different platforms
@felipenmoura
Slide 26
Slide 26 text
What for?
@felipenmoura
- To be supported in different platforms
- To work in slow connections or even offline
Slide 27
Slide 27 text
What for?
@felipenmoura
- To be supported in different platforms
- To work in slow connections or even offline
- To become "installable" in the user's device
Slide 28
Slide 28 text
What for?
@felipenmoura
- To be supported in different platforms
- To work in slow connections or even offline
- To become "installable" in the user's device
- To be much faster
Slide 29
Slide 29 text
APP
Slide 30
Slide 30 text
PROGRESSIVE
WEB
APP
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Por: Felipe N. Moura @felipenmoura
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
@felipenmoura
Slide 37
Slide 37 text
Basic needs
@felipenmoura
Slide 38
Slide 38 text
MANIFEST
Slide 39
Slide 39 text
index.html
@felipenmoura
Slide 40
Slide 40 text
webapp-manifest.json
@felipenmoura
Slide 41
Slide 41 text
@felipenmoura
Slide 42
Slide 42 text
@felipenmoura
Slide 43
Slide 43 text
SERVICE
WORKERS
Slide 44
Slide 44 text
Let's CODE!
Slide 45
Slide 45 text
But first…
The theory
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Theory
"Theory is the difference between knowing something,
and KNOWING something."
@felipenmoura
Slide 48
Slide 48 text
"Theory is the difference between knowing something,
and KNOWING something."
-- by Felipe N. Moura
@felipenmoura
Theory
Slide 49
Slide 49 text
Service workers
- Have their own scope
- Once registered, runs in background
- Require HTTPS (or localhost)
- Can only deal with requests in its own scope (or use opaque responses)
@felipenmoura
Slide 50
Slide 50 text
Lifecycle
Slide 51
Slide 51 text
Service Worker lifecycle
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Let's CODE!
Slide 56
Slide 56 text
Let's CODE!
Now, for real!
Slide 57
Slide 57 text
HTML (index.html)
@felipenmoura
Slide 58
Slide 58 text
HTML (index.html)
DONE
Slide 59
Slide 59 text
Browser that do not support Service Worker,
won't even notice it!
Slide 60
Slide 60 text
sw.js
@felipenmoura
Slide 61
Slide 61 text
@felipenmoura
Slide 62
Slide 62 text
sw.js
@felipenmoura
Slide 63
Slide 63 text
sw.js
* Must return a Response object to respondWith.
@felipenmoura
Slide 64
Slide 64 text
Sw.js - Redirecting
@felipenmoura
Slide 65
Slide 65 text
Sw.js - treating 404 errors
@felipenmoura
Slide 66
Slide 66 text
- Redirecting with JavaScript
- Customized 404 using JavaScript
Slide 67
Slide 67 text
Cool, or what?!
Slide 68
Slide 68 text
Time for a
deep dive
Slide 69
Slide 69 text
Cache
@felipenmoura
Slide 70
Slide 70 text
Cache
@felipenmoura
Slide 71
Slide 71 text
Application Shell (AppShell)
@felipenmoura
Slide 72
Slide 72 text
Offline-first
@felipenmoura
Slide 73
Slide 73 text
Look for it in cache
@felipenmoura
Slide 74
Slide 74 text
Resolve with what was in cache...
@felipenmoura
Slide 75
Slide 75 text
...or go fetch it
@felipenmoura
Slide 76
Slide 76 text
And if it succeed...
@felipenmoura
Slide 77
Slide 77 text
...stores it in cache
@felipenmoura
Slide 78
Slide 78 text
Treat the failure risk
@felipenmoura
Slide 79
Slide 79 text
IndexedDB
Slide 80
Slide 80 text
SW may access IndexedDB
- Can be used to deal with JSON reponses
- Asynchronous (although, has an "ugly syntax")
- Allow filtering, searching and update
@felipenmoura
Slide 81
Slide 81 text
ImportScripts
Slide 82
Slide 82 text
Importing Scripts
@felipenmoura
Slide 83
Slide 83 text
Web
Notification
Slide 84
Slide 84 text
Web Notification
@felipenmoura
Slide 85
Slide 85 text
Web Notification
@felipenmoura
Slide 86
Slide 86 text
Web Notification
Slide 87
Slide 87 text
Web Notification
webapp-manifest.json
@felipenmoura
Slide 88
Slide 88 text
Web Notification
Index.html (inline script)
@felipenmoura
Slide 89
Slide 89 text
Web Notification
sw.js
@felipenmoura
Slide 90
Slide 90 text
Hard times!
@felipenmoura
Slide 91
Slide 91 text
Hard times!
- Desligue o cache
(no console do browser)
Slide 92
Slide 92 text
Hard times!
- Desligue o cache
(no console do browser)
- Limpe os dados do cache
Slide 93
Slide 93 text
Hard times!
- Desligue o cache
(no console do browser)
- Limpe os dados do cache
- Visualize todos os
Service workers
Slide 94
Slide 94 text
Hard times!
- Teste offline
Slide 95
Slide 95 text
Hard times!
- Teste offline
- Teste em lie-fi
Slide 96
Slide 96 text
Hard times!
- Teste offline
- Teste em lie-fi
- Use o lighthouse