Slide 1
Slide 1 text
Peter O'Shaughnessy
@poshaughnessy
@samsunginternet
Progressive Web Apps
Service Workers & Server-free Selfies !
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Snapchat by Snap Inc.
Not to be confused with... "
Slide 7
Slide 7 text
“PWAs combine the best of web & the best of
native”
#
Slide 8
Slide 8 text
Multi-platform
Frictionless
Discoverable
Accessible
Best of web $
Slide 9
Slide 9 text
Add to Home Screen
Offline
Instant load
Push notifications
Best of native %
Slide 10
Slide 10 text
“PWAs are all about removing friction”
&
Slide 11
Slide 11 text
Service Workers '
Slide 12
Slide 12 text
var RESOURCES = ['/images/emojione/1f600.svg', ...];
self.addEventListener('install', function(event) {
function onInstall () {
return caches.open(CACHE_NAME)
.then(function(cache) {
return cache.addAll(RESOURCES);
});
}
);
( Don't cache too much on install! ⚖
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Emoji One SVGs (left), Unicode emojis (right)
Slide 15
Slide 15 text
gulp.task('generate-service-worker', function(callback) {
swPrecache.write(path.join(rootDir, 'service-worker.js'), {
staticFileGlobs: [rootDir + '/**/*.{js,html,css,svg}'],
stripPrefix: rootDir
}, callback);
});
github.com/GoogleChrome/sw-precache
* Automate precache resource list +
Slide 16
Slide 16 text
// sw.js
import resources from '\0initial-resources';
...
cache.addAll( resources );
bit.ly/rollup-precache
Slide 17
Slide 17 text
const RESOURCES = [
'/',
'/index.html',
...
];
...
cache.addAll( RESOURCES );
, URLs, not files -
Slide 18
Slide 18 text
. Remember to check Lighthouse /0
Slide 19
Slide 19 text
1. SSR app shell & initial page. CSR takes over.
2. SSR only app shell. JS fetches rest on load.
3. SSR full page.
4. CSR full page.
5 Rendering preferences (in order) 1
Slide 20
Slide 20 text
“cache first”, then fallback to network
toolbox.router.get('/images', toolbox.cacheFirst);
6 Easy caching strategies with sw-toolbox
2
Slide 21
Slide 21 text
“network first”, then fallback to cache
toolbox.router.get('/api', toolbox.networkFirst);
Slide 22
Slide 22 text
“fastest” — serve whichever comes back first
toolbox.router.get('/profile', toolbox.fastest);
“network only”
“cache only”
Slide 23
Slide 23 text
getUserMedia 3
Slide 24
Slide 24 text
( Enhance progressively! 4
Slide 25
Slide 25 text
* Standalone & localhost: prompt doesn't
appear 5
Slide 26
Slide 26 text
const constraints = {
width: {ideal: width, max: width},
height: {ideal: height, max: height}
};
navigator.mediaDevices.getUserMedia({video: constraints})
...
, Don't rely on getUserMedia constraints 6
Slide 27
Slide 27 text
Saving images 7
Slide 28
Slide 28 text
var link = document.createElement('a');
link.download = 'My Snapwat';
link.href = dataURI;
link.click();
( Common hack ⛏
Slide 29
Slide 29 text
* Data-uri downloads currently blocked ⛔
Slide 31
Slide 31 text
window.open(canvas.toDataURL('image/png'), '_blank');
4 'New tab' in standalone mode kills page ;
Slide 32
Slide 32 text
5 No long tap menu in standalone mode <
Slide 33
Slide 33 text
= Save image disabled if image too big >
Slide 34
Slide 34 text
bit.ly/save-image-feature
Do we need a 'save image' feature? ?
Slide 35
Slide 35 text
orientation (I used JavaScript-Load-
Image)
Calculating canvas text bounds
Text doesn't render when over ~240px?
Other tricky things @
Slide 36
Slide 36 text
Next for Snapwat? ⏩
Slide 37
Slide 37 text
Push notifications B
Slide 38
Slide 38 text
Web Share API C
Slide 39
Slide 39 text
Head tracking D
Slide 40
Slide 40 text
Brushes E
Undo/Redo ↩↪
Local storage? H
Any suggestions...? I
Slide 41
Slide 41 text
Next for PWAs? J
Slide 42
Slide 42 text
Service worker & cache API improvements K
Slide 43
Slide 43 text
navigator.serviceWorker.ready.then(function(reg) {
return reg.sync.register('syncTest');
}).then(function() {
log('Sync registered');
});
Background sync ⛰
Slide 44
Slide 44 text
Link: ; rel="serviceworker"
Origin-Trial: token_obtained_from_signup
bit.ly/foreign-fetch
Foreign fetch ✈
Slide 45
Slide 45 text
jakearchibald.com/2016/service-worker-meeting-notes/
Multiple service workers for parallelisation?
N
Slide 46
Slide 46 text
self.addEventListener('fetch', function(event) {
if (event.request.headers.get('save-data')) {
...
bit.ly/save-data-header
Save-Data header O
Slide 47
Slide 47 text
P snapw.at
Q github.com/SamsungInternet/snapwat
Slide 48
Slide 48 text
@poshaughnessy
@samsunginternet
github.com/samsunginternet
medium.com/samsung-internet-dev
Thanks! R